Question

I have 3 tabs – and the last tab has a updatepanel asp.net:

<div id='tab3' class="tab-panel">
            <h3>
                Filter</h3>
            <asp:UpdatePanel ID="updFilters" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="ddlFilterSelect" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlFilterSelect_SelectedIndexChanged"></asp:DropDownList>
                    <asp:ListBox ID="lstFilterSelect" runat="server" SelectionMode="Single" AutoPostBack="true" OnSelectedIndexChanged="lstFilterSelect_SelectedIndexChanged"></asp:ListBox>
                    <asp:Button ID="btnReset" runat="server" Text="Reset Filter" OnClick="btnReset_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

The updatepanel has a filter function with a select box changing the Select list box with a ajax call. What happens is when I do a filter the content disappears and selects the first tab but the content stays missing – once I click back on the 3 tab the content re-appears.

Please find the tab jquery code and html here: http://jsfiddle.net/zidski/LQKSt/

Answer 1

What you need to do is to again register the jquery events when the update panel server side event is fired.

Use ScriptManager.RegisterScript to re-register the event like

Call this ReRegister() using ScriptManager.RegisterScript in the button click as well as dropdown selected index change it is there.

function ReRegister()
{
// Tabs
$('ul.tabs').each(function () {
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = $(this).find('a');

    // Use the first link as the initial active tab
    $active = $links.first().addClass('active');
    $content = $($active.attr('href'));

    // Hide the remaining content
    $links.not(':first').each(function () {
        $($(this).attr('href')).hide();
    });

    // Bind the click event handler
    $(this).on('click', 'a', function (e) {
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        // Update the variables with the new link and content
        $active = $(this);
        $content = $($(this).attr('href'));

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});
}

And after the click event is fired you may need to open the third tab explicitly.

In ScriptManager itself you can call this

// Open third tab
$('#tabs ul').tabs('select', 2);