javascript - Rails - 无法在失败的 ajax 表单提交上显示错误

Question

我已经尝试了一段时间了，但是当用户通过 ajax 提交表单并且表单失败时无法显示任何错误(我也无法显示成功消息，但那不是那么大一个交易)。

这是我的

表格

<ul id="errors">

</ul>

<%= form_for([@guide, @category, @key], url: guide_categories_keycreate_path(category_id: params[:id]), remote: true, :authenticity_token => true) do |f| %>
   <%= render 'shared/error_messages', object: f.object %>

   <%= f.label :name, "Key name" %>
   <%= f.text_field :name %>

    <%= f.select :key_type, [['Value', 1], ['Text', 2], ['Image', 3]] %>

   <%= f.submit "Next", :value => "Add New Key"  %>
<% end %> 

如果键没有保存， Controller 中的 js 渲染行

...
else
    respond_to do |format|
     format.html {  redirect_to edit_guide_category_path(@guide, @category) }
          format.json { render :json => { :error => @key.errors.full_messages }, :status => 422 }
     format.js 
  end

JavaScript

$(document).on "ajax:error", "form", (evt, xhr, status, error) ->
   errors = xhr.responseJSON.error
   for message of errors
      $('#errors ul').append '<li>' + errors[message] + '</li>'

表单不在其正常的键/创建 View 中，以防代码中的某些内容让您感到困惑，这可能会解释为什么会这样。

不知道从哪里开始，我基本上是从 this 复制代码的教程。我查看并尝试了一些教程并看到了一些 stackoverflow 问题，这基本上是我所需要的，但不会起作用。不知道下一步该怎么做。

Answer 1

错误可能在这里:

$('#errors ul').append '<li>' + errors[message] + '</li>'

应该是

$('ul#errors').append '<li>' + errors[message] + '</li>'

无论何时通过id 或class 调用元素，如果类在元素本身上，则需要在标识符之前引用元素；如果标识符在元素内部，您可以使用您的方式:

<ul class="errors">
  <li class="test">...</li>
</ul>

$("ul#errors")  #-> selects ul with id of errors
$("ul .test")   #-> selects all nested elements with "test" class

---

Not sure what to do next.

你需要调试。

您的问题概述可以通过以下方式解决:

1. 查看通过您的开发控制台发送的请求/响应
2. 确定流程中是否有任何错误(就像我上面提到的)
3. 确保您的控制者给出适当的响应

我调试的方式如下:

--

控制台

您需要确保了解您的应用中正在发生的事情；您还拥有执行此操作的所有工具。首先，您需要确保知道发送了哪些请求。通过 developer console 执行此操作.

在 Firefox 和 Chrome 中..

Right Click > Inspect Element > Console > "Network" (tab)

当您进入此选项卡并单击远程表单上的“提交”时，您将看到请求(和响应)出现。您可以使用它来确定问题所在:

您可以阅读更多here .

-

JS

其次，您的流程可能有问题。

使用上面的代码，您只发送一个 JS 请求(不是 JSON)。如果你想要 JSON，你必须按如下方式设置 type:

<%= form_for [@guide, @category, @key], url: guide_categories_keycreate_path(category_id: params[:id]), remote: true, authenticity_token: true, data: { type: :json }  do |f| %>

您还需要确保您的 JS 格式正确(我的第一点)。

最终，我无法梳理每一行代码 - 您需要使用我概述的工具来查看可能是什么问题。

-

Controller

最后，最后一个问题可能与 Controller 有关。

虽然不太可能，但您可能没有发送格式正确的请求等；导致您的 Controller 发送错误的响应。

我强烈建议您使用 Rails 控制台来查看问题所在:

每次您向您的应用程序发送请求时，控制台日志都应记录它。因此，如果您有任何问题，您需要检查记录了哪些问题。如果您发布了该内容，将会更好地了解正在发生的事情