Preselect ajax-enabled tabs on jquery user interface tabs

Question

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

<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 identifiers: # ui-tabs-1, # ui-tabs-2, # ui-tabs-3, # ui-tabs-4. I access the page through the URL: http: // server / Admin? Tab = 1 . The corresponding tab is selected (the second with reports), but the ajax call is made in the href of the previous tab (user role). As a result, the empty contents of the tab are displayed. Do you know how to fix this?

Answer 1

I used:

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

But tabIndex was a string (I get it from a url or url hash), so it resulted in an example:

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

In this case, you may observe such unexpected behavior.
Calling Number Function on tabIndex

tabIndex = Number(tabIndex)

solves the problem.