Question

我在Rails中创建了一个模态表单，使用AJAX远程提交值。

出于某种原因，提交模态表单本身并不会触发任何AJAX事件。如果我在页面中添加完全相同的表单代码（即不在模态上），它会在提交时触发AJAX事件。

这是我的代码：

//index.haml
= link_to 'New', new_foo_path, data: { remote: true, type: 'script'}

//_form.haml
= bootstrap_form_for @foo, remote: true do |f|  
  = f.text_field :bar
  = f.button "Save"


//foos_controller.rb
def create
  respond_to do |format|
    if @foo.save
      format.json { render json: @foo, status: :ok }
    else
      format.json { render json: @foo.errors, status: :unprocessable_entity }
    end
  end
end

//foo.coffee
$('#new_foo').on('ajax:success', (e, data, status, xhr) ->
  console.log 'Great success'
).on 'ajax:error', (e, data, status, xhr) ->
  console.log 'Great failure'

使用上面给出的代码，让我在提交带有未通过验证的值的表单时会看到422错误。此行为是预期的。但是，这不会将上述消息打印到Chrome开发者控制台日志中。如果我将表单代码添加到索引视图本身并从那里提交，我可以看到422错误以及在'foo.coffee'中分配的日志消息。

有人能发现我遗失的东西吗？

Answer 1

重新查看代码后，我会想出实际问题是什么。您使用JS加载模态表单，这意味着当您的页面在浏览器中加载时它不存在。这就是为什么你没有/不能将回调代码绑定到表单的原因，因为你想要绑定/注册它的源Dom不存在。要解决此问题，您需要将回调注册到页面中存在的元素，当它加载第一个时间并且您的表单必须是其中一个子元素时。这个概念叫做Event Delegation。所以下面的代码将起作用：

$('body')
.on 'ajax:success', '#new_foo', (e, data, status, xhr) ->
  console.log 'Great success'
.on 'ajax:error', '#new_foo', (e, data, status, xhr) ->
  console.log 'Great failure'

rails中的远程模态表单，不触发AJAX事件

1 个答案: