Onglets Jquery-UI: Double chargement de l'onglet par défaut

Question

J'utilise jqueryui-tabs pour afficher une interface utilisateur à onglets. voici comment mon code ressemble dans une MasterPage:

<div id="channel-tabs" class="ui-tabs"> 
    <ul class="ui-tabs-nav"> 
     <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li> 
     <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> 
     <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> 
    </ul> 

    <div id="Blog_Results"> 
     <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 

Si le contenu est chargé via ajax, je retourne une vue partielle avec le contenu de l'onglet. Si le contenu est chargé directement, je charge une page qui inclut le contenu dans ContentPlaceHolder.

un peu comme ceci:

<asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server"> 
    <%=Html.Partial("Partial",Model) %> 
</asp:Content> 

//same goes for the other tabs. 

Avec cela en place, si j'accéder à l'URL «/Forums » Il charge le contenu du forum dans l'onglet Blog premier, déclencher la charge ajax de l'onglet Blog et remplacer le contenu avec le contenu du blog. J'ai essayé de mettre un différent espace réservé pour chaque onglet, mais cela n'a pas non plus tout réglé, puisque lors du chargement de "/ Forums" il chargera sûrement l'onglet du forum, mais l'onglet Blog apparaîtra en premier. En outre, si vous utilisez des espaces réservés séparés, si je charge l'URL "/ Blogs", le contenu sera d'abord chargé statiquement dans le lecteur de contenu du blog, puis un appel ajax sera chargé pour le charger une seconde fois et le remplacer. Si je lie juste l'étiquette au hashtag, alors quand je charge les onglets du forum, je n'obtiendrai pas le contenu du blog ...

Comment atteindriez-vous le comportement attendu? Je pense que je pourrais avoir un problème plus profond dans l'organisation de mes opinions. Est-ce que mettre les onglets dans la page maître est le chemin à parcourir? Peut-être que je devrais simplement hijax les liens manuellement et ne pas compter sur les onglets jquery-ui pour faire le travail pour moi.

Je ne peux pas charger tous les onglets par défaut et les afficher en utilisant les balises de hachage, j'ai besoin d'un chargement ajax car c'est un processus de recherche qui peut être long.

Donc, pour résumer:

• /Forum devrait charger l'onglet forum, et que les autres onglets sont chargés avec un appel ajax en cliquant dessus.
• /Twitter devrait charger l'onglet twitter et laisser les autres onglets ....
• il en va de même pour/Blogs et tous les onglets que j'ajouterais plus tard.

Une idée pour que cela fonctionne correctement?

Answer 1

Voici comment je résolu mon problème de double chargement lorsque vous utilisez les onglets dans le masterpage et le chargement d'un porte-place contenu dans chacun d'eux pour que je pourrais obtenir à chaque onglet avec une autre url:

$(function() { 
     var first = true; 
     var $tabs = $("#channel-tabs").tabs(
         { 
          ajaxOptions: { 
           beforeSend: function (xhttp) { 
            if (first) return false; 
           }, 
           error: function (xhr, status, index, anchor) { 
            $(anchor.hash).html("Couldn't load this tab. " + xhr.responseText); 
           } 
         }, 
         select: function (event, ui) { 
           first = false; 
         }, 
         cache: true, 
         }); 
    }); 

Lorsque la page se charge, j'annule la requête Ajax si c'est la première fois qu'elle se produit, je la réactive à la première sélection d'un onglet.

Ce n'est pas aussi propre que je le voudrais, mais ça fonctionne bien.