jquery tabs postback problem

Question

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

Thx marius,but i dont. I downloaded jquery cookie plugin and changed my code that:

<script type="text/javascript">
    $(document).ready(function() {
        $("#example > ul").tabs({ remote: true, cache: true });
        $("#example").tabs({ cookie: { expires: 30} });
    });       
</script>
<div id="example" class="flora" style="height: 100%">
.....
</div>

The firefox dispay an error: "$.cookie is not a function"

what i do? I am beginner client-side programming.

Answer 3

I have the same problem, if I use the cookies as stated above. Any one has any solution?

Answer 4

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 5

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.

Answer 6

Answer by @marius works like a charm!