Question

我在Rails中编写了一个非常简单的待办事项应用程序。

查看：

h2 Your todos
ul#todo_list
  = render @todos
hr
  h4 Add new
  = form_for(Todo.new, url: {action: 'create'}, remote: true) do |form|
    = form.text_field :text
    = form.submit 'Add'

CoffeeScript的：

class Todo
  constructor: () ->
    @bindEvents()

  bindEvents: () =>
    console.log 'test1'
    $(document).ajaxSuccess(@onAjaxSuccess)

  onAjaxSuccess: (event, xhr, settings) ->
    console.log 'test2'
    $('#todo_list').append(xhr)

  @isPresent: (element_id) ->
    $("##{element_id}").length > 0

$(()->
  new Todo if Todo.isPresent('todos')
)

当我创建新的待办事项时，控制台中会打印test1。我得到了适当的200响应。不会触发@onAjaxSuccess()方法（不会打印test2）。为什么呢？

更新：

我刚刚看到jquery-ujs触发了ajax:success事件，所以我也试过了：

bindEvents: () =>
  console.log 'test1'
  $('#new_todo').on('ajax:success', @onAjaxSuccess)

仍然无法工作。

Answer 1

@onAjaxSuccess: (event, xhr, settings) ->

应该是

onAjaxSuccess: (event, xhr, settings) ->

以便将其添加到prototype并可通过this

访问

Answer 2

注意，尚未尝试coffeescript。

ajax请求是否在问题的javascript处发出？

.ajaxSuccess()的第二个参数是jqXHR个对象。当对象作为参数传递时，append()似乎不会抛出错误，但不会将对象作为字符串附加到元素。

var obj = {"abc":"123"};
$("body").append(obj);

如果form提交form.submit时发出ajax请求，您应该可以使用$("#todo_list").append(xhr.responseText)将ajax请求的响应附加到元素。

Answer 3

问题是没有'ajax:success'被解雇但是'ajax:error.'在xhr中我返回了html元素并且jQuery尝试将其解析为JSON（提示：绑定到'ajax:complete'并看看是什么你得到的错误。）

解决方案 - 更改表单的数据类型：

= form_for(Todo.new, url: {action: 'create'}, remote: true, html: { data: {type: :html} }) do |form|
    = form.text_field :text
    = form.submit 'Add'

无法让jQuery的ajaxSuccess（）工作

3 个答案: