none
Evento SelectedIndexChanged pierdo funcion javascript RRS feed

  • Pregunta

  • Buenos días al hacer click en seleccionar un registro 

    se pierde el paginado y la funcion javascript que le da formato al grid view

    ojala alguien me pueda ayudar saludos

    dejo ejemplo del codigo html

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Gridmamalon2.aspx.vb" Inherits="diseño_interfazes.Gridmamalon2" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     

        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
      
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>



    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
      

    </head>
    <body> 
       
      <form id="no" method="post" runat="server">

          <script type="text/javascript">
              $(document).ready(function fun1() {

                  var table = $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                      dom: 'Bfrtip',
                      dom: 'frtipB',
                      searching: true,
                      scrollX: false,
                      scrollCollapse: true,
                      autoWidth: true,
                      responsive: true,
                      select: true,
                      rowReorder: true,
                      deferRender: true,
                      scroller: true,

                      'aoColumnDefs': [{ 'bSortable': true, 'aTargets': [5] }],
                      'iDisplayLength': 10,
                      buttons: [
                          { extend: 'copy', text: 'Copy to clipboard', className: 'exportExcel', exportOptions: { modifier: { page: 'all' } } },
                          { extend: 'excel', text: 'Export to Excel', className: 'exportExcel', filename: 'Agenda_Excel', exportOptions: { modifier: { page: 'all' } } },
                          { extend: 'csv', text: 'Export to CSV', className: 'exportExcel', filename: 'Agenda_Csv', exportOptions: { modifier: { page: 'all' } } },
                          { extend: 'pdf', text: 'Export to PDF', className: 'exportExcel', filename: 'Agenda_Pdf', orientation: 'landscape', pageSize: 'LEGAL', exportOptions: { modifier: { page: 'all' }, columns: ':visible' } }
                      ]
                  });
              });
    </script>
       

         
    <div class="container">


        <asp:ScriptManager ID="ScriptManager1"  runat="server">
    </asp:ScriptManager>
          <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
              <Triggers>
          <%--<asp:PostBackTrigger   ControlID="GridView1"/>--%>
                  <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="SelectedIndexChanged" />
              </Triggers>
              <ContentTemplate>
                
                  <br />
                  <br />
                  <br />
                  <asp:GridView ID="GridView1"  CssClass="footable" runat="server" AutoGenerateColumns="False" DataKeyNames="id_usuario" DataSourceID="SqlDataSource1">
                      <Columns>
                          <asp:CommandField ButtonType="Button" ShowSelectButton="True">
                          <ControlStyle CssClass="btn btn-primary" />
                          </asp:CommandField>
                          <asp:BoundField DataField="id_usuario" HeaderText="id_usuario" InsertVisible="False" ReadOnly="True" SortExpression="id_usuario" />
                          <asp:BoundField DataField="Nombre" HeaderText="Nombre" SortExpression="Nombre" />
                          <asp:BoundField DataField="A_paterno" HeaderText="A_paterno" SortExpression="A_paterno" />
                          <asp:BoundField DataField="A_materno" HeaderText="A_materno" SortExpression="A_materno" />
                          <asp:BoundField DataField="Departamento" HeaderText="Departamento" SortExpression="Departamento" />
                          <asp:BoundField DataField="usuario" HeaderText="usuario" SortExpression="usuario" />
                          <asp:BoundField DataField="contrasena" HeaderText="contrasena" SortExpression="contrasena" />
                      </Columns>
                  </asp:GridView>
                     <link href="estilos/CrearActividad.css" type="text/css" rel="stylesheet" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:beatectraConnectionString %>" SelectCommand="SELECT * FROM [usuarios]"></asp:SqlDataSource>
     
               
              
              </ContentTemplate>
          </asp:UpdatePanel>
    </div>
     <%--<script type="text/javascript"> //Script para Re-asignación de evento jquery Fecha y Empleado
         $(document).ready(function () {
             fun1();

             Sys.WebForms.PageRequestManager.getInstance().add_endRequest(fun1);
         });
        </script>--%>
    </form>
       
       
       
    </body>
    </html>


    cuando le doy click en seleccionar se pierde el formato y la pagina 

    saludos

    martes, 4 de febrero de 2020 15:23

