4

我有一个链接，当我点击它时会触发一个 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:complete 回调时隐藏它，如果有一些错误我想在触发 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 文件中

4

4 回答 4

8

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

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

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

然后将触发成功和完成回调。希望它可以帮助某人:)

于 2014-03-22T12:25:03.750 回答
3

我相信您的问题归结为 JS 无法绑定到您的对象，因为它已被更改。JS 的工作方式是将自身“绑定”/“附加”到 DOM（文档对象模型）中的元素。DOM 基本上是 JS 用来调用某些函数的元素的巨大列表，因此允许您为这些元素分配各种函数。这就是您可以在不同元素上调用“单击”功能的方式。

您基本上是在替换您从中调用 Ajax 的对象，因此当 'ajax:success' 发生时，JS 无法知道将其与哪个对象关联，从而阻止函数触发

解决这个问题的方法是绑定到文档，然后将绑定委托给您的 div，如下所示：

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

这意味着即使此元素动态更改，它仍然会绑定函数，从而为您提供所需的内容:)

于 2013-10-15T15:48:16.253 回答
1

在你的试试这个action.js.erb：

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

这会将 html 替换放在ajax:*事件触发后发生的下一个计时器滴答声中。

于 2014-07-09T07:36:25.620 回答
1

我以前遇到过这个问题，UJS的ajax:success并且ajax:complete不会被解雇。但其他回调工作，例如ajax:beforeSend

我的解决方法是使用 jQuery 的全局事件回调来处理它

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

PS UJS 使用 jQueryajax发送 Ajax，所以 jQuery 的回调肯定会被触发。

# https://github.com/rails/jquery-ujs/blob/master/src/rails.js
ajax: function(options) {
  return $.ajax(options);
},
于 2013-10-15T15:19:55.997 回答