Stop bootstrap accordion panel collapsing on form submit

Question

I have a form inside a Bootstrap 3 collapsible panel.

The form is an asp.net DetailsView control with EDIT and DELETE buttons.

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.

Why? How do I prevent that?

Here's the markup (note: the accordion is inside an 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>

Paulo Segundo · Answer 1 · 2015-01-20T12:04:14.897

1

The problem is updatepanel always brings the original code, you need to reopen the accordion.

<script type='text/javascript'>
    $(document).ready(function() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
    });

    function endRequestHandler(sender, args)
    {
        $('#collapseTwo').collapse.in()
    }
</script>

edited Jan 20 '15 at 12:04

answered Jan 20 '15 at 10:47

Paulo Segundo

448
3
6

That makes sense, thanks Paulo. However how do I do that on `(document).ready`? – U r s u s Jan 20 '15 at 10:58
You're missing the `)` for the first `function`. Even after adding that, I still have the same problem. – U r s u s Jan 20 '15 at 11:18
The error showing in the browser console is `Uncaught TypeError: undefined is not a function`. – U r s u s Jan 20 '15 at 11:24
Are you using boostrap js too right? Not only the css. – Paulo Segundo Jan 20 '15 at 12:07
I've tried `alert("this should work");` instead of `$('#collapseTwo').collapse.in()` and it works, so it must be jquery not defined or something. – U r s u s Jan 20 '15 at 12:27

score 1 · Answer 2 · answered Jan 20 '15 at 13:21

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>

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

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

edited May 23 '17 at 11:45

Community

1
1

answered Apr 01 '16 at 18:10

dshapiro

376
2
12

Stop bootstrap accordion panel collapsing on form submit

3 Answers3