Estoy cargando un formulario y acompañando los scripts JS en un modal a través de .ajax , pero el JS no activa ni inicializa los elementos como se esperaba. (No pasa nada) El HTML y los scripts funcionan como se esperaba en otros lugares, excepto cuando se cargan a través de ajax en un modal.
Así es como estoy cargando el contenido usando una Promesa para asegurarme de cargar los scripts solo después de cargar el HTML. ¿Algún consejo en el que me pueda estar equivocando?
$(document).on('click', '#post-offer', function() { $.when( $('head').append('<link rel="stylesheet" href="' + baseURL + '/css/jquery-ui.css">'), $('head').append('<link rel="stylesheet" href="' + baseURL + '/css/jquery.tagit.css">'), $('head').append('<link rel="stylesheet" href="' + baseURL + '/slim/slim.min.css">'), $.getScript( "//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"), openModal(baseURL + '/ajax.cgi?a=showoffer'), // << THIS IS THE HTML FORM $.Deferred(function(deferred){ $(deferred.resolve); }) ).done(function(){ $.getScript( "//maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxxxxxxx"), $.getScript( baseURL + "/js/tag-it.js" ), $.getScript( baseURL + "/slim/slim.jquery.js" ), $.getScript( baseURL + "/js/listing.js" ); }); });Para completar, aquí está la función openModal (que funciona como se esperaba):
function openModal(arg) { $('#loading').show(); if (arg.match(/^http/)) { //If query, then send it. var $query = arg; $.ajax({ url: $query, success: function(result) { $('#modalWrap').show(); $('#modalContent').html(result); $('#loading').hide(); }, error: function(xhr) { $("#loading").hide(); alert('Communication error! [Details: ' + xhr.status + ' - ' + xhr.statusText + ']'); } }); } else { //Or just return the input argument $('#modalWrap').show(); $('#modalContent').html(arg); $('#loading').hide(); }; };intente reemplazar esto con su función openModal :
function openModal(arg) { return new Promise((resolve, reject) => { $("#loading").show(); if (arg.match(/^http/)) { //If query, then send it. var $query = arg; $.ajax({ url: $query, success: function (result) { $("#modalWrap").show(); $("#modalContent").html(result); $("#loading").hide(); resolve(); }, error: function (xhr) { $("#loading").hide(); alert( "Communication error! [Details: " + xhr.status + " - " + xhr.statusText + "]" ); reject() }, }); } else { //Or just return the input argument $("#modalWrap").show(); $("#modalContent").html(arg); $("#loading").hide(); resolve(); } }); } si eso solo no ayudó, reemplace done con esto después de agregar el código anterior:
done(function () { window.requestAnimationFrame(() => { $.getScript("//maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxxxxxxx"); $.getScript(baseURL + "/js/tag-it.js"); $.getScript(baseURL + "/slim/slim.jquery.js"); $.getScript(baseURL + "/js/listing.js"); }); });Así es como lo resolví para cualquier otra persona con este problema.
No fue un problema de carga. Todos los scripts y HTML se cargaron bien. El problema era que una de las secuencias de comandos cargadas dinámicamente listing.js tenía un contenedor document.ready() que no se activaba porque el DOM ya estaba cargado, por lo que los elementos JS en el formulario cargado dinámicamente no se estaban inicializando. Sin embargo, cuando eliminé document.ready() , todavía no estaba inicializando los elementos cargados dinámicamente.
Para evitar esto, cambié document.ready() a una función initialize() y la llamé por última vez desde el HTML cargado dinámicamente. Todo funciona bien ahora:
//DYNAMICALLY LOADED SCRIPT FIRST function initialize(){ //INITIALIZE JS FORM ELEMENTS... }Luego, en la misma llamada AJAX:
<form class="dynamically-loaded-HTML"> <!-- FORM ELEMENTS --> </form> <script> initialize(); </script>