jQuery tabs don't work after a gridview page is changed

Question

jQuery dialog with tabs disappear when a page of the GridView is changed. When the page is rendered i have a button that on click pops a jQuery dialog with tabs, but on this page I also have a GridView and if i change the page of the grid view and then click again on the button that should display the jQuery dialog with the tabs - the tabs are not displayed. Instead the dialog pops up but the tabs are just displayed as list items. Here is my aspx code and the javascript function:

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

And here is the code that pops the jQuery dialog:

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

The GridView is placed inside a UpdatePanel if it matters. Why is it that the tabs in the jQuery dialog are not shown when the button is clicked after a page of the GridView is been changed?

This is similar: http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker/3341741#3341741 You need to initialize again after the update panel - updates his content. — Aristos, Oct 22 '13 at 13:33
I see, but how can I initialize it again in my case? Sorry about the question, but I am a beginner.. — Apostrofix, Oct 22 '13 at 13:39
i initialized it the same way as the answer in the other topic but I still have the same problem. do you have any other ideas? — Apostrofix, Oct 22 '13 at 14:35
Do you also initialize again this part: `$("#returning_dialog_form").tabs();` ? — Aristos, Oct 22 '13 at 22:36

jQuery tabs don't work after a gridview page is changed

0 Answers0