无法将 ajax:error 处理程序附加到表单 ID答案

【问题标题】：Cannot Attach ajax:error handler to Form ID无法将 ajax:error 处理程序附加到表单 ID
【发布时间】：2019-01-07 05:51:34
【问题描述】：

我无法将 ajax:error 响应绑定到表单 ID。有人能指出我解决这个问题的正确方向吗？

这里是代码。

<%= form_for @person,
              html: {
                id: '#person_form',
                class: 'js_inline_validate'
              },
              data: { validate_url: validate_field_people_path },
              remote: true,
              url: people_path do |f| %>

  <div class="form-group">
    <div class='form-group-label'>
      <%= f.label :first_name %>
    </div>
    <%= f.text_field :first_name,
                      :id => 'first_name',
                      class: 'js_new_person_frm_validate js_new_person_first_name' %>
    <div class="text-error small">
      <span>
        <%= @person.errors.full_messages_for(:first_name).first if @person.errors[:first_name].any? %>
      </span>
    </div>
  </div>

  <div class="form-group">
    <div class='form-group-label'>
      <%= f.label :last_name %>
    </div>
    <%= f.text_field :last_name,
                      :id => 'last_name',
                      class: 'js_new_person_frm_validate js_new_person_last_name' %>
    <div class="text-error small">
      <span>
                <%= @person.errors.full_messages_for(:last_name).first if @person.errors[:last_name].any? %>
            </span>
    </div>
  </div>

  <div class="form-group">
    <%= f.submit "Create", data: { disable_with: false } %>
  </div>
<% end %>

控制器

class PeopleController < ApplicationController

  ......

  def create
    @person = Person.new(create_params)

    if(@person.save)
      flash[:success] = "person created successfully"
      redirect_to root_path
    else
      respond_to do |format|
        format.html { render :action => 'new' }
        format.any(:js, :json) {
          render :json => { :error => @person.errors }, :status => 422
        }
      end
    end
  end

  .....

end

咖啡脚本

$ ->

  $("#person_form").on "ajax:error", (event, data, status, xhr) ->
    alert "ajax:error!"
    #do more stuff

我无法解决的问题是，当我使用“文档”时，它的工作原理如下，但我需要它特定于我的#person_form。当我用我的 form_id 替换文档时，我没有得到任何回应。我在这里遗漏了一些简单的东西吗？

$ ->

      $(document).on "ajax:error", (event, data, status, xhr) ->
        alert "ajax:error!"
        #do more stuff

谢谢！

【问题讨论】：

我在 json 中返回模型错误。所以成功时我重定向，但我希望失败时出现 json 错误。只要全局处理 Ajax 事件（即使用文档），它就可以正常工作，但是当我尝试将处理程序附加到特定表单 ID 时，我没有得到任何响应。我假设我在脚本中遗漏了一些非常简单的东西？但我很难过！
抱歉，有一个拼写错误。您是否通过 Ajax 呈现表单？
不，我不会重新渲染表单。我只是通过 json 将 model.errors 对象返回给客户端：render :json => { :error => @person.errors }, :status => 422
试试$('#person_form input[type=submit]').on "ajaxError", -> alert('work')

标签： javascript ruby ajax coffeescript

【解决方案1】：

我将把这个简单的答案留给可能遇到此问题的其他人。希望对下一个人来说就这么简单。我花了几个小时才找到问题所在。

原来这个错误是因为一个非常简单的错误而发生的：

<%= form_for @person,
      html: {
        id: '#person_form',  <= ERROR IS HERE!!
        class: 'js_inline_validate'
      },
      data: { validate_url: validate_field_people_path },
      remote: true,
      url: people_path do |f| %>

#person_form 应该是 person_form（不包括井号）。从脚本切换到 ruby 时，我没有发现代码中的一个非常简单的错误。

全局事件处理程序将捕获 ajax:error 并正确执行代码。标识符中的井号阻止了本地 ajax 事件的正确注册。

【讨论】：