Mantener el actual jQuery accordion panel abierto después de ASP.NET devolución?

Usted podría utilizar un oculto campo de entrada para conservar el activo acordeón índice durante las devoluciones de datos y, a continuación, rellenar el uso de javascript durante el evento de cambio del acordeón.

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

<script language="javascript" type="text/javascript">
    $(function(){
        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());

        $("#accordion").accordion({
            autoHeight:false,
            event:"mousedown",
            active:activeIndex,
            change:function(event, ui)
            {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });
    });
</script>

Que probablemente podría venir para arriba con una manera más eficiente de capturar el índice activo durante el evento de cambio, pero esto parece funcionar.

Cuando se haya cargado la página, se recupera el índice activo desde el campo oculto y lo almacena en una variable. Luego se inicializa el acordeón utilizando la lista de índice y una función personalizada para el fuego en el evento de cambio que escribe un nuevo índice para el campo oculto cada vez que un nuevo panel está activado.

Durante una devolución de datos, el campo oculto valor se conserva en el ViewState de modo que cuando la página se carga de nuevo el acordeón es inicializado con el índice del último panel se hace clic sobre.

MaxCarey la solución que parece funcionar bien, pero la última versión de jQuery interfaz de usuario (1.10.4) parece haber algunas diferencias. El evento correcto no es «cambiado» ahora, pero «activar» (o «beforeActivate», si desea que la opción de cancelar el evento).

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

$(document).ready(function () {
    var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val());

    $("#accordion").accordion({
        heightStyle: "content",
        active: activeIndex,
        activate: function (event, ui) {
            var index = $(this).children('h3').index(ui.newHeader);
            $("#<%=hidAccordionIndex.ClientID %>").val(index);
        }
    });
});

El gotcha para mí, es que yo pueda comprobar que el hidAccordionIndex valor se establece en el valor correcto, pero en la devolución de datos, se establece a 0 no importa lo que yo trato. He tratado de ajuste a una cadena vacía, como Dave.Lebr1 sugerido, pero todavía no es persistente en la devolución de datos.

Este debe estar disponible en la devolución de datos, ya que mi divAccordionIndex campo debe tener ViewState (he comprobado que está habilitado).

Ha nadie tenido éxito con esto? Este menú está en mi página principal, y funciona muy bien…aparte de este.

escribir índice o la identificación de acordeón panel en el que se pulsó el botón utilizando ClientScript.RegisterStartupScript. Supongamos usuario hace clic en el botón denominado btnSubmit que está en el panel 3. Entonces como esto:

protected void btnSubmitClick(object sender, EventArgs e)
{
    //process button click

    //class this function at end:
    SetAccordionPane(3);
}

//you can call this function every time you need to set specific pane to open
//positon
private void SetAccordionPane(int idx)
{
    var s="<script type=\"text/javascript\">var paneIndex = "
      + idx +"</script">; 
    ClientScript.RegisterStartupScript(typeof(<YourPageClass>, s);
}

ahora en javascript:

$(function(){

    if(paneIndex)
    {
        $('.selector').accordion({active: paneIndex});
    }
    else
    {
        $('.selector').accordion();
    }
});

Sé que es tarde, pero todavía se puede ayudar a alguien que esté luchando con esto. La solución aquí es básicamente una combinación de algunos de los anteriores sabiduría. 😉

Estoy usando jquery-ui-1.10.4.custom.min.js
y jquery-1.6.3.min.js.

 <%--the hidden field saves the active tab during a postback--%>
        <asp:HiddenField ID="hdLastActive" runat="server" Value="0" />
    </div>
</form>

y aquí es el javaScript:

<script type="text/javascript">
$(document).ready(function () {
    //get the last active tab index -or 0 on initial pagee load- to activate the tab
    var activeTab = parseInt($("[id$='hdLastActive']").val());

    //initialize the accordion to the activeTab and set the activate event to save the last active tab index.
    $("#accordion").accordion({
        active: activeTab,
        activate: function (e) {
            //save the active tab index in the hidden field
            $("[id$='hdLastActive']").val($(this).accordion("option", "active"));                
        }
    });
});

De expansión en el anterior HiddenField ideas, pero sin tener que destrozar tu JS:

En su página:

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" ClientIDMode="Static" />

En su JS:

$('#yourAccordion').accordion({
    heightStyle: "content"
    , active: parseInt($('#hidAccordionIndex').val())
    , activate: function (e, ui) {
        $('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader));
    }
});

La clave es ClientIDMode=»Static». Este enfoque es llevar a los pequeños de la modificación a trabajar con casi cualquier lenguaje en el servidor debido a que el JS no tiene que cambiar, sólo un campo oculto.

Es el trabajo de mi lado por Favor consulte……

$(document).ready(function () {
    var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
    alert(activeIndex);
    $("#accordion").accordion({            
        active: activeIndex,
        beforeActivate: function (event, ui) {                
            var index = $(this).children('h3').index(ui.newHeader);
            $('#<%=hidAccordionIndex.ClientID %>').val(index);                
        }            
    });        
});

Poner el botón o gridview que puede tiene que hacer clic o actualizado en un panel de Actualización. Luego de interfaz de usuario acordeón le funciona bien al 100% + garantía.. [email protected]

Usar la opción «activo» al crear el acordeón. Algo como esto:

$('.selector').accordion({ active: 2 });

Esto activará la segunda opción en el acordeón. También puede pasar un selector para seleccionar por id.

$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    navigation: true
});

