jquery - 如何在gridview按钮单击时调用jquery对话框？

Question

我正在使用jquerydialog。我有一个gridview和一个编辑按钮。我想调用jquery dialoggridview上的编辑按钮click event和。我怎样才能实现这一点？当放置在gridview之外时，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>

这是我用过的gridview

<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中的相同概念，您可以尝试以下操作：

将 gridview 按钮更改为：

<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>

Answer 4

选择 gridview 中的输入类型按钮时，尝试使用 class 而不是 Id 作为选择器。

    <ItemTemplate>
      <input type="button" id="btnEdit" class="btnClass" runat="server" value="Edit" /> 
    </ItemTemplate>

    <script type="text/javascript" language="javascript">
         $(document).ready(function()
         {
            $('.btnClass').unbind("click");
            $('.btnClass').bind("click", function() {

                 $("#dialog-form").dialog("open");

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