引导手风琴关闭里面的UpdatePanel buttonclick [英] bootstrap accordion closes on buttonclick inside updatepanel
问题描述
我有一个页面，我试图让用户可以添加/编辑了大量的信息，而一吨滚动一个引导的 3.X 手风琴（崩溃）。有些信息是依赖于其他地区，所以我已经手风琴其中一个选项卡中有一个UpdatePanel。无论是updatpanel不能正常做它的事，或者只是不以其他方式手风琴发挥不错。
I have a bootstrap 3.x accordion(collapse) on a page where I'm trying to get users to be able to add/edit a lot of information without a ton of scrolling. Some of this information is dependant on the rest so I've got an UpdatePanel within one of the accordion tabs. Either the updatpanel isn't doing its thing properly or it just doesn't play nice with the accordion in some other way.
下面是基本的手风琴code：
Here's the basic accordion code:
<div class="panel-group" id="ccAccordion" role="tablist" aria-multiselectable="true">
<asp:Panel ID="pnlAddress" runat="server" class="panel panel-default">
<div class="panel-heading" role="tab" id="billAddressHeading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#ccAccordion" href="#billToAddressTab" aria-expanded="false" aria-controls="billToAddressTab">
<asp:Literal ID="BillToAddressLabelTxt" runat="server" Text="Bill Address" />
</a>
</h4>
</div>
<div id="billToAddressTab" class="panel-collapse collapse" role="tabpanel" aria-labelledby="billAddressHeading">
<div class="panel-body">
<!-- Other controls -->
</div>
</div>
</asp:Panel>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="thirdPartyHeading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#ccAccordion" href="#thirdPartyTab" aria-expanded="false" aria-controls="thirdPartyTab">
<asp:Literal ID="ThirdPartyShippingLabelTxt" runat="server" Text="Shipping Accounts" />
</a>
</h4>
</div>
<div id="thirdPartyTab" class="panel-collapse collapse" role="tabpanel" aria-labelledby="thirdPartyHeading">
<div class="panel-body">
<asp:UpdatePanel runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddShipAccount" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnSaveSABA" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnAddShipAccountNo" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnAddShipAccount" runat="server" CssClass="btn btn-success" Text="Add New Shipping Account"
OnClick="btnAddShipAccount_Click" /><!-- moved from inside panel -->
<asp:Panel ID="pnlBranchShipping" runat="server" DefaultButton="btnSaveSABA">
<div class="panel panel-default">
<div class="controls">
<div class="form-group">
<!-- Other controls -->
</div>
<asp:panel ID="pnlAddEditAcct" CssClass="controls" runat="server" Visible="false">
<!-- Other controls -->
<div>
<asp:LinkButton ID="btnSaveSABA" Text="Save" runat="server" ValidationGroup="vgSAB" OnClick="btnSaveSABA_Click"
CssClass="btn btn-default" />
</div>
<div class="form-group">
<asp:Button ID="btnAddShipAccountNo" runat="server" CssClass="btn btn-default" Text="Add Shipping Account" OnClick="btnAddShipAccountNo_Click"
ValidationGroup="vgShipAccount" />
</div>
</asp:panel>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="vatHeading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#ccAccordion" href="#vatTab" aria-expanded="false" aria-controls="vatTab">
<asp:Literal ID="VatNumberLabelTxt" runat="server" Text="Tax Ids" />
</a>
</h4>
</div>
<div id="vatTab" class="panel-collapse collapse" role="tabpanel" aria-labelledby="vatHeading">
<div class="panel-body">
<asp:Panel ID="pnlTaxId" runat="server" class="form-group" DefaultButton="btnAddTaxId">
<!-- Other controls -->
</asp:Panel>
</div>
</div>
</div>
</div>
会发生什么，当你点击任何按钮，里面是它基本上刷新整个页面和手风琴回到原来的状态，但是当你打开按钮并（显示附加字段，例如）的事情都可见再次标签。
What happens when you click any of the buttons inside is it basically refreshes the whole page and the accordion goes back to its original state, but the the things the button did (showing additional fields, for example) are visible when you open up the tab again.
更新
我今天意识到上述code的整个位为另一个的UpdatePanel这是在母版中。这有UpdatePanel的所有默认设置，所以在我的code以上的回传被触发父。我猜来解决这个问题，我将不得不改变整个表格的运作方式。
I realized today that the whole bit of code above is within another UpdatePanel which is in the MasterPage. This UpdatePanel has all the default settings, so the postback in my code above was triggering the parent. I'm guessing to get around this I'm going to have to change the way the whole form operates.
推荐答案
其实，我结束了使用在这个答案的解决方案： HTTP： //stackoverflow.com/a/25258290/727857
I actually ended up using the solution in THIS answer: http://stackoverflow.com/a/25258290/727857
再次，这是对于引导的3.xx 并需要jQuery的-cookie.js从的 https://github.com/carhartl/jquery-cookie
Again this is for Bootstrap 3.x.x and requires jquery-cookie.js from https://github.com/carhartl/jquery-cookie
编辑可添加上述情况下，链接死亡的回答全文如下：
Edited to add the full text of the answer above in case the link dies:
样本HTML手风琴：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
Item #1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
Item #2 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible
Group Item #3 </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
</div>
使用Javascript（jQuery的）以保留这个手风琴选项卡的状态：
Javascript (jquery) to retain the state of the tabs in this accordion:
$(document).ready(function () {
//when a group is shown, save it as the active accordion group
$("#accordion").on('shown.bs.collapse', function () {
var active = $("#accordion .in").attr('id');
$.cookie('activeAccordionGroup', active);
// alert(active);
});
$("#accordion").on('hidden.bs.collapse', function () {
$.removeCookie('activeAccordionGroup');
});
var last = $.cookie('activeAccordionGroup');
if (last != null) {
//remove default collapse settings
$("#accordion .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + last).addClass("in");
}
});
我不知道dshapiro的回答是否会工作或更好，但这种情况较少JavaScript和可以很容易地制作成一个函数，它是在不同的页面重复的。
I don't know whether dshapiro's answer will work or is better, but this is less javascript and could easily be made into a function which is repeatable on different pages.
这篇关于引导手风琴关闭里面的UpdatePanel buttonclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
