descargar - ¿Mantiene abierto el panel de acordeón de jQuery actual después de la devolución de datos de ASP.NET?

jquery ui npm

Question

Tengo un acordeón jquery en asp.net aspx weppage. Dentro de los paneles, tengo botones asp.net. Cuando hago clic en el botón, el panel en el que estaba, cierra y vuelve a cargar la página, por defecto al primer panel. No me importa volver a cargar, pero ¿hay alguna manera de mantener el panel actual abierto después de la recarga? En este momento, solo estoy llamando a acordeón () en un div con el id de acordeón.

Answer 1

Coloque su botón o vista de cuadrícula que puede tener que hacer clic o actualizarse en un panel de Actualización. Entonces ui acordeón funciona bien 100% + garantía .. Sarath @ f1

Answer 2

Está trabajando de mi lado. Por favor, compruebe ......

$(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);
}
});
});

Answer 3

La solución de MaxCarey parece funcionar bien, pero la última versión de jQuery UI (1.10.4) parece tener algunas diferencias. El evento correcto no se "cambia" ahora, sino que se "activa" (o "antes de Activar", si desea la opción para 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 problema para mí aquí es que puedo verificar que el valor de hidAccordionIndex se está configurando con el valor correcto, pero en la devolución de datos, se vuelve a establecer en 0 sin importar lo que intento. Intenté configurarlo en una cadena vacía, como Dave.Lebr1 sugirió, pero todavía no persiste en la devolución.

Esto debería permanecer disponible en la devolución de datos, ya que mi campo divAccordionIndex debería tener ViewState (he verificado que está habilitado).

¿Alguien más ha tenido éxito con esto? Este menú está en mi página maestra, y funciona muy bien ... además de esto.

Answer 4

Para agregar a la publicación de MaxCarey ...
Una forma más confiable de obtener el nuevo índice de acordeón es

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

Answer 5

Para ampliar las ideas anteriores de HiddenField, pero sin tener que modificar tu JS:

En tu página:

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

En tu 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 requiere pocas modificaciones para funcionar con casi cualquier lenguaje del lado del servidor porque JS no tiene que cambiar, solo el campo oculto.

Answer 6

Puede usar un campo de entrada oculto para persistir en el índice de acordeón activo durante las devoluciones de datos, y luego rellenarlo usando 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>

Probablemente pueda encontrar una forma más eficiente de capturar el índice activo durante el evento de cambio, pero parece que funciona.

Cuando la página se ha cargado, recupera el índice activo del campo oculto y lo almacena en una variable. A continuación, inicializa el acordeón utilizando el índice recuperado y una función personalizada para activar el evento de cambio que escribe un nuevo índice en el campo oculto cada vez que se activa un nuevo panel.

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

Answer 7

Sé que esto es tarde, pero aún puede ayudar a alguien a luchar con esto. La solución aquí es básicamente una combinación de algunos de los conocimientos anteriores. ;-)

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í está 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"));
}
});
});

Answer 8

Tuve el mismo problema que vine aquí. 1. La respuesta de MaxCarey se veía lo suficientemente buena para resolver el problema, pero desafortunadamente no tenía ID para mis acordeones. (Estaba usando una plantilla de terceros, solo usan la clase css). 2. Imran H. Ashraf también fue bueno pero el mismo problema es que no tiene acceso al acordeón por ID.

Mi problema: 1. Tuve un DetailsView en un acordeón con el comando Edit Update Cancel. 2. Cuando hago clic en el botón Editar, funciona, pero mi acordeón se cierra.

Mi solución: 1. Puse un ScriptManager en mi formulario. 2. Puse un UpdatePanel dentro de mi acordeón. 3. Puse mi DetailsView dentro del UpdatePanel. 4. Eso es todo, sin codificación, sin código y funciona bien.

Aquí está el marcado de 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>

Espero que pueda ayudar a alguien.

Gracias Happy Coding

Answer 9

Use la opción "activa" cuando crea 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.

Answer 10

Utilizo esta solución para que funcione en mi proyecto, pero algo no funcionaba.

Primero, el acordeón no mantendrá el índice en la memoria, por lo que el acordeón se reiniciará cada vez.

En segundo lugar, no pude encontrar el campo oculto con ''#<%=hidAccordionIndex.ClientID %>''

Entonces, lo que hago es

1- Establecer el valor predeterminado del campo oculto a nulo

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

2- Obtenga el índice activo con esto

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

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

Hay 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);
}
});

Answer 11

escriba el índice o id del panel de acordeón en el que se presionó el botón utilizando ClientScript.RegisterStartupScript . Supongamos que el usuario hace clic en el botón llamado btnSubmit que está en el panel 3. Entonces funcionará así:

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();
}
});

Answer 12

 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);
}
});

Answer 13

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

Establecer la propiedad de navigation en true retendrá el estado del panel de acordeón.