title: AJAX form (using simple_form) with preserved error validation
body: <p>This might be one of the more difficult questions I've asked, but I have been stuck for a few days, and I thought it'd be best to get support from the more experienced rails community. </p>
  
  <p>I am working on a dummy app that follows this guide roughly... <a href="http://notes.rehali.com/?p=97" rel="noreferrer">ajax/jquery tutorial</a>... </p>
  
  <p>Making my own customizations, the guide helped me to create a "brand" (includes nested models "model", "submodel", and "style") submission form (using simple_form) and brands listing on the same page.. This works perfectly, and the validation (for my models) is enforced.. However, when I put the form and brand listing on the same page I lose the neat inline validation errors that were appearing on submission failure (see image below). Not being able to get the inline errors to work has made me realize that I have more to learn about rendering.. and that is why I am fixated on finding the answer to this question </p>
  
  <p><img src="https://i.stack.imgur.com/OPDRk.png" alt="enter image description here"></p>
  
  <p>...and here is the listing:</p>
  
  <p><img src="https://i.stack.imgur.com/uMD7j.png" alt="enter image description here"></p>
  
  <p>Below is the controller for the index action:</p>
  
  <pre><code>  def index
  
      #This is for the product listing
  
      @brands = Brand.all.reverse 
  
      #This is for the form   
  
      @brand = Brand.new
      @model = Model.new
      @submodel = Submodel.new
      @style = Style.new
  
      respond_to do |format|
        format.html
      end
    end
  </code></pre>
  
  <p>The above form creates the brand, model, submodel, and style for use in the nested submission form... Below is the code for the form:</p>
  
  <pre><code>&lt;%= simple_form_for @brand, :html =&gt; { :class =&gt; 'form-horizontal' }, :remote =&gt; true do |m| %&gt;
  
    &lt;fieldset style = "margin-top:34px;"&gt;
      &lt;legend&gt;&lt;/legend&gt;
      &lt;%= m.input :name, :label =&gt; 'Brand' %&gt;         
      &lt;%= m.simple_fields_for :models, @model do |p| %&gt;    
        &lt;%= p.input :name, :label =&gt; 'Model' %&gt;
        &lt;%= p.simple_fields_for :submodels, @submodel do |s| %&gt;
          &lt;%= s.input :name, :label =&gt; 'Submodel' %&gt;
          &lt;%= s.simple_fields_for :styles, @style do |ss| %&gt;
            &lt;%= ss.input :name, :label =&gt; 'Style' %&gt;
          &lt;% end %&gt;
        &lt;% end %&gt;
      &lt;% end %&gt;
  
      &lt;div class="form-actions"&gt;
        &lt;%= m.submit nil, :class =&gt; 'btn btn-primary' %&gt;
        &lt;%= link_to 'Cancel', brands_path, :class =&gt; 'btn' %&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Now as you can see I am using <code>:remote =&gt; true</code> ... I would like for the form to either create the new "brand", or for the form to reload with inline validation errors. At the moment my create action looks like:</p>
  
  <pre><code>def create
      @brand = Brand.new(params[:brand])
  
      respond_to do |format|
        if @brand.save
          format.html { redirect_to brands_url, notice: 'Brand was successfully created.' }
          format.json { render json: @brand, status: :created, location: @brand }
          format.js
        else
          format.html { render action: "index" }
          format.json { render json: @brand.errors, status: :unprocessable_entity }
          format.js { render 'reload' }
        end
      end
    end
  </code></pre>
  
  <p>The code that appears under <code>if @brand.save</code> seems to work.. but the code below "else" doesn't work the way I'd like. So what is happening when @brand does NOT save? I believe that the code within the index action is being run, then @brand.errors is converted to json (which I assume is for the simple_form validation errors), and then reload.js.erb is being run.. </p>
  
  <p>In an attempt to reload the form (with validation errors) I have put the line <code>$("#entryform").load(location.href+" #entryform&gt;*","");</code> into reload.js.erb ... When I put invalid data into my form reload.js.erb is being called, but all that happens is that the form fields reload blank, instead of having the data entered and inline validation errors. </p>
  
  <p>I hope I have provided enough info here to get help.. Really struggling on this one. Thanks!</p>