0

Continuo editando mi página y ahora descubro que al cargar una página en un modal con AJAX, ciertas funciones de JS no se ejecutan, como por ejemplo, activar/desactivar botones, poner en mayúsculas los inputs, entre otros.

Si la página la utilizo fuera del modal, sin AJAX, todo funciona. Pero si llamo al modal mediante AJAX, no... ¿qué debería ver en mi código?

Con este código cargo el modal

function usuario_editar(id_editar) {

$.ajax({

    type: 'POST',
    url: '../head_menu/usuarios_edicion.php',
    data:{id:id_editar},
    success: function(data) {
        $('#modal_usuario_edicion .modal-body').html(data);
    }                         

});

}  

Ese código que carga el modal, está en el mismo archivo JS que contiene las funciones que no se me están ejecutando.

Una de las funciones de JS que no se ejecuta en el modal:

function habilitar_btn_actualizar_usuario_edit() {

    var txt0dni = document.getElementById('txt_dni').value;
    var txt0apellidos = document.getElementById('txt_apellido').value;
    var txt0nombres = document.getElementById('txt_nombre').value;

    if (txt0dni && txt0apellidos && txt0nombres) {
        document.getElementById('btn_actualizar').disabled = false;
    } else {
        document.getElementById('btn_actualizar').disabled = true;
    }

}
8
  • 1
    Si nos pones un ejemplo mínimo verificable podremos ayudarte mejor. Como concepto, debes entender que el javascript que se ejecuta durante o justo despues de la carga del documento, solo ejecuta para los elementos del DOM actual. Si luego agregas nuevos elementos al DOM mediante ajax no esperes que siempre funcionen todas las capturas de eventos sobre ellos, porque como no estaban al principio, no se tienen en cuenta. Habria que volver a capturar esos eventos de nuevo al terminar la carga del ajax seguramente, pero si pones el código te lo confirmaremos y te podremos ayudar mejor.
    – masterguru
    el 6 feb. 2022 a las 0:27
  • @masterguru Ahí agregué el código que carga el modal, donde no funcionan algunas funciones. Ese código lo tengo en el archivo funciones.js y en ese mismo archivo están algunas de las funciones que no se ejectuan.
    – Luciano
    el 7 feb. 2022 a las 18:06
  • Si el modal trae nuevo javascript enciérralo dentro de window.onload a ver si te funcionan asi, pues el problema es que deben cargarse, no solo imprimirse en el html de salida o modal.
    – masterguru
    el 7 feb. 2022 a las 18:16
  • @masterguru No es nuevo javascript. Tengo un archivo .JS con varias funciones e incluye AJAX para cargar el modal.
    – Luciano
    el 7 feb. 2022 a las 21:47
  • Pues entonces es lo que te he dicho al principio en mi primer comentario, y que tambien te han puesto en una respuesta. Repásalo bien. La solución pasa por "recargar" las funcionalidades de javascript que quieres que tenga este nuevo código traido desde ajax. En tu pregunta pon las funcionalidades de javascript que no funcionan ahora en tu modal, y veremos si podemos aportarte una solución. Seguramente desde el success del ajax algo podremos hacer.
    – masterguru
    el 7 feb. 2022 a las 21:57

1 respuesta 1

0

Para solucionar tu caso vamos a probar lo que se llama delegación de eventos en javascript, que consiste en aplicar a un elemento padre la captura de los eventos que esperamos que se produzcan en algunos de sus hijos, y filtrar sus acciones según el hijo que se desee.

Esto se produce gracias a la propagación de eventos que lo definen aqui de este modo:

Cuando un evento ocurre en un elemento, este primero ejecuta los manejadores que tiene asignados, luego los manejadores de su padre, y así hasta otros ancestros.

De este modo, podemos dejar el evento en escucha en el padre durante la carga inicial del documento en un elemento que después, si su contenido es modificado por ajax, seguirá a la escucha igualmente y podremos aplicar su código y en este caso averiguando cual de sus hijos actuales lo ha recibido.

Con vanilla javascript (javascript puro) seria así:

window.addEventListener("keyup", function() {
    if (event.target.id == 'txt_dni' || event.target.id == 'txt_apellido' || event.target.id == 'txt_nombre') {
        habilitar_btn_actualizar_usuario_edit();
    }
}, false);

Pon eso en el javascript que se carga al finalizar el DOM y comprueba si funciona y nos cuentas. (y si funciona puedes quitar el onkeyup= de esos elementos pues ya no pintará nada)

O prueba con esto en jquery:

$('body').keyup(function() {
  if (event.target.id == 'txt_dni' || event.target.id == 'txt_apellido' || event.target.id == 'txt_nombre') {
    habilitar_btn_actualizar_usuario_edit();
  }
});

Fíjate que tanto en la solución jquery como en la otra, ambos elementos no son el immediato padre de los inputs, sino que son el body y el window del documento, pues según parece los eventos de key no pueden ser capturados por los padres si no tienen el foco, por lo tanto saltan hasta la parte más superior del DOM, y desde allí intentaremos que funcionen tu nuevos elementos insertados con ajax.

6
  • Lo que voy intentando no funciona... si sabía que había funciones de JS que podían no funcionar directamente en el modal, no lo usaba. Esa es una de las funciones que no se ejecutan, me faltan varias más aún por conseguir.
    – Luciano
    el 8 feb. 2022 a las 14:06
  • ¿Te da algun error de consola al intentarlo o al cargar el documento? Yo no lo he podido probar directamente esta vez.
    – masterguru
    el 8 feb. 2022 a las 14:11
  • Prueba esta nueva respuesta con javascript puro
    – masterguru
    el 8 feb. 2022 a las 15:20
  • No hay caso y ya de tanto hacer y deshacer he modificado parte del código que funcionaba. Ya le tomé bronca a los modales, js y ajax. Volveré a la vieja escuela y, en lugar de hacer todo en modales, que el usuario acceda página por página. No lo quería hacer, pero eso no da errores. Que bronca le tengo jajaja GRACIAS por la ayuda, pero ya no se dónde puse el código y dónde no. :-(
    – Luciano
    el 8 feb. 2022 a las 20:30
  • Bueno, a mi esta ultima solución con javascript si que me funcionaba (la de jquery no tuve tiempo de probarla y ahora no estoy en el mismo pc con el código). Que lo sepas para próximas ocasiones. El problema era que los eventos de key solo se aplican a los elementos con el foco o bien a sus más lejanos ancestros, como body o window. Por eso no funcionaba mi anterior respuesta y esa delegación fue mal, pero ahora si va pues lo he reproducido en local.
    – masterguru
    el 8 feb. 2022 a las 20:35

Tu Respuesta

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

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