asp.net jquery accordion inside updatepanel

Question

So, i'm trying use a Menu Accordion (jQuery) inside update panel with gridview:

i created a new aspx page that inherits from that master page, and inside head content i put the code that call the Accordion. when i'm trying to add item to gridview, the item will insert to the gridview however the accordion cames all opened. View code below.

this part is where i put the accordion

 <script type="text/javascript">
    $(function () {
        // Accordion
        $("#accEnrollment").accordion({ autoHeight: false, header: "h3", active: 0 });
        });

    });    
</script>

        `<div id="accEnrollment" runat="server">
            <%=FU() %>
        </div>`

<asp:UpdatePanel ID="UpdatePanel" runat="server">
    <ContentTemplate>          
        <asp:Panel ID="pnlMembershipEnrollment" runat="server">

            <table cellpadding="0" cellspacing="0" class="form">
                <tr>
                    <td>
                        <asp:GridView ID="grdMembershipEnrollment" runat="server" AutoGenerateColumns="False"
                            CellPadding="4" GridLines="None" Width="100%" AllowPaging="True" PageSize="4"
                            AllowSorting="True" ForeColor="#333333" ShowHeaderWhenEmpty="True" OnRowCommand="grdMembershipEnrollment_RowCommand"
                            OnRowDataBound="grdMembershipEnrollment_RowDataBound">
                            <RowStyle BackColor="#EFF3FB" CssClass="grid-content" />
                            <Columns>
                                <asp:BoundField HeaderText="Rank Classification/ Category" ItemStyle-Width="110px"
                                    DataField="col0">
                                    <HeaderStyle Wrap="True" />
                                    <ItemStyle Width="110px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField HeaderText="Employee Count" ItemStyle-Width="55px" DataField="col1">
                                    <HeaderStyle Wrap="True" />
                                    <ItemStyle Width="55px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField HeaderText="Plan Type (Room & Board Type/Limit)" ItemStyle-Width="120px"
                                    DataField="col2" HtmlEncode="false">
                                    <HeaderStyle Wrap="True" />
                                    <ItemStyle Width="120px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField HeaderText="Annual Check Up (ACU)" ItemStyle-Width="120px" DataField="col3"
                                    HtmlEncode="false">
                                    <HeaderStyle Wrap="True" />
                                    <ItemStyle Width="120px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField HeaderText="Member Benefit Limit" ItemStyle-Width="100px" DataField="col4">
                                    <HeaderStyle Wrap="True" />
                                    <ItemStyle Width="100px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                    <HeaderTemplate>
                                        <asp:LinkButton ID="btnAddMember" runat="server" CssClass="button2" CommandName="EnrollMember">ENROLL MEMBER</asp:LinkButton>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        &nbsp;&nbsp;&nbsp;
                                        <asp:LinkButton ID="lnkEdit" runat="server">EDIT</asp:LinkButton>
                                        &nbsp;|&nbsp;
                                        <asp:LinkButton ID="LinkButton2" runat="server">DELETE</asp:LinkButton>
                                        &nbsp;&nbsp;
                                        <br />
                                        <asp:LinkButton ID="lnkAddDependents" runat="server"> ADD DEPENDENTS</asp:LinkButton>
                                    </ItemTemplate>
                                    <HeaderStyle Wrap="False" />
                                    <ItemStyle Wrap="False" />
                                </asp:TemplateField>
                            </Columns>
                            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" CssClass="grid-pagerstyle" />
                            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                            <HeaderStyle BackColor="#507CD1" CssClass="white-head" Font-Bold="True" ForeColor="White" />
                            <EditRowStyle BackColor="#2461BF" />
                            <AlternatingRowStyle BackColor="White" />
                        </asp:GridView>
                    </td>
                </tr>
        </table>
        </asp:Panel>
        <div id="accEnrollment" runat="server">
            <%=FU() %>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

can you update the question with the jquery code that you have used in head section? — Ravimallya, Dec 05 '13 at 07:14

score 1 · Accepted Answer · edited May 23 '17 at 10:28

Please use following script to get the jquery worked inside updatepanel after partial postback

function pageLoad(sender, args) {
    $(function () {
        // Accordion
        $("#accEnrollment").accordion({ 
            autoHeight: false,
            header: "h3", 
            active: 0 
        });
    }); 
}

You need to bind any jquery code inside function pageLoad(sender, args) { // code here } method in client side to get the script which used inside updatepanel.

You can use the following code too... You have to bind jquery code inside function BindControlEvents() { //your code here } .

  $(function () {
    //Initial bind
    $(document).ready(function () {
      BindControlEvents();
      //Re-bind for callbacks
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_endRequest(function () {
        BindControlEvents();
      });

      function BindControlEvents() {
        $("#accEnrollment").accordion({ 
                autoHeight: false,
                header: "h3", 
                active: 0 
            });
      }
    });
  });

Finally, I suggest you to read this thread:

hi @Ravimallya thank you for your reply. i'm new to this jquery, can you tell me where should i past this code? — user3068888, Dec 05 '13 at 08:49
Replace it including the second code you posted? BindcontroEvents? — user3068888, Dec 05 '13 at 08:56
you can use any one. try to use first one first. that should fix. — Ravimallya, Dec 05 '13 at 09:03

asp.net jquery accordion inside updatepanel

1 Answers1