jquery toggle doesn't work fine with link button

Question

y have a <div> tag that show a gridview that contains a LinkButton to show it detail, in the header of the div tag I have a button to toggle the <div, this Works great, I want that when i click on the linkbutton of the gridview, the gridview toggle, with this code, looks like it going to work but it make the effect to toggle but inmediatly and automaticaly show again. this is my asp code

<span class="expande_button expandeSurtido" data-ref="parciales"><i class="fa fa-chevron-circle-up">
  </i>Expandir documentos</span>
  <div id="parciales">
    <asp:GridView ID="uxGridViewPartials" runat="server" AutoGenerateColumns="false" Visible="false" Width="50%" >  
       <Columns>
        <asp:BoundField DataField="documentNumber" HeaderText="Folio" ItemStyle-CssClass="tdCenter" />
        <asp:BoundField DataField="date" HeaderText="Fecha" DataFormatString="{0:d}" ItemStyle-CssClass="tdCenter"/>                                
        <asp:TemplateField HeaderText="Seleccionar">
        <ItemTemplate>
          <div class="app_acciones divCentrar">
           <asp:LinkButton ID="uxLinkButtonSeleccionar" runat="server" Visible="true" 
            CssClass="app_button contrae" data-ref="parciales"
            OnClick="uxLinkButtonSeleccionar_Click"                                            
            CausesValidation="False">Ver
            </asp:LinkButton>                            
         </div>                            
        </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="pkProductDocument"  ItemStyle-CssClass="hide" HeaderStyle-CssClass="hide" />
        </Columns>
        <HeaderStyle CssClass="HeaderStyle" />
        <RowStyle HorizontalAlign="Center" />                            
      </asp:GridView>
   </div>

and this is my js

$('#contenedor').on("click", '.expandeSurtido', function() {
    $(this).children('i').toggleClass('fa-chevron-circle-down', 'fa-chevron-circle-up');
    $idPanel = $(this).attr('data-ref');
    $('#' + $idPanel).toggle("slow");
});

$('#contenedor').on("click", '.contrae', function() {
    $idPanel = $(this).attr('data-ref');
    $('#' + $idPanel).toggle("slow");
});

In mention, as you can see all is contained on a div with class called contenedor

why is it all set up to run at server if that's what you want it for? page is probably refreshing. What does `uxLinkButtonSeleccionar_Click` do? — charlietfl, Sep 29 '16 at 00:03
with `uxLinkButtonSeleccionar_Click` I bring the detail of that row, and show it under this, i debug it but at one point make the toggle action to show the div again — Eddyprici, Sep 29 '16 at 00:18
`protected void uxLinkButtonSeleccionar_Click(object sender, EventArgs e) { GridViewRow grdrow = (GridViewRow)((LinkButton)sender).NamingContainer; int productDocument = Convert.ToInt32(grdrow.Cells[0].Text); int pkProductDocument = Convert.ToInt32(grdrow.Cells[3].Text); tblDatosOrderWarehouse.Visible = true; datosDocumentos.Visible = true; uxDivImprimir.Visible = true; uxTablaNotas.Visible = true; uxLabelProductDocument.Text = productDocument.ToString(); LlenarSurtidosParciales(pkProductDocument); }` — Eddyprici, Sep 29 '16 at 00:24

score 0 · Answer 1 · answered Sep 29 '16 at 00:23

The problem is that "OnClick" handers in ASP.NET web forms are server side functions, which then re-render the page after they are complete.

You're handler is working just fine, but then immediately returns to the server to deal with the click handler, and then re-renders the page (with the toggling reset to it's default state).

You shouldn't be using LinkButton for this (since those are pretty heavily tied to server controls). Just make it an a tag: <a href="#" class="contenedor">Ver</a> and add the handler to that, and it should work fine.

jquery toggle doesn't work fine with link button

1 Answers1