🥇 Abra um formulário Rails com modais Twitter Bootstrap

Às vezes, precisamos abrir um formulário ou exibir informações que se abrem como janelas modais, vou mostrar uma maneira fácil de fazer isso usando modais de bootstrap do Twitter.

Primeiro certifique-se de adicionar a gem bootstrap-sass ao seu gemfile e também de usar o bundle para instalar a gem.

Além disso, em seu application.js, inclua a chamada do arquivo javascript bootstrap-modal da seguinte maneira:

//= require bootstrap-modal

Agora, no arquivo routes.rb, adicione a rota à parcial que deseja mostrar como modal, por exemplo:

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

No controlador, adicione o bloco respond_to para usar um pouco da magia ajax

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

Na visualização de chamada, use um auxiliar link_to da seguinte maneira:

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

Precisamos ter um DIV na visualização de chamada que carregará a parcial como a janela modal, portanto, estamos tendo algo assim:

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

Vamos colocar o formulário parcial dentro dessa div com jquery.

Certifique-se de ter o parcial, neste caso deve ser um arquivo denominado _new_release.html.erb , dentro deste você terá o conteúdo que deseja mostrar por exemplo:

<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>

Agora precisamos de algum javascript para fazer isso funcionar, faça um arquivo com o mesmo nome da ação do controlador, mas com o sufixo .js.erb para este exemplo deve ser:

new_release.js.erb

E dentro do arquivo, adicione o seguinte:

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

É isso, agora quando você clicar no link, um modal legal aparecerá com um efeito de fade bem limpo.

Espero que este pequeno trecho seja útil para você.
Peguei todas as informações dos seguintes sites.

Related Posts