Preselecting ajax-enabled tab in jquery UI tabs

Question

I have exactly the same problem as described here: http://bugs.jqueryui.com/ticket/7930. The problem is that the maintainer cannot reproduce it, so the ticket is closed. My code looks as following:

<script type="text/javascript">
    $(document).ready(function () {
        // assigns the value of a GET parameter called tab to tabIndex
        var tabIndex = getUrlVars()['tab'];

        if (isNaN(tabIndex)) {
            tabIndex = 0;
        }

        // initializes tabs and selects the one provided in tabIndex (default: 0)
        $('div#tabs').tabs({ ajaxOptions: { cache: false}, selected: tabIndex });
    });
</script>
<div id="tabs">
    <ul>
        <li>@Html.ActionLink("User roles", "Roles", "Admin", New With {.rand = DateTime.Now.Ticks}, Nothing)</li>
        <li>@Html.ActionLink("Report templates", "Reports", "Admin", New With {.rand = DateTime.Now.Ticks}, Nothing)</li>
        <li>@Html.ActionLink("Blabla", "2", "Admin")</li>
        <li>@Html.ActionLink("Blabla2", "3", "Admin")</li>
    </ul>
</div>

This creates tabs with id's: #ui-tabs-1, #ui-tabs-2, #ui-tabs-3, #ui-tabs-4. I access the page via url: http://server/Admin?tab=1. The appropriate tab is selected (second one with reports), but the ajax call is made to the href of a preceding tab (user roles). It results in an empty tab content being shown. Do you know how to fix it?

It's automatically done by UI tabs. If I provide a elements in UL list then it takes the hrefs and makes ajax calls automatically when changing tabs. You do not need to write your code to achieve this functionality. — Michal B.
– Michal B., Commented Jan 31, 2012 at 11:52
Are you using the very latest version of jquery ui (1.8.17) ? — Didier Ghys
– Didier Ghys, Commented Jan 31, 2012 at 13:16
Yes, I updated it after I had discovered this bug (this is how I consider it for now). — Michal B.
– Michal B., Commented Jan 31, 2012 at 13:50

Michal B. · Accepted Answer · 2012-02-03 11:11:04Z

5

I used:

$('#tabs').tabs({ selected: tabIndex });

But tabIndex was a string (I obtain it from url or url hash), so it resulted in e.g.:

$('#tabs').tabs({ selected: "2" });

In this case you can observe such unexpected behavior.
Calling Number function on tabIndex

tabIndex = Number(tabIndex)

solves the issue.

answered Feb 3, 2012 at 11:11

Michal B.

5,7177 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Preselecting ajax-enabled tab in jquery UI tabs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related