Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/07/2019, 18:48
Avatar de laureano59
laureano59
 
Fecha de Ingreso: febrero-2005
Mensajes: 395
Antigüedad: 19 años, 2 meses
Puntos: 1
Exclamación Asociar evento a filas cargadas dinamicamente

Cordial Saludo a todos los colaboradores de este Foro.

Espero me pueda hacer entender en este caso, voy a explicar un poco lo que tengo, y a partir de ahí lo que necesito hacer funcionar:
Tengo una tabla muy bien elaborada, y con algunas funciones de jquery se manejan la paginación, las búsquedas, etc.
La tabla funciona de maravilla si la cargo manualmente desde el html
Ahora lo que necesito es cargar en el tbody las filas de la tabla de forma dinámica:
Las cargo desde un JSON que viene de PHP, hasta ahí todo funciona y no tengo problema.
El problema surge en la paginación y en las búsquedas, pues al parecer el jquery no se da cuenta de que se cargaron nuevas filas y asume como si no tuviera ninguna, aunque se muestran en pantalla y todo parece normal, al ver la paginación o al intentar hacer una búsqueda la tabla se pone en blanco sin ninguna fila.

Voy a poner la parte del html y la parte dónde cargo las filas dinámicamente para ver si es que debo asociar algún evento que le informe a jquery de las nuevas filas.
HTML de la tabla:

Código HTML:
Ver original
  1. <tableid="dynamic-table"class="tabletable-stripedtable-borderedtable-hover">
  2. <tr>
  3.  <thclass="center">
  4.  <labelclass="pos-rel">
  5.  <inputtype="checkbox"class="ace"/>
  6.  <spanclass="lbl"></span>
  7.  </label>
  8.  </th>
  9.  <th>Nombre</th>
  10.  <th>
  11.  <iclass="ace-iconfafa-calendar-obigger-110hidden-480"></i>
  12.  Fecha
  13.  </th>
  14.  <th>
  15.  <iclass="ace-iconfafa-clock-obigger-110hidden-480"></i>
  16.  Hora
  17.  </th>
  18.  <th>Ministerio</th>
  19.  <th>Ciudad</th>
  20.  <th>Sede</th>
  21. </tr>
  22. <tbodyid="display_tabla">

Y este es el jquery: Es una función que llamo al dar click en un botón que envía datos de un formulario:

TENGAN EN CUENTA que lo que traigo de php funciona y los datos los carga sin porblema para que no se pongan a mirar cosas del ajax y del json...


Código Javascript:
Ver original
  1. document.getElementById('cargargrillas').onclick = function(){
  2.     var sede,ministerios,fecha,reporte,datos;
  3.     sede = document.getElementById('sede').value;
  4.     ministerios = $("#form-field-select-3").val();
  5.     fecha= document.getElementById('id-date-range-picker-1').value;
  6.     reporte= document.getElementById('tiporeporte').value;
  7.     datos = {"sede": sede,"ministerios": ministerios,"fecha": fecha,"reporte": reporte};
  8. __ajax("?view=grillasasistencia", datos)
  9. .done( function( info ){
  10. var validar = JSON.parse( info );
  11. if(validar != ''){
  12. document.getElementById('mostrar_tabla').style.display = 'block';
  13. document.getElementById('tipo_reporte').innerHTML = 'Reporte de Asistencia';
  14. var html ='';
  15. for(item in validar){
  16. html +=
  17. '<tr>' +
  18. '<td class="center">' +
  19. '<label class="pos-rel">' +
  20. '<input type="checkbox" class="ace" />' +
  21. '<span class="lbl"></span>' +
  22. '</label>' +
  23. '</td>' +
  24. '<td>'+ validar[item].nombre_mie + ' ' + validar[item].apellido_mie +'</td>' +
  25. '<td>'+ validar[item].fecha_asi +'</td>' +
  26. '<td>'+ validar[item].hora_entrada_asi +'</td>' +
  27. '<td>'+ validar[item].ministerio +'</td>' +
  28. '<td>'+ validar[item].ciudad +'</td>' +
  29. '<td>'+ validar[item].sede +'</td>' +
  30. '</tr>';
  31. }
  32. document.getElementById('display_tabla').innerHTML = html;
  33.                 }
  34. });
__________________
http://www.weblaum.com
Laureano Melo Medina
:arriba: