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., Jan 31 '12 at 11:52
Are you using the very latest version of jquery ui (1.8.17) ? — Didier Ghys, Jan 31 '12 at 13:16
Yes, I updated it after I had discovered this bug (this is how I consider it for now). — Michal B., Jan 31 '12 at 13:50

score 5 · Accepted Answer · answered Feb 03 '12 at 11:11

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.

Preselecting ajax-enabled tab in jquery UI tabs

1 Answers1