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

时间:2016-02-13 09:54:16

标签: javascript ruby-on-rails ajax ruby-on-rails-4

我一直想尝试一段时间,但是当用户通过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 %> 

如果键不保存,则控制器中的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>'

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

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

1 个答案:

答案 0 :(得分:1)

错误可能在这里:

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

应该是

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

每当您通过其idclass调用元素时,如果该类位于元素本身上,则需要在标识符之前引用该元素;如果标识符 in 元素,您可以按照自己的方式使用:

<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
  

不确定接下来该做什么。

您需要调试。

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

  1. 查看通过开发控制台发送的请求/响应
  2. 确定流程中是否有任何错误(如上所述)
  3. 确保您的管理员提供适当的回复
  4. 我调试的方式如下:

    -

    <强>控制台

    您需要确保知道应用中发生了什么;你也拥有所有工具。首先,您需要确保知道正在发送哪些请求。通过developer console

    执行此操作

    在Firefox和&amp;铬..

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

    当您进入此选项卡,然后单击远程表单上的“提交”时,您将看到请求(和响应)出现。您可以使用它来确定错误:

    enter image description here

    您可以阅读更多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格式正确(我的第一点)。

    最终,我无法梳理每一行代码 - 您需要使用我概述的工具来查看问题所在。

    -

    <强>控制器

    最后,最后一个问题可能出在控制器上。

    虽然不太可能,但您可能无法发送格式正确的请求等;导致您的控制器发送错误的响应。

    我强烈建议您使用Rails控制台查看出现了什么问题:

    enter image description here

    每次向应用发送请求时,控制台日志都应记录该请求。因此,如果您有任何问题,则需要查看正在记录的问题。如果你发布了它,它会更好地洞察正在发生的事情