Jquery script not working as expected in ASP.NET UpdatePanel

Question

I am working on creating a nested gridview. I am using an example from: http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

The problem is the "minus" of the script does not remove the nested gridview. What seems to be happen is the "plus" function seems to trigger again and again.

<script type = "text/javascript">
       $(document).ready(function () {
           $("[src*=plus]").on("click", function () {
               $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
               $(this).attr("src", "images/minus.png");               
           });
           $("[src*=minus]").on("click", function () {
               $(this).attr("src", "images/plus.png");
               $(this).closest("tr").next().remove();
           });

       });

I am using an UpdatePanel (The 2 gridviews are Inside).

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                          <ContentTemplate> 
 <script type="text/javascript">
   Sys.Application.add_load(BindEvents);
     </script>
     <asp:GridView ID="GridView1" runat="server"  Width = "100%" AutoGenerateColumns = "False" Font-Names = "Arial" CssClass="table table-hover table-bordered"
                            Font-Size = "11pt" AlternatingRowStyle-BackColor = "#F18903" HeaderStyle-BackColor = "#F18A07" AllowPaging ="True" 
                            DataKeyNames="Rut" OnPageIndexChanging  = "OnPaging" onrowediting="EditCustomer"  OnRowDataBound="OnRowDataBound" onrowupdating="UpdateCustomer" onrowcancelingedit="CancelEdit" >
                                 <Columns>
                                    <asp:TemplateField>
                                    <ItemTemplate>
                                     <img alt = "" style="cursor: pointer" src="images/plus.png" />
                                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                                        <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
                                    <Columns>
                                         <asp:BoundField ItemStyle-Width="150px" DataField="Nombre" HeaderText="Order Id" />
                                         <asp:BoundField ItemStyle-Width="150px" DataField="Rut" HeaderText="Date" />
                                    </Columns>
                                    </asp:GridView>
                                    </asp:Panel>
                                    </ItemTemplate>
                                    </asp:TemplateField>

                                    <asp:TemplateField  HeaderText = "Nombre" >
                                       <ItemTemplate>
                                        <asp:Label ID="lblNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
                                       </ItemTemplate>     
                                    </asp:TemplateField>

                                   <asp:TemplateField   HeaderText = "Rut">
                                       <ItemTemplate >
                                        <asp:Label ID="lblRut" DataField="Rut" runat="server" Text='<%# Eval("Rut")%>'></asp:Label>
                                       </ItemTemplate>    
                                   </asp:TemplateField>

                                  <asp:TemplateField   HeaderText = "Fecha de Nacimiento">
                                     <ItemTemplate>
                                        <asp:Label ID="lblFecha_Nac" runat="server" Text='<%# Eval("Fecha_Nac")%>'></asp:Label>
                                     </ItemTemplate>
                                     <EditItemTemplate>
                                         <div class='input-group date' id='datetimepicker1'>
                                          <asp:TextBox ID="txtFecha_Nac" runat="server" Text='<%# Eval("Fecha_Nac")%>'></asp:TextBox>
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>                                  
                                         </div> 
                                    </EditItemTemplate> 
                                  </asp:TemplateField>


                                  <asp:TemplateField  HeaderText = "Celular">
                                     <ItemTemplate>
                                        <asp:Label ID="lblCelular" runat="server" Text='<%# Eval("Celular")%>'></asp:Label>
                                     </ItemTemplate>
                                     <EditItemTemplate>
                                        <asp:DropDownList ID="txtCelular" runat="server" >
                                            <asp:ListItem Text="SI" Value="1" />
                                            <asp:ListItem Text="NO" Value="0" />
                                        </asp:DropDownList>
                                    </EditItemTemplate> 
                                  </asp:TemplateField> 

                                    <asp:CommandField  EditText="Editar" ShowEditButton="True" />

                                    <asp:TemplateField HeaderText="Informacion Adicional" >
                                       <ItemTemplate>
                                         <asp:Button ID="Btn1" runat="server" 
                                            Text="Ver Mas" CommandArgument="Button1"
                                            OnClick="Btn1_Click"/>
                                        </ItemTemplate>
                                      </asp:TemplateField>

                                     <asp:TemplateField HeaderText="Cambio Final" >
                                       <ItemTemplate>
                                         <asp:Button ID="BtnCambio" runat="server" 
                                            Text="Check" CommandArgument="Button1"
                                            OnClick="Btn1_ClickCambioFinal"/>
                                        </ItemTemplate>
                                      </asp:TemplateField>

                                     <asp:TemplateField HeaderText="Image">
                                         <EditItemTemplate>
                                             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                         </EditItemTemplate>
                                         <ItemTemplate>
                                             <asp:Image ID="Image1" runat="server" />
                                         </ItemTemplate>
                                     </asp:TemplateField>
                                </Columns>

                                <AlternatingRowStyle BackColor="#FBEDBB"  />
                                 <HeaderStyle BackColor="#F18A07" />
                            </asp:GridView> 

                              </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID = "GridView1" />
                                </Triggers>
                            </asp:UpdatePanel>

