Conserver l’onglet précédent actif de jQuery-ui (avant le rechargement) lors du rechargement de la page

J’ai un composant jquery-ui tab avec deux tabs.

 @Html.Hidden("SelectedTabId")  Tab1
 Tab2

Lorsque je suis dans Tab-2, je fais des choses qui provoquent la mise à jour automatique et programmée de certains champs (@ Html.TextBoxFor) dans Tab-2 lorsqu’une condition survient. Donc, après que cela se produise (champs mis à jour), la page est rechargée. Une fois la page rechargée, le premier onglet Tab-1 est actif, mais je veux que Tab-2 soit actif à la place de ce qui était actif avant le rechargement de la page.

J’utilise un champ masqué, SelectedTabId (voir le code ci-dessus), qui conserve l’onglet actif en cours afin de le mettre à jour avec l’index de l’onglet activé et l’activation de l’onglet correct une fois que la page est rechargée en demandant cette valeur. Voir le code ci-dessous:

  $(function () { $("#tabs").tabs({ active: $('#SelectedTabId').val()}); } $(document).ready(function () { var tabs = $("#tabs").tabs({ beforeActivate: function (event, ui) { $('#SelectedTabId').val(ui.newTab.index()); } }); }

Je veux que le précédent onglet actif rest actif après le rechargement de la page, mais il ne fonctionne pas.

J’utilise jQuery-ui 1.10.2

Utilisez le navigateur sessionStorage pour stocker l’index d’tabs,

quelque chose comme ça:

 $(document).ready(function () { var currentTabIndex = "0"; $tab = $("#tabs").tabs({ activate : function (e, ui) { currentTabIndex = ui.newTab.index().toSsortingng(); sessionStorage.setItem('tab-index', currentTabIndex); } }); if (sessionStorage.getItem('tab-index') != null) { currentTabIndex = sessionStorage.getItem('tab-index'); console.log(currentTabIndex); $tab.tabs('option', 'active', currentTabIndex); } $('#btn-sub').on('click', function () { sessionStorage.setItem("tab-index", currentTabIndex); //window.location = "/Home/Index/"; }); });

cela mettra à jour le sessionStorage en changeant l’onglet, essayez de le mettre à jour en utilisant votre condition. J’espère que ça aide.

voici la démo pour le stockage local

Vous pouvez supprimer le sessionStorage en utilisant sessionStorage.removeItem('tab-index');

sessionStorage est automatiquement effacé à la fermeture du navigateur. Cela fonctionne à peu près de la même manière que localStorage .

voici la démo pour sessionStorage

J’ai trouvé le moyen de stocker l’ identifiant de l’onglet actuellement actif dans la variable masquée. Jetez un oeil à cette démo JSFIDDLE . Lorsque vous obtenez l’id du formulaire à tabs actif, l’élément d’entrée masqué le stocke dans la session ou dans la firebase database. Lorsque la page est rechargée, récupérez cette valeur et définissez-la dans l’option active: option des tabs.

HTML:

 Currently active tab:    Tab 1
 Tab 2
 Tab 3
 
  Tab 1 content
 
  Tab 2 content
 
  Tab 3 content

JS:

 $(function() { $( "#tabs" ).tabs({ active: 2, activate: function( event, ui ) { var active = $( ".selector" ).tabs( "option", "active" ); console.log(active); $('#active_tab').val(active.context.activeElement.id); } }); });