ajax: éxito y ajax: la callback completa no funciona cuando se usa UJS en Rails

Tengo un enlace que cuando hago clic en él activará una llamada ajax y luego lo reemplazaré por otro enlace, dice, por ejemplo, que el enlace original es “agregar amigo”. Cuando hago clic en este enlace, enviará una solicitud ajax a la acción add_friend. si se agrega el amigo, el enlace anterior será reemplazado por otro enlace “cancelar solicitud”, uso ujs para eso:

$("#link_for_friend").html("") 

cuando trato de agregar callback (: éxito y: completo) no funciona, lo intenté con: antesEnviar como sigue:

 $(document).ready -> $("#my_link").on "ajax:beforeSend", -> alert("hello") 

¿Hay una solución para el éxito y la callback completa?

nota: mi idea es mostrar un loader.gif cuando ajaxStart se active y luego ocultarlo cuando ajax: complete la callback se active al menos, también si hay algún error quiero mostrarlo cuando ajax: error se activa

Actualizar

Intenté resolver esto moviendo el código dentro del archivo action.js.erb a js como este:

  $(document).ready -> $(document).on("ajax:success", "a.invitation-box", -> $("#link_for_friend").html("") ).on "ajax:error", "a.invitation-box", -> alert "error" 

pero de esta manera no es posible colocar render (‘users / cancel_link’) dentro de un archivo JS

Tuve el mismo problema, y ​​el problema no es con ajax: success o ajax: complete callback. El problema es que al mostrar la imagen gif de carga, reemplaza el contenido del contenedor, incluido el propio enlace. Así que el elemento en el que se aplica el éxito, la callback completa ya no forma parte del DOM, por eso no se activa la callback.

Una solución sería ocultar el elemento y agregar la imagen de carga, como se muestra a continuación:

 $('#my_link').on "ajax:send", (event, xhr, settings) -> $('#my_link').hide() $("#my_link_container").append("") 

Entonces se despedirá el éxito y la callback completa. Espero que ayude a alguien 🙂

Creo que su problema se debe a que JS no puede vincularse a su objeto, ya que se ha modificado. La forma en que JS funciona es “enlazarse” / “adjuntarse” a los elementos en el DOM (Modelo de objetos de documento). El DOM es básicamente una gran lista de elementos que JS usa para llamar a ciertas funciones, y por lo tanto le permite asignar varias funciones a esos elementos. Así es como se pueden llamar funciones de “clic” en diferentes elementos.

Básicamente, está reemplazando el objeto del que ha llamado el Ajax, de modo que cuando ocurre ‘ajax: success’, JS no tiene forma de saber con qué objeto asociarlo, lo que evita que se dispare la función.

La forma de solucionar esto es enlazar el documento y, a continuación, delegar el enlace a su div, como esto:

 $(document).on 'ajax:success' , '#my_link', -> //do stuff here 

Esto significa que incluso si este elemento cambia dinámicamente, seguirá teniendo la función vinculada, dándole así lo que necesita 🙂

Me encontré con este problema antes, ajax:success y ajax:complete UJS no se activarán. Pero otras devoluciones de llamada funcionan, como ajax:beforeSend

Mi solución es utilizar la callback de eventos global de jQuery para manejarlo

 $("#my_link").on('ajaxComplete', (evt, data, status, xhr) -> alert('This is a jQuery ajax complete event!') 

PS UJS utiliza el ajax de jQuery para enviar Ajax, por lo que la callback de jQuery seguramente se activará.

 # https://github.com/rails/jquery-ujs/blob/master/src/rails.js ajax: function(options) { return $.ajax(options); }, 

Prueba esto en tu action.js.erb :

 setTimeout(function () { ("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>") }); 

Esto colocará el reemplazo de html en el siguiente tick del temporizador que ocurre después de que se desencadenen los eventos ajax:* .