ajax:success和ajax:在Rails中使用UJS时,完全回调不起作用

Question

我有一个链接,当我点击它将触发ajax调用,然后通过另一个链接替换此链接,例如说原始链接是"添加朋友",当我点击此链接它将发送ajax请求add_friend行动然后如果添加了朋友,上面的链接将被另一个链接"取消请求"替换,我使用ujs:

$("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")

当我尝试添加回调(:成功和:完成)时,它不起作用,我尝试使用:beforeSend,如下所示:

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

有成功和完全回调的解决方案吗？

注意:我的想法是在ajaxStart被触发时显示loader.gif然后在ajax:至少触发完成回调时隐藏它,如果有一些错误我想在ajax:error被触发时显示它

更新

我试图通过将action.js.erb中的代码移动到js文件来解决这个问题,如下所示:

  $(document).ready ->
  $(document).on("ajax:success", "a.invitation-box", ->
    $("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")
  ).on "ajax:error", "a.invitation-box", ->
    alert "error"

但是这样就不可能将render('users/cancel_link')放在JS文件中

Answer 1

我有同样的问题,问题不在于ajax:success或ajax:完全回调.问题是,在显示加载gif图像时,您将替换容器的内容,包括链接本身.因此,应用成功的元素,完整的回调不再是DOM的一部分,这就是为什么不触发回调的原因.

一种解决方案是隐藏元素并附加加载图像,如下所示:

$('#my_link').on "ajax:send", (event, xhr, settings) ->
        $('#my_link').hide()
        $("#my_link_container").append("<image src = 'img.gif' />")

然后将触发成功和完整回调.希望它有助于某人:)