jquery tabs postback problem

Question

i am using jquery library in my project.I have terrible problem with jquery tabs.Solutions is that when i was in third tab,i post back my form,tabs reloaded and goes to first tab. i am searching to solve problem long time.

<script type="text/javascript">
    $(document).ready(function() {
        $("#example > ul").tabs({ remote: true, cache: true });
    });       
</script>

so how i solve this problem? thx your answers.

Answer 1

tabs can use cookies to store the current tab. Have a look at the tabs documentation. Down in the Options list there is an example of how to use cookies to store the current tab:

$('.selector').tabs({ cookie: { expires: 30 } });

This requires the jquery cookies plugin to be included though.

Answer 2

You didn't specify if you're using ASP.NET, but if you are you can store the currently selected tab in an <asp:HiddenField /> instead of a cookie:

<script type="text/javascript" language="javascript">
    $(function() {
        $("#example").tabs({
            show: function() {
                var sel = $('#example').tabs('option', 'selected');
                $("#<%= hidLastTab.ClientID %>").val(sel);
            },
            selected: <%= hidLastTab.Value %>
        });
    });
</script>
<asp:HiddenField runat="server" ID="hidLastTab" Value="0" />

If not ASP.NET, you could probably do something similar.

Answer 3

I attempted to use the solution posted by joelsand. However, the jQuery Tabs options and events have changed. The current documentation is at http://api.jqueryui.com/tabs/.

Instead of the "show" event, I used the "activated" event. Instead of the "selected" option, I used the "active" option. Instead of a hidden field, I used a JavaScript variable (declared outside the UpdatePanel)

Answer 4

I had the same problem, fixed by adding the following to the jquery tabs select event handler:

$("div.ui-tabs-panel").html("");

It effectively clears all existing panels to prevent form stacking.