Bleiben Sie auf dem aktuellen jQuery Tab über Post zurück?

Question

Ich verwende jQuery-Registerkarten und eine ASP.NET-Listenansicht, um einige Informationen anzuzeigen und zu bearbeiten. Mein Problem ist, dass wenn ein Benutzer einen neuen Datensatz in eines der Listenansichtselemente einfügt, meine jQuery-Registerkarten auf die erste Registerkarte zurückkehren. Gibt es eine Möglichkeit, den Überblick über den Tab zu behalten, auf dem ich mich befinde, oder zu verhindern, dass er auf dem Post zurück liegt?

Answer 1

In asp.net Sie es in einem versteckten Feld speichern können, ohne einen Cookie zu verwenden (keine Notwendigkeit für die jquery Cookie-Referenz).

verwenden:

$(function() { 
    $("#tabs").tabs({ 
     activate: function() { 
      var selectedTab = $('#tabs').tabs('option', 'active'); 
      $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab); 
      }, 
     active: <%= hdnSelectedTab.Value %> 
    }); 
}); 

Dann im Körper, erklären Sie Ihre verborgenen Registerkarte Feld:

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" /> 

Grundsätzlich auf die Auswahl einer Registerkarte Sie den ausgewählten Registerkarten Wert in der asp sind Speichern versteckt Feld. Dann zeigen Sie den Wert an.

Answer 2

Es gibt built-in support für die jQuery cookie plugin (direct download). Sie verwenden es wie folgt:

$("#tabs").tabs({ 
    cookie: { expires: 7 } //1 week 
}); 

Es ist nicht das gleiche wie die Aufrechterhaltung über Postback, aber es bietet normalerweise den gewünschten Effekt.

Answer 3

Sie können die aktuellen Registerkarte erhalten, indem dies zu tun:

var selected = $tabs.tabs('option', 'selected'); 

Sie können dann auf die Registerkarte wählen (nach Abschluss des POST), indem Sie diese:

$tabs.tabs('select', selected); 

Beachten Sie, dass die Registerwahl ist Indexierung auf 0-Basis. Wenn Sie also 2 auswählen, wird die dritte Registerkarte ausgewählt.

Answer 4

Ich bin kein .NET-Typ, aber Sie können wahrscheinlich auf das Submit() - Ereignis des Formulars zugreifen und die aktuell aktive Registerkarte mit Ihren Formulardaten an den Server senden. Auf diese Weise können Sie einfach die richtige Registerkarte auf der Serverseite auswählen, wenn Sie das DOM und JS tatsächlich generieren. wie

Etwas ...

$("#the_form").submit(function(){ 
    var $form   = $(this); 
     selected_tab_idx = $("#the_tabs").tabs("option", "selected"); 
    $('<input />', {type: hidden, name: 'tab_index', value: selected_tab_idx}).appendTo($form); 
    return true; 
}); 

Answer 5

Bei neueren Versionen von jQuery und jQuery UI, wird dies sein:

$(function() { 
     $("#tabs").tabs({ 
      activate: function() { 
       var selectedTab = $('#tabs').tabs('option', 'active'); 
       $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab); 
      }, 
      active: document.getElementById('<%= hdnSelectedTab.ClientID %>').value 
     }); 
    }); 

Die ‚ausgewählt‘ Option ‚aktiv‘ ersetzt wird ... Ofcourse Sie müssen noch das versteckte Feld hinzuzufügen:

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" /> 

Answer 6

Diese Lösung für mich gearbeitet: Source http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net/

<script type="text/javascript"> 
     var selTab; 
     $(function() { 
      var tabs = $("#tabs").tabs({ 
       show: function() { 
        //get the selected tab index 
        selTab = $('#tabs').tabs('option', 'selected'); 

       } 
      }); 

     }); 

    function pageLoad(sender, args) { 

     if (args.get_isPartialLoad()) { 

      $("#tabs").tabs({show: function() { 
        //get the selected tab index on partial postback 
        selTab = $('#tabs').tabs('option', 'selected'); 

       }, selected: selTab }); 

     } 
    }; 

    </script> 

Answer 7

Try dies:

auf die Seite hinzufügen:

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" /> 

zum Skript hinzufügen:

$(function() { 
    var activeIndex = parseInt($get("hdnSelectedTab").value); 
    $("#tabs").tabs({ 
     active: activeIndex, 
     activate: function (event, ui) { 
      $get("hdnSelectedTab").value = ui.newTab.index(); 
     } 
    }); 
});