0

私はjquerydialogjquery dialogを使用しています。グリッドビューと編集ボタンがあります。グリッドビューの編集ボタンを呼び出したいのですが、click eventこれを達成するにはどうすればよいですか?JqueryDialogは、グリッドビューの外に配置されたときにボタンクリックイベントで正しく動作します

ここでジャバスクリプト

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

Heresは、私が使用したグリッドビューです

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

4 に答える 4

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;
}
于 2013-03-11T11:18:45.183 に答える
1

これは完璧に動作するはずです....!

$(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");
        });
    });
于 2013-03-11T11:39:38.947 に答える
0

Tejsの 回答と同じ概念を使用して、次のことを試すことができます。

グリッドビューボタンを次のように変更します。

<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>
于 2013-03-11T11:06:42.590 に答える
0

グリッドビュー内の入力タイプ ボタンを選択するときに、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>
于 2013-07-15T07:32:52.263 に答える