Configuración de la navigation propiedad true conservará el estado del panel acordeón.

Para agregar a MaxCarey del post…

Una manera más confiable para obtener el nuevo acordeón índice es

change: function (event, ui) {
    var index = $(this).accordion("option", "active");
    $("#<% =hidAccordionIndex.ClientID %>').val(index);
}

Yo tenía el mismo problema que vine aquí.
1. MaxCarey respuesta fue buena pinta lo suficiente para resolver el problema, pero por desgracia no tuve la ID de mi acordeones. (Yo estaba usando una tercera parte de la plantilla, que acaba de usar css de la clase).
2. Imran H. Ashraf también era bueno, pero con el mismo problema de no tener acceso al acordeón por ID.

Mi Problema:
1. Yo tenía un DetailsView en un acordeón con la Edición de Actualización de Cancelar el comando.
2. Cuando hago clic en el botón Editar que funciona, pero mi acordeón cerrado.

Mi Solución:
1. He puesto una ScriptManager en mi formulario.
2. Puse un UpdatePanel dentro de mi acordeón.
3. Puse mi DetailsView dentro del UpdatePanel.
4. Eso es, sin códigos, sin el código y funciona bien.

Aquí es el lenguaje de marcado html:

<div class="accordion-wrapper first-child">
<a href="javascript:void(0)" class="accordion-title orange"><span>Personal Information</span></a>
<div class="accordion" style="display: none;">
    <div class="iqb-field-area">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DetailsView ID="dvPersonalInfo" runat="server" Height="50px" Width="100%" AutoGenerateRows="False"
                    DataSourceID="dsPersonalInfo">
                    <Fields>
                        <asp:BoundField DataField="PTCP_FullName" HeaderText="Full Name" ReadOnly="True"
                            SortExpression="PTCP_FullName" />
                        <asp:BoundField DataField="PTCP_ContactNumber" HeaderText="Contact Number" SortExpression="PTCP_ContactNumber" />
                        <asp:BoundField DataField="PTCP_email" HeaderText="e-mail" SortExpression="PTCP_email" />
                        <asp:BoundField DataField="PTCP_PhysicalAddress" HeaderText="Physical Address" SortExpression="PTCP_PhysicalAddress" />
                        <asp:CommandField ShowEditButton="True">
                            <ControlStyle CssClass="right button" />
                        </asp:CommandField>
                    </Fields>
                </asp:DetailsView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

La esperanza de que podría ayudar a alguien.

Gracias
Feliz Codificación

Yo use esta solución para hacer que funcione en mi proyecto, pero algo no estaba funcionando.

Primero, el acordeón no mantener el índice en la memoria para que el acordeón se reinicializar cada momento.

En segundo lugar, yo era incapaz de encontrar el campo oculto con el '#<%=hidAccordionIndex.ClientID %>'

Así, yo lo que hago es

1 – Establecer el Campo Oculto valor predeterminado es null

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

2 – Obtener el índice activo con este

Asegúrese de parseInt, de lo contrario no funcionará

 var activeIndex = parseInt($('input[id$=hidAccordionIndex]').val());

No es mi código javascript :

  $("#accordion").accordion
({
        autoHeight:false,
        event: "mousedown",
        active: activeIndex,
        collapsible: true,
        change: function (event, ui) 
        {
            var index = $(this).accordion("option", "active");
            $('input[id$=hidAccordionIndex]').val(index);
        }
});

        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());       

        $("#accordion,#inneraccordian").accordion({
            heightStyle: "content",
            collapsible: true,
            navigation: true,
            active: activeIndex,
            beforeActivate: function (event, ui) {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });