[英]Stop bootstrap accordion panel collapsing on form submit
I have a form inside a Bootstrap 3 collapsible panel. 我在Bootstrap 3可折叠面板中有一个表单。
The form is an asp.net DetailsView
control with EDIT and DELETE buttons. 该表单是一个带有EDIT和DELETE按钮的asp.net
DetailsView
控件。
When I click on EDIT the panel collapses and I need to click on it again to reopen it and finish editing. 当我单击“编辑”时,面板会折叠,我需要再次单击它以重新打开它并完成编辑。
The EDIT button click event causes the panel to close. EDIT按钮的单击事件导致面板关闭。
Why? 为什么? How do I prevent that?
我该如何预防?
Here's the markup (note: the accordion is inside an UpdatePanel
): 这是标记(请注意:手风琴位于
UpdatePanel
):
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Associated Person Details
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<asp:DynamicValidator runat="server" ID="DynamicValidator5" ControlToValidate="dvPartnerDetails" Display="None" EnableClientScript="true" />
<h4>Partner details:</h4>
<asp:DetailsView ID="dvPartnerDetails" runat="server" CssClass="detailstable" FieldHeaderStyle-CssClass="bold" AutoGenerateRows="false" DefaultMode="ReadOnly" EnableModelValidation="true" OnDataBound="dvPartnerDetails_DataBound" DataSourceID="dsPartnerDetails" DataKeyNames="PersonID">
<Fields>
<asp:DynamicField DataField="PartnerTitle" />
<asp:DynamicField DataField="PartnerForenames" />
<asp:DynamicField DataField="PartnerInitials" />
<asp:DynamicField DataField="PartnerSurname" />
<asp:DynamicField DataField="PartnerAddressee" />
<asp:DynamicField DataField="PartnerSalutation" />
</Fields>
<FieldHeaderStyle CssClass="bold" />
<FooterTemplate>
<div class="bottomhyperlink">
<asp:LinkButton ID="EditHyperLink" CausesValidation="false" CssClass="btn btn-default" runat="server" CommandName="Edit">Edit</asp:LinkButton>
<asp:LinkButton ID="DeleteButton" runat="server" CssClass="btn btn-default" CausesValidation="false" CommandName="Delete" OnClientClick='return confirm("Are you sure you want to delete this record?");' Text="Delete" />
</div>
</FooterTemplate>
</asp:DetailsView>
</div>
</div>
</div>
The problem is updatepanel always brings the original code, you need to reopen the accordion. 问题是updatepanel总是带来原始代码,您需要重新打开手风琴。
<script type='text/javascript'>
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
});
function endRequestHandler(sender, args)
{
$('#collapseTwo').collapse.in()
}
</script>
This may be helpful to someone else. 这可能对其他人有帮助。
The proper way of achieving the desired effect is as follows: 实现所需效果的正确方法如下:
<script type='text/javascript'>
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
});
function endRequestHandler(sender, args)
{
$('#collapseTwo').addClass('in');
}
</script>
This solution works, but I needed a more flexible solution that didn't assume which accordion was open. 该解决方案有效,但是我需要一个更灵活的解决方案,该解决方案不假定打开了哪个手风琴。 See my solution posted in another question:
请参阅我在另一个问题中发布的解决方案:
https://stackoverflow.com/a/36363024/4047526 https://stackoverflow.com/a/36363024/4047526
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.