He encontrado preguntas similares sobre StackOverflowaquí yaquí pero todavía no puedo hacer que esto funcione.

Estoy usando Rails 3.2.8, SimpleForm 2.0.4 y Twitter Bootstrap 2.1.1 (a través de la gema bootstrap-sass 2.1.1.0).

El usuario debe poder agregar un contacto desde una ventana emergente modal. Si hay errores de validación, deberían aparecer en línea, como si el usuario estuviera utilizando una versión no modal del formulario (borde rojo alrededor del campo, mensaje de error junto al campo).

Cargo el modal así:

<a data-toggle="modal" data-target="#new-contact-modal">Go modal!</a>

Aquí está el modo Bootstrap, que llama al mismocontacts/contact_fields Parcialmente utilizado en la versión no modal.app / views / contacts / _new_modal.html.erb:

<div id="new-contact-modal" class="modal hide fade" tabindex="-1" 
     role="dialog" aria-labelledby="new-contact-modal-label" 
     aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" 
     aria-hidden="true">×</button>
    <h3 id="new-contact-modal-label"><%= t("contacts.new.header") %></h3>
  </div>
  <%= simple_form_for(@contact, 
      :remote => true,
      :html => {:class => "form-horizontal", 
                "data-type" => :json }) do |contact_form| %>
    <div id="new-contact-body" class="modal-body">
      <%= render 'contacts/contact_fields', :f => contact_form %>
    </div>
    <div class="modal-footer">
      <%= contact_form.submit :class => "btn btn-primary", 
          :"data-loading-text"=> ('simple_form.creating') %>
      <%= t('simple_form.buttons.or') %>
      <a data-dismiss="modal" aria-hidden="true">
        <%= t('simple_form.buttons.cancel') %>
      </a>
    </div>
  <% end %>
</div>

app / controllers / contacts_controller.rb (intencionalmente comentó elformat.json línea ya que estoy tratando de enviar todo el modal de vuelta con JavaScript):

def create
  @contact = Contact.new(params[:contact])
  <...some additional processing...>
  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

app / views / contacts / new_modal_error.js.erb

var modal = "<%= escape_javascript(render :partial => 'contacts/new_modal', :locals => { :contact => @contact.errors }) %>";
$("#new-contact-modal").html($(modal));

app / asset / javascripts / contacts.js Algunos JQuery para restablecer el formulario y cerrar el modal en caso de éxito.

$(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");
    })
});

La buena noticia es que esto funciona cuando el formulario no tiene errores: se agrega el contacto y se oculta el modal. Sin embargo si hayson errores de validación, me sale el mensaje "JSON.parse: carácter inesperado". Esto viene de jquery.js, línea 515, que es lareturn declaración en este fragmento:

// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
    return window.JSON.parse( data );
}

Si yo inspeccionodata, Veo que es el contenido de minew_modal_error.js archivo, totalmente expandido con los errores de formulario, y escapado para JavaScript. Pero no es JSON.

¿Qué me estoy perdiendo? ¿Cómo consigo la página para procesar?new_modal_error.js como un archivo JavaScript, no una variable JSON? ¿O hay una manera más fácil de manejar esto por completo?