title: Display inline errors with simple_form in a Bootstrap Ajax modal
body: <p>I've found similar StackOverflow questions <a href="https://stackoverflow.com/a/10021054/550712">here</a> and <a href="https://stackoverflow.com/q/10051050/550712">here</a> but still can't get this to work.</p>
  
  <p>I'm using Rails 3.2.8, SimpleForm 2.0.4, and Twitter Bootstrap 2.1.1 (via the bootstrap-sass gem 2.1.1.0).</p>
  
  <p>The user should be able to add a contact from a modal popup window. If there are validation errors, they should appear inline, just as if the user were using a non-modal version of the form (red border around field, error message next to field).</p>
  
  <p>I load the modal like this:</p>
  
  <pre><code>&lt;a data-toggle="modal" data-target="#new-contact-modal"&gt;Go modal!&lt;/a&gt;
  </code></pre>
  
  <p>Here is the Bootstrap modal, which calls the same <code>contacts/contact_fields</code> partial used in the non-modal version. <strong>app/views/contacts/_new_modal.html.erb</strong>:</p>
  
  <pre><code>&lt;div id="new-contact-modal" class="modal hide fade" tabindex="-1" 
       role="dialog" aria-labelledby="new-contact-modal-label" 
       aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" 
       aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="new-contact-modal-label"&gt;&lt;%= t("contacts.new.header") %&gt;&lt;/h3&gt;
    &lt;/div&gt;
    &lt;%= simple_form_for(@contact, 
        :remote =&gt; true,
        :html =&gt; {:class =&gt; "form-horizontal", 
                  "data-type" =&gt; :json }) do |contact_form| %&gt;
      &lt;div id="new-contact-body" class="modal-body"&gt;
        &lt;%= render 'contacts/contact_fields', :f =&gt; contact_form %&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;%= contact_form.submit :class =&gt; "btn btn-primary", 
            :"data-loading-text"=&gt; ('simple_form.creating') %&gt;
        &lt;%= t('simple_form.buttons.or') %&gt;
        &lt;a data-dismiss="modal" aria-hidden="true"&gt;
          &lt;%= t('simple_form.buttons.cancel') %&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app/controllers/contacts_controller.rb</strong> (intentionally commented out the <code>format.json</code> line since I'm trying to send the whole modal back using JavaScript):</p>
  
  <pre><code>def create
    @contact = Contact.new(params[:contact])
    &lt;...some additional processing...&gt;
    respond_to do |format|
      if @contact.save
        format.html { flash[:success] = "Contact added."
                      redirect_to @contact }
        format.json { render json: @contact, status: :created, location: @contact}
      else
        format.html { render action: "new" }
        #format.json { render json: @contact.errors, status: :unprocessable_entity }
        format.js { render 'new_modal_error' }
      end
  </code></pre>
  
  <p><strong>app/views/contacts/new_modal_error.js.erb</strong></p>
  
  <pre><code>var modal = "&lt;%= escape_javascript(render :partial =&gt; 'contacts/new_modal', :locals =&gt; { :contact =&gt; @contact.errors }) %&gt;";
  $("#new-contact-modal").html($(modal));
  </code></pre>
  
  <p><strong>app/assets/javascripts/contacts.js</strong> Some JQuery to reset the form and close the modal on success. </p>
  
  <pre><code>$(function($) {
    $("#new_contact")
      .bind("ajax:success", function(event, data, status, xhr) {
        // http://simple.procoding.net/2008/11/22/how-to-reset-form-with-jquery :
        $(this).each(function(){
          this.reset();
        });       
        $("#new-contact-modal").modal("hide");
      })
  });
  </code></pre>
  
  <p>The good news is, this works when the form has no errors:  the contact is added and the modal is hidden.  However if there <em>are</em> validation errors, I get the message "JSON.parse: unexpected character". This comes from jquery.js, line 515, which is the <code>return</code> statement in this snippet:</p>
  
  <pre><code>// Attempt to parse using the native JSON parser first
  if ( window.JSON &amp;&amp; window.JSON.parse ) {
      return window.JSON.parse( data );
  }
  </code></pre>
  
  <p>If I inspect <code>data</code>, I see that is is the content of my <code>new_modal_error.js</code> file, fully expanded with the form errors, and escaped for JavaScript. But it's not JSON. </p>
  
  <p>What am I missing? How do I get the page to process <code>new_modal_error.js</code> as a JavaScript file, not a JSON variable? Or is there an easier way to handle this altogether?</p>