CODEWITHSUNDEEP
jqueryasp.net-mvc-3jquery-uijquery-ui-tabs
Michal B.
Michal B.

Reputation: 5719

Preselecting ajax-enabled tab in jquery UI tabs

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?

Upvotes: 7

Views: 1401

Answers (1)

Michal B.
Michal B.

Reputation: 5719

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.

Upvotes: 5

Related Questions