locked
Bootstrap accordion collapsed after postback RRS feed

  • Question

  • User815974156 posted

    I have a bootstrap accordion inside a repeater and when I click on a control inside the body of the accordion that has autopostback to true, it postback correctly but the selected accordion pane is closing

         <asp:UpdatePanel ID="UpdatePanel8" runat="server">
                            <ContentTemplate>
                                <div class="accordion" id="acc<%# Eval("main_product_id") %>">
    
                                    <asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsMainProduct0" OnItemDataBound="Repeater2_ItemDataBound">
                                        <ItemTemplate>
                                            <div class="card">
                                                <div class="card-header" id="h<%# Eval("product_id") %>" aria-expanded="false" data-toggle="collapse" data-target="#c<%# Eval("product_id") %>">
                                                    <asp:HiddenField ID="hfProductId" runat="server" Value='<%# Eval("product_id") %>' />
                                                    <asp:HiddenField ID="hfMainProductId" runat="server" Value='<%# Eval("main_product_id") %>' />
    
                                                    <table style="width: 100%;">
                                                        <tr>
                                                            <td style="width: 70%">
                                                                <asp:Label runat="server" Text='<%# Eval("name") %>' CssClass="linkbutton"></asp:Label>
                                                                <br />
                                                                <asp:Label runat="server" Text='<%# Eval("description") %>' Font-Size="8px" CssClass="linkbutton"></asp:Label>
    
                                                            </td>
                                                            <td style="width: 30%">
    
                                                                <asp:Button ID="btnHeaderSave" runat="server" ForeColor="White" Font-Bold="true" OnClick="btnHeaderSave_Click" BackColor="DarkRed" Font-Size="15px" Width="100px" Height="30px" Text="Button" />
    
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div id="c<%# Eval("product_id") %>" class="collapse" aria-labelledby="h<%# Eval("product_id") %>" data-parent="#acc<%# Eval("main_product_id") %>">
                                                    <div class="card-body">
    
                                                     ...
    
                                                    </div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </div>
                            </ContentTemplate>
                        </asp:UpdatePanel>

    What do I need to do to let the selected pane open after even a postback ?

    I tried to do something with JavaScript code I found online but is not working

       <script type="text/javascript">
        $(function () {
            var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "h128";
    
            //Remove the previous selected Pane.
            $("#accordion .in").removeClass("in");
    
            //Set the selected Pane.
            $("#" + paneName).collapse("show");
    
            //When Pane is clicked, save the ID to the Hidden Field.
            $(".card-header").click(function () {
                $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
            });
        });

    Friday, March 6, 2020 11:16 AM

All replies

  • User-474980206 posted

    because you are using an update panel, the page on load code doesn’t run. Also it not clear you created the hidden field to store the name. Check the update panels docs, and you can attach to the update panel client lifecycle events.

    a better approach is to place the hidden field in the update panel, and have the server render the correct accordion panel open. See the bootstrap doc for doing this.

    Friday, March 6, 2020 3:35 PM
  • User-719153870 posted

    Hi fatih252,

    Postback is not the only cause of your issue, another important reason is that you put the button in <div class="card-header".

    To solve this, you need to change your html design, put the button out of the card-header, like below:

                                        <table style="width: 100%;">
    <tr>
    <td style="width: 70%">
    <div class="card-header" id="h<%# Eval("product_id") %>" aria-expanded="false" data-toggle="collapse" data-target="#c<%# Eval("product_id") %>">
    <asp:Label runat="server" Text='<%# Eval("name") %>' CssClass="linkbutton"></asp:Label>
    <br />
    <asp:Label runat="server" Text='<%# Eval("description") %>' Font-Size="8px" CssClass="linkbutton"></asp:Label>
    </div>
    </td>
    <td style="width: 30%">
    <asp:Button ID="aspbtnHeaderSave" runat="server" ForeColor="White" Font-Bold="true" OnClick="btnHeaderSave_Click" BackColor="DarkRed" Font-Size="15px" Width="100px" Height="30px" Text="aspButton" />
    </td>
    </tr>
    </table>

    To solve the post back issue, i suggest you could change your Asp button to a normal input button which won't post back automatically and then use Ajax to deal with your back code.

    In conclusion, you could refer to below demo for morwe information:

    aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script type="text/javascript">
    function checkid(pname, des) {
    $.ajax({
    type: "POST",
    url: "BootstrapaccordionDemo.aspx/check",
    data: '{name:"' + pname + '",description:"' + des + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) { console.log(response.d)
    },
    failure: function (response) {
    alert(response.d);
    }
    });
    }
    </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <div class="accordion" id="#acc<%# Eval("main_product_id") %>"> <div class="card"> <table style="width: 100%;"> <tr> <td style="width: 70%"> <div class="card-header" id="h<%# Eval("product_id") %>" aria-expanded="false" data-toggle="collapse" data-target="#c<%# Eval("product_id") %>"> <asp:Label runat="server" Text='<%# Eval("name") %>' CssClass="linkbutton"></asp:Label> <br /> <asp:Label runat="server" Text='<%# Eval("description") %>' Font-Size="8px" CssClass="linkbutton"></asp:Label> </div> </td> <td style="width: 30%"> <input type="button" id="btnHeaderSave" onclick='checkid("<%# Eval("name") %>","<%# Eval("description") %>")' style="color: white; font-weight: bold; background-color: DarkRed; font-size: 15px; width: 100px; height: 30px" value="Button" /> </td> </tr> </table> <div id="c<%# Eval("product_id") %>" class="collapse" aria-labelledby="h<%# Eval("product_id") %>" data-parent="#acc<%# Eval("main_product_id") %>"> <div class="card-body"> ... </div> </div> </div> </div> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>

    cs:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    binddata();
                }
            }
    
            private void binddata()
            {
                DataTable dt = new DataTable();
                dt.Clear();
                dt.Columns.Add("main_product_id");
                dt.Columns.Add("product_id");
                dt.Columns.Add("name");
                dt.Columns.Add("description");
                for (int i = 1; i <= 3; i++)
                {
                    DataRow dr = dt.NewRow();
                    dr["main_product_id"] = "main_product_id"+i.ToString();
                    dr["product_id"] = "product_id" + i.ToString();
                    dr["name"] = "name" + i.ToString();
                    dr["description"] = "description" + i.ToString();
                    dt.Rows.Add(dr);
                }
                Repeater1.DataSource = dt;
                Repeater1.DataBind();
            }
    
            [WebMethod]
            public static string check(string name,string description)
            {
                string a = name+"+"+description;
                return a;
            }

    result:

    Best Regard,

    Yang Shen

    Monday, March 9, 2020 5:36 AM