When i click plus doesnt hide nad add another row

If you add `console.log` in your jquery on click, does it show? Are your images really named minus and plus? — Gabriel GM, Jun 08 '15 at 19:22
Note that the example in the link uses html img tag and you are using asp:image.. is the html output ok with the asp:image? — Gabriel GM, Jun 08 '15 at 19:24
Everything is ok .. like the example. chrome develper console shows nothing. — funkeeiads, Jun 08 '15 at 19:27
Can you post the html output of your gridview (just 1 line of your gridview is enough)? — Gabriel GM, Jun 08 '15 at 19:59
you're right, sorry I was confused.. I searched for "minus" instead of "plus" in your code! Is your nested GridView visible when page is loaded? — Gabriel GM, Jun 08 '15 at 20:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79989/discussion-between-gabriel-gm-and-funkeeiads). — Gabriel GM, Jun 08 '15 at 20:16

Erik Karlstrand · Answer 1 · 2015-06-08T21:15:15.613

I would assume that you need to re-subscribe to the events. JavaScript is executed top-down which means that after you have subscribed to the event, elements created later will not trigger that event.

Like the following example:

function myEventHandler () {
    // In here you perform your event-specific code
    eventSubscription();
}

var eventSubscription = function () {
    // Make sure to unsubscribe to prevent event to fire multiple times
    $('.myClass').unbind('click');
    // Re-subscribe to event
    $('.myClass').on('click', myEventHandler);
}

// Call the eventSubscription to hook your events
eventSubscription();

Not working.. Now open the gridview twice.( i update the post) — funkeeiads, Jun 08 '15 at 21:48

score 0 · Answer 2 · answered Jun 08 '15 at 21:28

As noMad17 said, you need to re-subscribe to your js methods after a postback, even though you're using an updatePanel. Here is my code:

//js file:
$(document).ready(function () {
   loadConfiguration();
 });

function loadConfiguration()
{
     //add your configuration here
}    
//aspx file
<asp:UpdatePanel runat="server" ID="upnl1" UpdateMode="Conditional" >
        <ContentTemplate> 
            <script type="text/javascript">                                        
               Sys.Application.add_load(loadConfiguration);
            </script>
        <!--More code here...-->
</asp:UpdatePanel>

After postback, UpdatePanel is build and all the content inside it as well, so it will load the js code inside add_load again.

Hope it helps

Not working.. When i click "plus" , it opened twice.. ( i update the answer) — funkeeiads, Jun 08 '15 at 21:47
Ok, Forget about adding Sys.Application.add_load(loadConfiguration); and try to add the specific event for each button on the onClick event like this: — cloud120, Jun 08 '15 at 22:28

score 0 · Accepted Answer · edited May 23 '17 at 11:58

This is an issue with what event is bound when the document is ready.

If you want to "toggle" between two function calls, there are many addon that can help you with that (see this SO question).

An easy way to implement it would be to use jquery one function as mentionned by Tushar Gupta.

function plus() {               
    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
    $(this).attr("src", "images/minus.png");
    $(this).one("click", minus);
}
function minus() {
    $(this).attr("src", "images/plus.png");
    $(this).closest("tr").next().remove();
    $(this).one("click", plus);
}

$(document).ready(function(){
    $("[src*=plus]").one("click", plus);    
    //You might want to change the selector with a class 
    // to your img so you don't have to worry about 
    // opened or closed by default
});

Hope this helps!

Explanations :

The on function bind the event to the DOM element when it is called. In your case, when the document is ready. When the document is loaded, all your table lines are showing the expand image. Therefore, the "plus click" function is bound to all the img tags. On the other hand, there are no element showing the minus sign (yet). So no "minus click" function is bound.

The on function doesn't care if you change your element attributes. Remember that your selector selects the elements, even though you filter through the attribute.

In the link you provided, the author used the live function. This function is now deprecated, but it was basically a on function, that would work on the selector now and in the future. This is not the case anymore with the on function.

How can i re-subscribe this events? I try to update a field from the first grid, and then the code above doesnt work — funkeeiads, Jun 08 '15 at 23:37
When you say you update field from the first grid, you mean through the update panel (round trip to the server)? — Gabriel GM, Jun 09 '15 at 00:53
If the answer is yes, see http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes — Gabriel GM, Jun 09 '15 at 00:54

Jquery script not working as expected in ASP.NET UpdatePanel

3 Answers3