У меня есть jquery аккордеон на asp.net aspx weppage. Внутри панелей у меня есть кнопки asp.net. Когда я нажимаю на кнопку, на панели, в которой я был, закрывает и перезагружает страницу, по умолчанию для первой панели. Я не против перезагрузки, но есть способ сохранить текущую панель открытой после перезагрузки. Прямо сейчас, я просто вызываю аккордеон() на div с id аккордеона.
Сохранять текущую панель аккордеона jQuery после обратной передачи ASP.NET?
Ответ 1
Вы можете использовать скрытое поле ввода, чтобы сохранить активный индекс аккордеона во время postbacks, а затем заполнить его с помощью javascript во время события изменения аккордеона.
<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>
Вероятно, вы могли бы найти более эффективный способ захвата активного индекса во время события изменения, но это, похоже, работает.
Когда страница загружается, он извлекает активный индекс из скрытого поля и сохраняет его в переменной. Затем он инициализирует аккордеон с использованием извлеченного индекса и настраиваемой функции для запуска события изменения, которое записывает новый индекс в скрытое поле всякий раз, когда активируется новая панель.
Во время обратной передачи скрытое значение поля сохраняется в ViewState, так что, когда страница загружается снова, аккордеон инициализируется индексом последней клики, на которую нажата.
Ответ 2
Решение MaxCarey работает хорошо, но последняя версия jQuery UI (1.10.4), похоже, имеет некоторые отличия. Правильное событие теперь не "изменено", а "активировано" (или "beforeActivate", если вы хотите отменить событие).
<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);
}
});
});
Для меня здесь получается, что я могу проверить, что значение hidAccordionIndex установлено на правильное значение, но при обратной передаче оно возвращается к 0 независимо от того, что я пытаюсь. Я попытался установить его на пустую строку, например, предложенную Dave.Lebr1, но она по-прежнему не сохраняется при обратной передаче.
Это должно оставаться доступным для обратной передачи, так как поле divAccordionIndex должно иметь ViewState (я проверял его включение).
Кто-нибудь еще имел успех? Это меню находится на моей главной странице, и оно отлично работает... кроме этого.
Ответ 3
записать индекс или идентификатор панели аккордеона, в котором нажата кнопка с помощью ClientScript.RegisterStartupScript. Предположим, что пользователь нажал кнопку с именем btnSubmit, которая находится в панели 3. Затем она будет работать следующим образом:
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);
}
теперь в javascript:
$(function(){
if(paneIndex)
{
$('.selector').accordion({active: paneIndex});
}
else
{
$('.selector').accordion();
}
});
Ответ 4
Я знаю, что это поздно, но это все равно может помочь кому-то бороться с этим. Решение здесь в основном представляет собой комбинацию некоторых из вышеупомянутой мудрости.; -)
Я использую jquery-ui-1.10.4.custom.min.js и 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>
и вот 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"));
}
});
});
Ответ 5
Чтобы расширить предыдущие идеи HiddenField, но без необходимости управлять вашим JS:
На вашей странице:
<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" ClientIDMode="Static" />
В вашем JS:
$('#yourAccordion').accordion({
heightStyle: "content"
, active: parseInt($('#hidAccordionIndex').val())
, activate: function (e, ui) {
$('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader));
}
});
Ключ ClientIDMode = "Статический". Этот подход не требует больших изменений для работы практически с любым серверным языком, потому что JS не нужно изменять, а только одно скрытое поле.
Ответ 6
Он работает на моей стороне. Пожалуйста, проверьте......
$(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);
}
});
});
Ответ 7
Используйте опцию "active", когда вы создаете аккордеон. Что-то вроде этого:
$('.selector').accordion({ active: 2 });
Это активирует второй вариант в аккордеоне. Вы также можете передать селектор для выбора по id.
Ответ 8
$("#accordion").accordion({
heightStyle: "content",
collapsible: true,
navigation: true
});
Установка свойства navigation на true сохранит состояние панели аккордеона.
Ответ 9
Чтобы добавить к сообщению MaxCarey...
Более надежным способом получения нового аккордеонного индекса является
change: function (event, ui) {
var index = $(this).accordion("option", "active");
$("#<% =hidAccordionIndex.ClientID %>').val(index);
}
Ответ 10
У меня была та же проблема, что и я. 1. Ответ MaxCarey выглядел достаточно хорошо, чтобы решить проблему, но, к сожалению, у меня не было идентификатора для моих аккордеонов. (Я использовал сторонний шаблон, они просто используют класс css). 2. Имран Х. Ашраф также был хорошим, но с той же проблемой не было доступа к аккордеонам по ID.
Моя проблема: 1. У меня был DetailsView в аккордеоне с командой Edit Update Cancel. 2. Когда я нажимаю кнопку "Изменить", она работает, но мой аккордеон закрывается.
Мое решение: 1. Я поместил один скриптовый менеджер в свою форму. 2. Я помещаю в свой аккордеон один UpdatePanel. 3. Я поместил свой DetailsView внутри UpdatePanel. 4. Что это, никакого кодирования, никакого кода, и он отлично работает.
Вот разметка 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>
Надеюсь, что это может помочь кому-то.
Спасибо Счастливое кодирование
Ответ 11
Я использую это решение, чтобы оно работало над моим проектом, но что-то не работало.
Во-первых, аккордеон не будет хранить индекс в памяти, поэтому аккордеон будет повторно инициализировать каждый раз.
Во-вторых, мне не удалось найти скрытое поле с '#<%=hidAccordionIndex.ClientID %>'
Итак, что я делаю, это
1- Установите значение по умолчанию для скрытого поля в значение null
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="" />
2- Получить активный индекс с помощью этого
Убедитесь, что parseInt, иначе он не будет работать
var activeIndex = parseInt($('input[id$=hidAccordionIndex]').val());
Есть мой код 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);
}
});
Ответ 12
Поместите свою кнопку или сетку, которая может быть нажата или обновлена на панели "Обновление". Тогда ui аккордеон будет работать штраф 100% + гарантия.. Sarath @f1
Ответ 13
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);
}
});