Estoy tratando de mostrar una animación de carga/spinner en cada solicitud de Ajax
mi aplicación.js
$(document).on("turbolinks:load", function() { window.addAjaxLoaderHandler(); }); window.addAjaxLoaderHandler = function() { $(document).on('ajax:send', function() { $('#ajax-loader').show(); }); $(document).on('ajax:complete', function(){ setTimeout(() => {$('#ajax-loader').hide();}, 100); }); } Esto funciona perfectamente, HASTA que cargue un formulario remoto por AJAX. Si envío ese formulario recién cargado, ajax:send se dispara, pero después de completarlo (sin ningún error), ajax:complete no lo hace (la rueda giratoria no se ocultará).
El problema parece ser que elimino el formulario cargado con la llamada ajax.
¿Qué puedo hacer para que esto funcione?
Solo estoy tratando de hacer clic en un enlace, cargar un formulario y eliminar el formulario después de enviar su información.
ACTUALIZAR
Mi application.html.haml (utilizo HAML para que la sintaxis sea acorde, por lo que #... significa <div id="...">#all indented code lines#</div> )
#main = yield #ajax-loaderEl formulario se cargará como:
$('#main').append('<%= j(render(:partial => 'new', :locals => {:model => @model})) %>'); El problema es que #ajax-loader no está oculto y aún se muestra después de enviar el formulario.
Creo que el problema es que elimino el elemento de activación de la llamada AJAX. Pero esperaba que, dado que vinculé al oyente al document , todavía se activa.
Por supuesto, en este caso solo puedo hacer $('#ajax-loader').hide(); , pero estoy tratando de entender por qué ajax:complete no se dispara.
Supongo que respondió a su propia pregunta: el problema es que cuando elimina el formulario, también lo hace el detector de eventos.
Puede verificar qué detectores de eventos aún se aplican a su objeto de documento usando getEventListeners(document) . Prueba esto en tu consola* después de que se dispare la ruleta y se niegue a esconderse.
* editar: esta es una función de Google Chrome, es posible que no funcione en otros navegadores, aunque la mayoría de ellos tienen formas de inspeccionar a los oyentes en un nodo
Pienso en estas soluciones:
a) Vuelva a vincular a los oyentes cada vez que elimine un formulario;
b) Adjuntar el oyente al objeto de la window en lugar del document
c) Si está utilizando jQuery Ajax, puede usar las propiedades beforeSend y complete para mostrar y ocultar la rueda giratoria en lugar de los eventos. Si no es jQuery Ajax, probablemente haya una forma similar de lograr el mismo comportamiento.