¿Permaneciendo en la pestaña actual de jQuery en la publicación posterior?

Question

Estoy usando las pestañas jQuery y una vista de lista ASP.NET para mostrar y editar cierta información. Mi problema es que cuando un usuario inserta un nuevo registro en uno de los elementos de la vista de lista, mis pestañas jQuery vuelven a la primera pestaña. ¿Hay alguna manera de mantener un registro de la pestaña en la que estoy o de dejar que repose en la publicación posterior?

Answer 1

En asp.net se puede almacenar en un campo oculto y sin tener que usar una cookie (sin necesidad de la referencia de galletas jQuery).

Utilice esta:

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

Luego, en el cuerpo, declaran su campo pestaña oculta:

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

Básicamente, en la selección de una ficha que está almacenando el valor de la ficha seleccionada en el asp oculta campo. Luego, en show, está recuperando el valor.

Answer 2

Hay built-in support para jQuery cookie plugin (direct download). Lo usa así:

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

No es lo mismo que mantener en la devolución de datos, pero generalmente proporciona el efecto deseado.

Answer 3

Usted puede obtener la ficha actual al hacer esto:

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

A continuación, puede seleccionar la pestaña (una vez completada la POST) al hacer esto:

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

Tenga en cuenta que la selección de etiqueta es Indización basada en 0, por lo que seleccionar 2 significa seleccionar la tercera pestaña.

Answer 4

No soy un chico de .NET, pero probablemente pueda enganchar en el evento submit() del formulario y enviar la pestaña actualmente activa al servidor con sus datos de formulario. De esa manera, puede simplemente seleccionar la pestaña adecuada en el lado del servidor cuando realmente genera DOM y JS.

Algo así como ...

$("#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

Con las nuevas versiones de jQuery y jQuery UI, esto será:

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

La opción 'selected' se sustituye por 'activa' ... Por supuesto que todavía tendrá que añadir el campo oculto:

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

Answer 6

Esta solución funcionó para mí: Fuente 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 esto:

añadir a la página:

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

Añadir a la secuencia de comandos:

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