ej0mhg
Last Updated: December 09, 2016
·
37.12K
· edokun_
Picture 4

Open a rails form with Twitter Bootstrap modals

Sometimes we require to open a form or display information that opens up as modal windows, I will show you an easy way to do it using twitter bootstrap modals.

First make sure you added the bootstrap-sass gem to your gemfile and also used bundle to install the gem.

Also in your application.js include the calling to the bootstrap-modal javascript file in the following way:

//= require bootstrap-modal

Now in the routes.rb file add the route to the partial you want to show as modal, for example:

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

In the controller add the respond_to block to use some ajax magic

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

In the calling view use a link_to helper in the following way:

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

We need to have a DIV in the calling view that will load the partial as the modal window, so we are having something like this:

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

We are going to put the partial form inside that div with jquery.

Make sure to have the partial, in this case should be a file named _new_release.html.erb, inside this you will have the content you want to show for example:

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

Now we need some javascript to make this works, make a file named same way as the controller action but with the suffix .js.erb for this example should be:

new_release.js.erb

And inside the file add the following:

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

That's it, now when you click on the link a nice modal will show up with a very clean fade effect.

Hope this little snippet can be handy for you.
I took all the information from the following sites.

18 Responses
Add your response

8784
Deae4f55af0010e802d0f4b0121d3f7a

Thank you. We still need to add $("modal-window).modal() in the .js.erb file for the modal to trigger.

over 1 year ago ·
9455
0 9r8jggipgjvy svnql og8t0asogkjqnqtnqg88aamos7gi9s9kzuhqhh yc1ozsc1cfdf swjxw

great, Thanks.

over 1 year ago ·
9517
2d4971574e417b2f9bed862a33d7ee43

'data_toggle' should be 'data-toggle'

over 1 year ago ·
9519
Picture 4

Thanks, for the advice, I will correct it.

over 1 year ago ·
12767
19f225061ed6d07e5c1088b55620fa48

@gautham-nookala No, you don't. It get's triggered in the link_to statement with data-target and data-toogle. See the official Bootstrap manual.

To get it working with Bootstrap 3 you have to remove all "hide" class references in your < div >

over 1 year ago ·
14885
Default profile 4 normal

this is just what i find ,
thank you very much

over 1 year ago ·
15104
Dublin

got it work after having removed "hide" from the class

over 1 year ago ·
15244
Image normal

hi , I have tried this one , i got fade screen but no popup was displaying

over 1 year ago ·
15667
B72fc5d9251ae33f4eb3a0c94bf9933a

How to handle with multiple modals?
I have now this:
$('.modal-service').empty().html('<%= escapejavascript(render :partial => 'serviceform', :object => @service) %>');
$('.modal-employee').empty().html('<%= escapejavascript(render :partial => 'addemployee', :object => @service) %>');

But with every click to open a modal, it loads all the modals which causing some conflicts.

over 1 year ago ·
17234
None

I got everything to work without using the new_release.js.erb file as well as the 'require' in application.js. Why would you need that in there exactly? Great tutorial btw!

over 1 year ago ·
20091
None

Thanks!!!

over 1 year ago ·
28106

I'm really stuck in trying to get this setup.

For Rails 4 users, one thing to note is that the require bootstrap/modal needs to be / instead of -.

Also, see this post. The suggestion was to add $('#modal-window').modal('show'); to the end of the js file and to keep the js.erb file in the views folder instead of the app assets javascripts folder, so that the render action can work.

I still can't get this working though. When I click the link that is supposed to render the modal, I get a greyed out screen but no modal. No console errors and html inspector shows modal container is recognised. The network inspector does not show any path as available.

5 months ago ·
28108
28142

@endlessly stuck - I had better luck looking at this: http://v4-alpha.getbootstrap.com/components/modal/
bootstrap was already included in my (rails 5) project so those methods were already available. I just added this to my button code: {:remote => true, 'data-toggle' => "modal", :class => 'btn btn-primary btn-small', 'data-target' => '#myModal'}. The :remote => true asks the controller for js - so the controller respond_to stuff above is important. (as well as the routes.rb part). Then your js code for the partial above should also work.

5 months ago ·
28161

@endlessly I had the same problem as you, I fixed it this way:
1. Your calling to render the modal must be outside <body>, <nav> or any tag, for example mine:
<nav>
<%= linkto 'Sign up', signin_path, {:remote => true, 'data-toggle' => "modal", :class => 'nav-item nav-link', 'data-target' => '#modal-window'} %>
</nav>

<div id="modal-window" class="modal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">

4 months ago ·
28281

@endlessly stuck try $("#modal-window").html("<%= j escapejavascript(render 'project/newrelease') %>");

3 months ago ·
28294
Aurel

@endlessly stuck, a buddy of mine doing frontend have just show me the trick that made it working (I was stuck too with greyed out screen but no modal):

The modal window should be declared like this:

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

Then, rendering should be made this way:

$("#modal-window").find(".modal-content").html("<%= j (render 'application/modal') %>");
$("#modal-window").modal();
3 months ago ·
28371

Hello everyone, I've tried everything on the comments and still wasn't able to make it work.
I've removed the class hide from the trigger div, still, my modal opens up and closes immediately. Anyone knows how I resolve this?

about 1 month ago ·