如何调用jquery对话框点击gridview按钮？

Question

我正在使用jquerydialog.I，其中有一个网格视图和一个编辑按钮。我想在网格视图上调用jquery dialog编辑按钮click event和.How。我可以实现这一点吗?JqueryDialog在放置在网格视图之外的按钮单击事件上工作正常

这里的javascript

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script type="text/javascript"> 
   $(function() {    
        $("#dialog-form").dialog({
            autoOpen:false,
            show:{
                effect:"blind",
                duration:1000                
            },
            hide:{
                effect:"explode",
                duration:1000
            },
            height:500,
            width:550,
            modal:true              
        });            
   });
   $("input[id$=btnAdd]").live("click",function(){                
            $("#dialog-form").dialog("open");
        });
 </script>

这是我用过的网格视图

<asp:GridView ID="gdProgram" runat="server" CssClass="ui-widget ui-widget-contain" AutoGenerateColumns="False" Width="700px"
HeaderStyle-CssClass="ui-widget-header">
    <Columns>
        <asp:TemplateField HeaderText="SlNo">
            <ItemTemplate >
                <asp:Label ID="Label1" runat="server" Text='<%# "Test1" %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
             <ItemTemplate>
                <asp:Label ID="lbl2" runat="server" Text='<%# "Test2" %>'></asp:Label>
            </ItemTemplate>           
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="lbl3" runat="server" Text='<%# "Test3" %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <input type="button" id="btnEdit" runat="server" value="Edit" /> 
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>     
</asp:GridView>

Answer 1

把它改成这样。

 <asp:TemplateField>
   <ItemTemplate>
             <input type="button" id="btnEdit" runat="server" value="Edit" onclick="showDialog(this);" /> 
            </ItemTemplate>
        </asp:TemplateField>

在JS中

function ShowDialog(currObj)
{
   // do some thing with currObj data
  $("#dialog-form").dialog({
            autoOpen:false,
            show:{
                effect:"blind",
                duration:1000                
            },
            hide:{
                effect:"explode",
                duration:1000
            },
            height:500,
            width:550,
            modal:true              
        });      
  return false;
}

Answer 2

这应该可以完美的工作...！

$(document).ready(function(){
    $('#<%=gdProgram.ClientID%> :button').click(function(){
           $("#dialog-form").dialog("open");
    });
});

以防它不起作用..这意味着您在母版页上有一些与此代码冲突的其他jquery。你只需要使用jQuery.noConflict就可以了。

 var j=jQuery.noConflict();
    j(document).ready(function(){
        j('#<%=gdProgram.ClientID%> :button').click(function(){
               j("#dialog-form").dialog("open");
        });
    });

Answer 3

使用Tejs answer中的相同概念，您可以尝试以下操作：

将网格视图按钮更改为：

<ItemTemplate>
    <asp:Button ID="btnEdit" runat="server" Text="Edit" />
</ItemTemplate>

还有你的JS调用：

<script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
         $('#<%= btnEdit.ClientID %>').click(function(e) 
         { 
             $("#dialog-form").dialog("open");

             if(/*Some Condition Is Not Met*/) 
                return false;
         });
     });
</script>