Rails - Cant get errors to display on a failed ajax form submit

Question

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.

Answer 1

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