Can't get errors to be displayed in an Rails “remote: true” form?

Question

I'm trying to display errors messages in my ajax form (the code is based on this question):

posts_controller.rb:

  def create
    @post = current_user.posts.build(params[:post])
    if params[:commit] == "Publish"
      @post.status = "Published"
    elsif params[:commit] == "Save Draft"
      @post.status = "Draft"
    end

    respond_to do |format|
      format.html do
        if @post.save && @post.status == "Published"
          flash[:success] = "Post published"
          redirect_to @post
        elsif @post.save && @post.status == "Draft"
          flash[:success] = "Post saved as draft"
          render 'edit'
        else
          render 'new'
        end
      end
      format.js do
        @post.save
      end
    end
  end

posts/create.js.erb:

<% if @post.errors.any? %>
  alert('There are errors.');
  <%= render :partial=>'js_errors', :locals=> { :target=> @post } %>
<% else %>
  $('.busy').html('Saved.');
<% end %>

js_errors.js.erb:

<% target.errors.full_messages.each do |error| %>
  $('.busy').append('<p><%= escape_javascript( error ) %></p>');
<% end %>

posts/new.html.erb:

<%= form_for(@post, remote: true, :html => { :multipart => true }) do |f| %>
  <%= render 'fields', f: f %>
  <div class="form-actions">
    <%= f.submit "Publish", class: "publish btn btn-primary pull-left" %>
    <%= f.submit "Save Draft", class: "save-draft btn btn-default pull-left" %>
    <div class="busy pull-left">
    </div>
  </div>
<% end %>

But for some reason nothing displays ( .busy always remain empty).

In the console I can see that js_errors.js.erb is being displayed:

Started POST "/posts" for 127.0.0.1 at 2013-01-04 18:02:18 +0800 Processing by PostsController#create as JS Parameters: {"utf8"=>"✓", "authenticity_token"=>"Qfn6HsPPDxyB1t4bM/OQKPbJ/aoAMkp74y0Z6xkoXCY=", "post"=>{"title"=>"", "content"=>"", "tag_list"=>""}, "_wysihtml5_mode"=>"1", "commit"=>"Save Draft"} User Load (0.7ms) SELECT "users".* FROM "users" WHERE "users"."remember_token" = 'ljl0ZsuoiHg0Jilz8bgy-g' LIMIT 1 (0.2ms) begin transaction
(0.2ms) rollback transaction Rendered posts/_js_errors.js.erb (3.8ms) Rendered posts/create.js.erb (7.5ms) Completed 200 OK in 25ms (Views: 11.2ms | ActiveRecord: 1.0ms | Solr: 0.0ms)

What could be the problem?

(I do see the validation messages if I remove remote:true from the form).

EDIT:

I noticed alert('There are errors.'); is not being triggered. Strange.

Answer 1

It looks like a naming problem. You're asking to render the partial js_errors , which would be called _js_errors.js.erb ; but you say your file is actually called js_errors.js.erb (no leading underscore).

Try adding the underscore and see if that helps matters.

Answer 2

I have been facing a similar problem a few days ago. I used remote => true option in my form to use Ajax in my Rails 3 application. After that, I have been looking for solution for validating my form fields. After trying a good number of jQuery / Javascript approaches (none of them worked for me though) I came to know about a superb gem called client_side_validations. It is very easy to install by following the instructions on github link ( https://github.com/bcardarella/client_side_validations ). It works like charm for client side validation of form fields, an awesome gem indeed. Hope this helps with people who are tired of looking for a simple solution for client side validation of model fields after using Ajax in Rails 3 application.