0

Mi problema es el siguente.

Tengo un div#resultado, el cual contiene una tabla la cual se llena con datos que consumo de un WebService. En dicha tabla hay un botón por cada fila que activa un modal para modificar los valores de la fila.

<button type="button" class="btn" name="btn_Mcontactos" id="btn_Mcontactos" value="{{contactoId}}">
    <img src="public/img/carpeta.png" alt="Ver" style="height:25px; width:25px;" />
</button>

Cuando yo inserto un nuevo valor en la tabla, lo que hago es que actualizo el contenido de div#resultado (creo la tabla nuevamente via AJAX). El problema es que cuando doy click en el botón de la tabla no pasa nada, me imagino que no se activa el script que muestra el modal.

¿Hay alguna manera de reiniciar los scripts sin recargar la página?

Código: mostrar y llenar modal del contacto a editar

  $("button[name='btn_Mcontactos']").click(function(){
         var valor = $(this).val();
         var txtcontactoId = $("<input type='text' name='txtajax_contactoid' class='loader' />").val(valor);
         var valor2 = $('#txt_Contactos_ProveedorId').val();
         var txtproveedorid = $("<input type='text' name='txtajax_proveedorid' class='loader' />").val(valor2);
         var valor3 = $('#txt_Contactos_ProveedorNombre').val();
         var txtproveedornombre = $("<input type='text' name='txtajax_proveedornombre' class='loader' />").val(valor3);

              $('#frm_ContactosLista').append(txtcontactoId);
              $('#frm_ContactosLista').append(txtproveedorid);
              $('#frm_ContactosLista').append(txtproveedornombre);

              var url = "./webservice/llenarcontactos.php";

              $.ajax({
                  type:"POST",
                  url: url,
                  data: $("#frm_ContactosLista").serialize(),
                  success: function(data){
                      $("#Mcontenido1").html(data);
                      $("#Modal_MContactos").modal();

                  }
              });

              return false;
          });

Tabla con el botón introducir la descripción de la imagen aquí

Modal para modificar

introducir la descripción de la imagen aquí

3
  • El problema es que cuando doy click en el botón de la tabla no pasa nada, me imagino que no se activa el script que muestra el modal. = ¿estás seguro que la nueva fila tiene el código que llama la función del modal? Commented el 13 jul. 2017 a las 15:53
  • @MauricioAriasOlave el error es que añade los listeners a los botones de cada fila en cuando renderiza la tabla por primera vez, sin embargo, cuando vuelve a llenar la tabla por AJAX, los botones que tenían los listeners para el evento fueron eliminados, por ende, los nuevos no tienen ningún listener asociado.
    – gugadev
    Commented el 13 jul. 2017 a las 15:57
  • y como agrego dicho listener . se puede ?
    – Aleman
    Commented el 13 jul. 2017 a las 16:06

1 respuesta 1

1

cambia el ámbito de tu botón de este:

$("button[name='btn_Mcontactos']").click(function(){

a este:

$("button[name='btn_Mcontactos']").unbind('click');
$(document).on("click","button[name='btn_Mcontactos']", function (event, xhr, settings) {

normalmente lo que sucede es que al modificar el DOM ya no es accesible por el map de elementos de jquery, pero jquery tiene esta otro método de script para manejar contenido dinámico. saludos me avisas si te funciona.

También recuerda limpiar el cache de la pagina, ya que los js aveces no se actualizan ..

9
  • Así se haga en vanilla JS no es posible que el botón responda al evento, por la sencilla razón que cuando añades un listener los añades para los elementos que tienes disponibles en el DOM.
    – gugadev
    Commented el 13 jul. 2017 a las 15:55
  • Buenos Dias Francisco Nuñez Agregue las lineas de codigo y la funcion quedo de la siguente manera
    – Aleman
    Commented el 13 jul. 2017 a las 16:08
  • Buenos dias Francisco Agregue Las lineas de codigo pero la consola me muestra el siguente error ----------------------------------------------------------------------------------------------- Uncaught ReferenceError: click is not defined at HTMLDocument.<anonymous> (index.php?page=verproveedores:15) at c (jquery.min.js:3) at Object.fireWith [as resolveWith] (jquery.min.js:3) at Function.ready (jquery.min.js:3) at HTMLDocument.q (jquery.min.js:3)
    – Aleman
    Commented el 13 jul. 2017 a las 16:11
  • @WAG listo me comi las comillas del unbind que hace la referencia al click revisa...
    – user46896
    Commented el 13 jul. 2017 a las 16:17
  • MUCHAS GRACIAS CRACK. Solucionado
    – Aleman
    Commented el 13 jul. 2017 a las 16:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.