Rails-无法获得错误以显示在失败的Ajax表单提交中 [英] Rails - Cant get errors to display on a failed ajax form submit

问题描述

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

这就是我所拥有的

表格

 < ul id ="errors"></ul><％= form_for([@ guide，@category，@key]，url:guide_categories_keycreate_path(category_id:params [:id])，remote:true，:authenticity_token => true)做| f |％><％=呈现'shared/error_messages'，对象:f.object％><％= f.label:name，键名"％><％= f.text_field:name％><％= f.select:key_type，[[''Value'，1]，['Text'，2]，['Image'，3]]％><％= f.提交下一步"，:value =>添加新密钥"％><％结束％> 

如果键不保存，则控制器中的js渲染线打开

  ...别的response_do |格式|format.html {redirect_to edit_guide_category_path(@guide，@category)}format.json {render:json =>{:error =>@ key.errors.full_messages}，:status =>422}format.js结尾 

javascript

  $(document).on"ajax:error"，"form"，(evt，xhr，status，error)->错误= xhr.responseJSON.error对于错误消息$('#errors ul').追加'< li>'+错误[message] +'</li>' 

该表单不在其正常的键/创建视图中，以防代码中的某些内容使您感到困惑，从而可能解释这种情况.

不知道从这里去哪里，我基本上从

您可以在

每次将请求发送到应用程序时，控制台日志都应记录该请求.因此，如果您有任何问题，则需要检查正在记录的问题.如果您发布了该内容，则可以更好地了解发生了什么情况

I've been trying to get this for a while now but cant get any errors to display when a user submits a form via ajax and the form fails (I cant get a success message to display either but thats not as big of a deal).

Here is what I have

The form

<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 %> 

The js render line in the controller on if key doesn't save

...
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>'

The form isn't in its normal key/create view, incase something in the code confuses you that might explain why it's that way.

Dont know where to go from here, I basically copied the coding from this tutorial. I have looked at and tried a few tutorials and seen a few stackoverflow questions and this is basically all I need but wont work. Not sure what to do next.

解决方案

The error is likely here:

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

It should be

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

Whenever you call an element by its id or class, if the class is on the element itself, you need to reference the element before the identifier; if the identifier is inside the element, you can use your way:

<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.

You need to debug.

The overview of your issue could be fixed with the following:

1. See what requests / responses are being sent through your development console
2. Determine if there are any errors in the flow (like I mentioned above)
3. Ensure your controllers are giving appropriate responses

The way I'd debug is as follows:

--

Console

You need to make sure you know what's going on in your app; you also have all the tools to do it. Firstly, you need to make sure you know which requests are being sent. Do this through the developer console.

In both Firefox & Chrome..

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

When you go on this tab, and click "submit" on your remote form, you'll see the request (and response) appear. You can use this to determine what is wrong:

You can read more here.

-

JS

Secondly, you could have an issue with your flow.

With the above code, you're only sending a JS request (not JSON). If you want JSON, you'd have to set the type as follows:

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

You also need to make sure your JS is correctly formatted (my first point).

Ultimately, I cannot comb through every line of code - you need to use the tools I've outlined to see what the issue might be.

-

Controller

Finally, the last issue might be with the controller.

Whilst unlikely, you may not be sending the correctly formatted request etc; leading your controller to send an incorrect response.

I would strongly recommend using your Rails console to see what's going wrong:

Each time you send a request to your app, the console log should record it. Thus, if you have any issue, you need to check out what issues are being recorded. If you posted that, it would give a lot better insight into what's going on

这篇关于Rails-无法获得错误以显示在失败的Ajax表单提交中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！