GridView
のページが変更されると、タブ付きの jQuery ダイアログが消えます。ページがレンダリングされると、クリックするとタブ付きのjQueryダイアログが表示されるボタンがありますが、このページにGridView
は、グリッドビューのページを変更してからjQueryダイアログを表示するボタンをもう一度クリックすると、タブ付き - タブは表示されません。代わりにダイアログがポップアップしますが、タブはリスト項目として表示されます。これが私のaspxコードとjavascript関数です:
<div id="returning_dialog_form" title="Returning">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ul>
<li><a href="#return_item_tab">Item</a></li>
<li><a href="#return_accessory_tab">Accessory</a></li>
</ul>
<div id="return_item_tab" title="Return Item">
<p>Enter the id of the item that you want to return: </p>
<asp:TextBox ID="TextBox1" runat="server" />
<br />
<asp:Button ID="return_item_button" runat="server" Text="Return item" OnClick="return_item_Click" />
</div>
<div id="return_accessory_tab" title="Return accessory">
<p>Enter the id of the accessory that you want to return: </p>
<asp:TextBox ID="TextBox2" runat="server" />
<br />
<asp:Button ID="return_accessory_button" runat="server" Text="Return accessory" OnClick="return_accessory_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script>
$(function () {
$("#returning_dialog_form").tabs();
});
</script>
jQueryダイアログをポップするコードは次のとおりです。
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 320,
maxHeight: 320,
width: 320,
height: 320,
autoOpen: false
};
$('#returning_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#returning_dialog_form").dialog({
});
$("#return_item_button_dialog").click(function () {
$("#returning_dialog_form").dialog("open");
return false;
});
});
</script>
GridView
重要な場合は、UpdatePanel 内に配置されます。GridView
のページが変更された後にボタンをクリックすると、jQuery ダイアログのタブが表示されないのはなぜですか?