Preselezione della scheda abilitata ajax nelle schede dell'interfaccia utente jquery

Question

Ho esattamente lo stesso problema descritto qui: http://bugs.jqueryui.com/ticket/7930. Il problema è che il maintainer non può riprodurlo, quindi il ticket è chiuso. Il mio codice è come segue:

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

Questo crea le schede con id: # ui-tabs-1, # ui-tabs-2, # ui-tabs-3, # ui-tabs-4. Accedo alla pagina tramite l'url: http://server/Admin?tab=1. La scheda appropriata è selezionata (la seconda con i report), ma la chiamata ajax viene eseguita nella href di una scheda precedente (ruoli utente). Ne risulta un contenuto della scheda vuoto che viene mostrato. Sai come aggiustarlo?

Answer 1

ho usato:

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

Ma tabIndex era una stringa (ottengo da URL o URL hash), quindi si è tradotto in esempio:

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

In questo caso puoi osservare un comportamento così inaspettato.
chiamando la funzione Numero sul tabIndex

tabIndex = Number(tabIndex)

risolve il problema.