javascript - 如何进行 Ajax 复选框回调

Question

构建“Rails change boolean value with checkbox and jquery ajax ”，我尝试构建一个复选框 Ajax POST 调用。

该调用似乎有效，但无法附加我可以看到的回调。

在“Working with JavaScript in Rails ”中，您似乎可以通过以下代码来完成此操作:

$(document).ready ->
    $("#new_article").on("ajax:success", (e, data, status, xhr) ->
        $("#new_article").append xhr.responseText
    ).on "ajax:error", (e, xhr, status, error) ->
        $("#new_article").append "<p>ERROR</p>"

但这似乎不起作用。

当我将它附加到复选框类(而不是 new_article)时，成功命中后不会触发任何内容。有什么想法吗？我应该将它附加到其他东西上吗？我查看了代码，在我的复选框周围没有生成任何表单。

这里有更多links这似乎支持之前的 JavaScript 代码应该如何工作，但实际上不起作用。

Answer 1

如果您使用remote: true，您将能够使用 following :

#view
<%= check_box_tag :param_name, "value", false, id: "check_box", data: { remote: true, url: your_path} %>

--

remote: true 调用 rails_ujs ，其中有一系列event hooks (您在上面使用)。您需要将 JS 绑定(bind)到这些事件 Hook 才能检索您想要的响应:

#app/assets/javascripts/application.coffee
$(document).on("ajax:success", "#check_box", (data, status, xhr) -> 
    $("#new_article").append xhr.responseText
).on "ajax:error", "#check_box", (e, xhr, status, error) ->
    $("#new_article").append "Error"

需要理解的几件事:

1. 如果您有turbolinks始终启用delegate来自 document 对象(JQuery 只能绑定(bind)到使用 DOM 加载的元素)
2. 如果您尝试“捕获”Ajax 响应(在本例中是来自 remote: true)，则需要将其绑定(bind)到发送的元素要求。通常，这将是一个表单，但在您的情况下，它是复选框

<小时/>

当然，这依赖于您通过 rails_ujs remote: true 帮助程序发送请求的想法。相反，如果您想使用“裸”JQuery 发送请求，您需要使用:

#view
<%= form_tag ... do %> 
  <%= check_box_tag :x, "y", id: "check_box" %>
<% end %>

#app/assets/javascripts/application.coffee
$(document).on "change", "#check_box", (e) ->
   $.ajax
      url: "your/path/as/a/string",
      data: $(this).val(),
      success: (data) ->
        // do something,
      error: (data) ->
        // do something