Onglets jquery - enregistrer le contenu de l'onglet sur la navigation dans l'onglet

Question

J'ai une page Web qui utilise le contrôle jquery tabs. Dans cette page, les onglets sont générés dynamiquement en fonction de ce que l'utilisateur sélectionne. Ces onglets affichent le contenu des pages de mon application Web. Par exemple, l'utilisateur choisit la catégorie "Inventaire" puis sélectionne l'option "Articles" et charge la page Web "Inventaire -> Articles" dans un nouvel onglet. Dans la page "Articles", il y a des liens qui peuvent être cliqués par l'utilisateur qui va naviguer dans l'onglet vers une page web différente dans mon application web (ex: Modifier l'élément). Si l'utilisateur clique sur un onglet différent (par exemple l'onglet "Commandes") et revient à son onglet "Articles", il rafraîchit l'onglet à la page que l'onglet charge lorsqu'il est nouvellement créé au lieu du dernier endroit où l'utilisateur se trouvait il a quitté l'onglet.

Comment est-ce que je peux préserver l'endroit où l'utilisateur était quand il a quitté l'étiquette, par exemple éditer un article? J'utilise MVC 4 Razor et jQuery.

Pour plus de clarté s'il vous plaît voir ci-dessous mon code HTML complet:

<script> 
 
    debugger; 
 
    $(document).ready(function() { 
 
     var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
 
      tabCounter = 2; 
 

 
     var tabs = $("#tabs").tabs(); 
 

 
     $("#open_module").button().on("click", function() { 
 
      $("#dialog").dialog("open"); 
 
     }); 
 

 
     // Modal dialog init: custom buttons and a "close" callback resetting the form inside 
 
     $("#dialog").dialog({ 
 
      autoOpen: false, 
 
      modal: true, 
 
      buttons: { 
 
       Add: function() { 
 
        addTab(); 
 
        $(this).dialog("close"); 
 
       }, 
 
       Cancel: function() { 
 
        $(this).dialog("close"); 
 
       } 
 
      }, 
 
      close: function() { 
 
       form[0].reset(); 
 
      } 
 
     }); 
 

 
     // AddTab form: calls addTab function on submit and closes the dialog 
 
     var form = $("#dialog").find("form").on("submit", function (event) { 
 
      addTab(); 
 
      $("#dialog").dialog("close"); 
 
      event.preventDefault(); 
 
     }); 
 

 
     // Actual addTab function: adds new tab using the input from the form above 
 
     function addTab() { 
 
      var e = document.getElementById("page-links"); 
 
      var link = e[e.selectedIndex].value; 
 
      var tabTitle = e[e.selectedIndex].text; 
 
      var tabContent = "<object type='text/html' data='" + link + "' width='800px' height='600px' style='overflow:hidden;'/>"; 
 
      var label = tabTitle || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), tabContentHtml = tabContent || "Tab " + tabCounter + " content."; 
 

 
      tabs.find(".ui-tabs-nav").append(li); 
 
      tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>"); 
 
      tabs.tabs("refresh"); 
 
      tabCounter++; 
 
     } 
 

 
     // Close icon: removing the tab on click 
 
     tabs.on("click", "span.ui-icon-close", function() { 
 
      var panelId = $(this).closest("li").remove().attr("aria-controls"); 
 
      $("#" + panelId).remove(); 
 
      tabs.tabs("refresh"); 
 
     }); 
 

 
     tabs.on("keyup", function (event) { 
 
      if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
 
       var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
 
       $("#" + panelId).remove(); 
 
       tabs.tabs("refresh"); 
 
      } 
 
     }); 
 

 
     
 
    }); 
 

 
    function LoadLinks(category) { 
 
     var url = "/Home/LoadLinks/"; 
 
     var e = document.getElementById("categories"); 
 
     var _custid = e[e.selectedIndex].value; 
 
     $("#page-links").empty(); 
 

 
     $.ajax({ 
 
      url: url, 
 
      data: { cat: category }, 
 
      cache: false, 
 
      type: "POST", 
 
      success: function (data) { 
 
       $.each(data, function (i, data) { 
 
        $("#page-links").append('<option value="' + data.Value + '">' + data.Text + '</option>'); 
 
       }); 
 
      }, 
 
      error: function (reponse) { 
 
       alert("error : " + reponse); 
 
      } 
 
     }); 
 
     return false; 
 
    } 
 

 
</script>

@{ 
 
    ViewBag.Title = "my title"; 
 
} 
 
@section featured { 
 
    <section class="featured"> 
 
     <div class="content-wrapper"> 
 
      <hgroup class="title"> 
 
       <h1>@ViewBag.Title.</h1> 
 
       <h2>@ViewBag.Message</h2> 
 
      </hgroup> 
 
      <p> 
 
       
 
      </p> 
 
     </div> 
 
    </section> 
 
} 
 
<button id="open_module">Open Module</button> 
 

 
<div id="dialog" title="Open Module"> 
 
    <form> 
 
    <fieldset class="ui-helper-reset"> 
 
     <legend>PageSelector</legend> 
 
     <label id="category-label">Category</label> 
 
     <select id="categories" onchange="javascript:LoadLinks(this.value);"> 
 
      <option value="0">Select one...</option> 
 
      <option value="Inventory">Inventory</option> 
 
      <option value="CustomerManagement">Customer Management</option> 
 
      <option value="VendorManagement">Vendor Management</option> 
 
      <option value="Invoicing">Invoicing</option> 
 
      <option value="Receiving">Receiving</option> 
 
      <option value="Purchasing">Purchasing</option> 
 
      <option value="Human Resources">Human Resources</option> 
 
      <option value="OrderEntry">Order Entry</option> 
 
     </select> 
 
     <select id="page-links"> 
 
      <option value="value">Select a category...</option> 
 
     </select> 
 
    </fieldset> 
 
    </form> 
 
</div> 
 

 
<div id="tabs"> 
 

 
    <ul> 
 
     <li class="current"><a href="#tabs-1">About</a></li> 
 
    </ul> 
 

 
     <div id="tabs-1"> 
 
      <object type="text/html" data="/Home/About" width="800px" height="600px" style="overflow:hidden;"/> 
 
     </div> 
 

 
</div>

Answer 1

La réponse est, Chrome est le problème. Le site fonctionne comme prévu lorsqu'il est ouvert à partir d'IE et FireFox, juste Chrome ne joue pas bien. Et c'est dommage, le chrome était mon préféré :(

Pour une raison quelconque, Chrome recharge l'onglet lorsque vous cliquez dessus, ce qui entraîne l'ouverture de la page par défaut.Lorsque vous utilisez IE ou FireFox, il ne recharge pas l'onglet sur Cliquez maintenant pour savoir pourquoi certains sites Web sont spécifiques au navigateur :)