Respuestas

  • ya lo solucione parcial mente aun no me gusta como quedo pero ya es un avance cambie el script

    por este

       

     <script>
              $(function () {
                  $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                      responsive: true,
                      sPaginationType: "full_numbers",
                      stateSave: true,
                  });


                  var prm = Sys.WebForms.PageRequestManager.getInstance();

                  if (prm != null) {
                      prm.add_endRequest(function (sender, e) {
                          if (sender._postBackSettings.panelsToUpdae != null) {
                              $("#GridView1").DataTable();
                          }
                      });
                  }

                  //$(document).ready(function () {
                  //    var table = $('#GridView1').DataTable();

                  //    $('#GridView1 tbody').on('click', 'tr', function () {
                  //        $(this).toggleClass('selected');
                  //    });
                  //});
              });
    </script>

    ya no pierde el vinculo con javascript, pero lo unico que no me gusta que al darle click al seleccionar hace postback lo que hace que recargue la pagina en cada click

    el update panel lo tengo asi

    <asp:UpdatePanel runat="server" UpdateMode="Conditional">
      <Triggers>

          <asp:PostBackTrigger ControlID="GridView1" />
      </Triggers>
        <ContentTemplate>

    saludos cualquier aporte adicional se lo agradecere saludos 

       

    martes, 4 de febrero de 2020 18:17

