jquery选项卡内容的问题随更新面板asp.net而消失

时间:2012-08-09 11:50:12

标签: jquery asp.net ajax

我有3个标签 - 最后一个标签有一个更新面板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>

updatepanel有一个过滤功能,带有一个选择框,用ajax调用更改选择列表框。当我进行过滤时,内容会消失并选择第一个标签,但内容会丢失 - 一旦我点击3标签,内容就会重新出现。

请在此处找到标签jquery代码和html:http://jsfiddle.net/zidski/LQKSt/

1 个答案:

答案 0 :(得分:0)

您需要做的是在触发更新面板服务器端事件时再次注册jquery事件。

使用 ScriptManager.RegisterScript 重新注册事件,如

使用按钮单击中的ScriptManager.RegisterScript调用此ReRegister()以及下拉选择的索引更改它在那里。

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();
    });
});
}

点击事件后,您可能需要明确打开第三个标签。

在ScriptManager本身中,您可以调用此

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