Abrir un formulario rails con modales de Bootstrap - LPC-Ltda/Ruby-on-Rails GitHub Wiki

Algunas veces requerimos abrir un formulario o desplegar información en una ventana modal, les mostraré una forma simple de usar las modales de twitter bootstrap.

Primero asegúrese de haber agregado la gema bootstrap-sass a su archivo gemfile y también de haber usado bundle para instalar la gema.

También es su archvo application.js incluya la llamada al archivo javascript bootstrap-modal en la siguiente forma.

//= require bootstrap-modal

Ahora en el archivo routes.rb agregue la ruta al partial que usted desea mostrar como modal, por ejemplo:

get "project/new_release" => 'project#new_release', :as => :new_release

En el controlador agregue el block respond_to para usar algo de magia ajax.

  def new_release
    respond_to do |format|
      format.html
      format.js
    end
  end

En la view llamante use el helper link_to en la siguiente forma:

<%= link_to 'Add release', new_release_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'}  %>

Necesitamos tener un DIV en la view llamante que cargue el partial como la ventana modal, así que haremos algo como esto:

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

Vamos a poner el formulario partial dentro del div con jquery.

Asegúrese de tener el partia, en este caso debería tener un nombre de archivo _new_release.html.erb, dentro de él usted deberá tener el contenido que desea mosatrar como ejemplo:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
 </div>
 <div class="modal-body">
    **here comes whatever you want to show!**
 </div>
 <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
 </div>

Ahora necesitamos algo de javascript para hacer este trabajo, hagamos un archivo llamado como el action del controlador pero con el sufijo .js.erb para este ejemplo debe ser:

new_release.js.erb

Y dentro del archivo agregue lo siguiente:

$("#modal-window").html("<%= escape_javascript(render 'project/new_release') %>");

Esto es, ahora cuando usted clickee sobre el link una linda modal se mostrará con un efecto fade muy limpio.