Todas las respuestas

  • Te doy la explicación de por qué se pierde:

    En el $(document).ready, que se ejecuta una única vez al cargar la página, usas el selector $('[id*=GridView1]') para buscar la tabla y aplicarle los parámetros.

    Cuando se recarga la tabla, lo haces mediante AJAX. En este momento, se sobreescribe todo el contenido del UpdatePanel, que contiene la tabla entera. Esto implica que se elmina la tabla y se vuelve a agregar a la página. El eliminarla, se pierde todo el javascript que tuviera conectado. Al volverla a agregar, no se le agrega de nuevo el javascript porque la rutina que lo agrega está en el $(document).ready y éste solo se ejecuta una vez al cargar la página, pero no se vuelve a ejecutar cuando recargamos parte de la página.

    Esto explica por qué no te funciona, pero no te dice cómo solucionarlo (y no, no se me ocurre niniguna solución que sea sencilla). Pero en cualquier caso, conocer la causa de un problema es en general el primer paso para encontrar una solución.

    martes, 4 de febrero de 2020 15:32
  • ya lo solucione parcial mente aun no me gusta como quedo pero ya es un avance cambie el script

    por este

       

     <script>
              $(function () {
                  $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                      responsive: true,
                      sPaginationType: "full_numbers",
                      stateSave: true,
                  });


                  var prm = Sys.WebForms.PageRequestManager.getInstance();

                  if (prm != null) {
                      prm.add_endRequest(function (sender, e) {
                          if (sender._postBackSettings.panelsToUpdae != null) {
                              $("#GridView1").DataTable();
                          }
                      });
                  }

                  //$(document).ready(function () {
                  //    var table = $('#GridView1').DataTable();

                  //    $('#GridView1 tbody').on('click', 'tr', function () {
                  //        $(this).toggleClass('selected');
                  //    });
                  //});
              });
    </script>

    ya no pierde el vinculo con javascript, pero lo unico que no me gusta que al darle click al seleccionar hace postback lo que hace que recargue la pagina en cada click

    el update panel lo tengo asi

    <asp:UpdatePanel runat="server" UpdateMode="Conditional">
      <Triggers>

          <asp:PostBackTrigger ControlID="GridView1" />
      </Triggers>
        <ContentTemplate>

    saludos cualquier aporte adicional se lo agradecere saludos 

       

    martes, 4 de febrero de 2020 18:17
  • RETOMANDO EL FORO YA SOLUCIONE EL POSTBACK NO DESAPARECE EL ESTILO SOLO QUE LOS DATOS CARGAN LENTOS 

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Grid6.aspx.vb" Inherits="diseño_interfazes.Grid6" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <br />
                <br />
                <br />
                <div class="container-fluid" style="zoom: 100%">
                <asp:ScriptManager runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
              <br />
                <br />
                <br />
            <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-bordered footable" AutoGenerateColumns="False" DataKeyNames="id_dispositivo" DataSourceID="SqlDataSource1" Width="1032px">
                <Columns>
                    <asp:CommandField ShowSelectButton="True" ButtonType="Button" HeaderText="Seleccionar" >
                    <ControlStyle CssClass="btn btn-primary" />
                    </asp:CommandField>
                    <asp:BoundField DataField="id_dispositivo" HeaderText="id_dispositivo" InsertVisible="False" ReadOnly="True" SortExpression="id_dispositivo" />
                    <asp:BoundField DataField="nombre_dispositivo" HeaderText="nombre_dispositivo" SortExpression="nombre_dispositivo" />
                    <asp:BoundField DataField="no_serie" HeaderText="no_serie" SortExpression="no_serie" />
                    <asp:BoundField DataField="Descripcion" HeaderText="Descripcion" SortExpression="Descripcion" />
                    <asp:BoundField DataField="area_trabajo" HeaderText="area_trabajo" SortExpression="area_trabajo" />
                    <asp:BoundField DataField="Departamento" HeaderText="Departamento" SortExpression="Departamento" />
                    <asp:BoundField DataField="Locacion" HeaderText="Locacion" SortExpression="Locacion" />
                    <asp:BoundField DataField="no_parte" HeaderText="no_parte" SortExpression="no_parte" />
                    <asp:BoundField DataField="Provisto" HeaderText="Provisto" SortExpression="Provisto" />
                    <asp:BoundField DataField="Marca" HeaderText="Marca" SortExpression="Marca" />
                </Columns>
            </asp:GridView>

            <br />
            <br />
       
        </ContentTemplate>
    </asp:UpdatePanel>
                    <link href="estilos/datatable/twiiter.css" rel="stylesheet" />
                    <link href="estilos/datatable/bootstrap4.min.css" rel="stylesheet" />
                               <link href="estilos/CrearActividad.css" rel="stylesheet" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>


      
    <script type="text/javascript">
        $(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        createDataTable();
                    }
                });
            };
     
            createDataTable();
            function createDataTable() {
                $('#<%= GridView1.ClientID %>').prepend($("<thead></thead>").append($('#<%= GridView1.ClientID %>').find("tr:first"))).DataTable({
                    "language": {
                        "sProcessing": "Procesando...",
                        "sLengthMenu": "Mostrar _MENU_ registros",
                        "sZeroRecords": "No se encontraron resultados",
                        "sEmptyTable": "Ningún dato disponible en esta tabla =(",
                        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                        "sInfoPostFix": "",
                        "sSearch": "Buscar:",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst": "Primero",
                            "sLast": "Último",
                            "sNext": "Siguiente",
                            "sPrevious": "Anterior"
                        },
                        "oAria": {
                            "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                        },
                        "buttons": {
                            "copy": "Copiar",
                            "colvis": "Visibilidad"
                        }
                    },

                    responsive: true,
                    sPaginationType: "full_numbers",
                    stateSave: true,
                    "deferRender": true,

                });


              

                $('#GridView1 thead tr').clone(false).appendTo('#GridView1 thead');
                $('#GridView1 thead tr:eq(1) th').removeClass('sorting_asc').removeClass('sorting_dec').removeClass('sorting').removeAttr('sorting').each(function (i) {

                    var title = $(this).text().trim();
                    $(this).html('<input class="form-control" type="text" placeholder="' + title + '" />');
                    var table = $('#GridView1').DataTable();
                    "deferRender"; true,

                        $('input', this).on('keyup change', function () {
                            if (table.column(i).search() !== this.value) {
                                table
                                    .column(i)
                                    .search(this.value)
                                    .draw();


                            }
                        });
                });

                


            }
        });
    </script>


     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:beatectraConnectionString %>" SelectCommand="SELECT * FROM [Dispositivos]"></asp:SqlDataSource>
    </div>
           
            </div>
        </form>
    </body>
    </html>

    miércoles, 26 de febrero de 2020 19:09
  • Me funciono la propuesta, gracias 

    sábado, 13 de febrero de 2021 0:22
  • ya tengo un mejor metodo saludos 
    lunes, 22 de marzo de 2021 18:02