How to add bootstrap modal with link_to so the link content open in modal ?

Question

I am trying to use bootstrap modal http://twitter.github.com/bootstrap/javascript.html#modals on a rails link to open that link in the modal

<%= link_to page_path, target: '_blank' %>

but somehow it is not working. The standard toggle code is -

<a data-toggle="modal" href="#myModal" class="btn">Launch demo modal</a>

but I am not sure how to apply it to link_to in rails, any help ?

Thanks

I made this work by adding requirements to my application.js in this order: //= require popper, //= require turbolinks, //= require bootstrap You can check out the example here: https://kolosek.com/rails-creating-modals — Nesha Zoric, Feb 06 '18 at 12:39

score 38 · Accepted Answer · edited Jan 14 '16 at 22:14

38

Below is the code if you want to preload the modal on the page in hidden state

<%= link_to "Open modal", "#my-modal", :class => "btn", "data-toggle" => "modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Modal Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

And if you want to load the modal through ajax then you can do something like this

<%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "my-modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">New Post</h3>
  </div>
  <div class="modal-body a-unique-class">
    New Post Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

In posts/new.js.erb you would include

$(".a-unique-class").html('<%= j render "posts/_form" %>')

Make sure that you have a unique id or class for every modal body.

Assuming you want to create a new post using modal form, the controller code and _form.html.erb is in place

edited Jan 14 '16 at 22:14

Jared

1,154
2
17
32

answered Mar 01 '13 at 07:49

benchwarmer

2,764
23
25

Thanks benchwarmer, though it didn't worked. Here is my code <%= link_to "Open modal", page_path, :class => "btn", "data-toggle" => "modal" %> but it still opening the page in new tab – iCyborg Mar 01 '13 at 08:02
1

You want to preload the modal on same page or want to have modal's body loaded through ajax? – benchwarmer Mar 01 '13 at 08:08
I am fine with anything, do note that on that page, there can be 5-6 such inks so I am not sure having 5-6 modals preloaded is a good idea – iCyborg Mar 01 '13 at 08:19
1

I know this post is old, but just a small sintax correction in the code: $(".a-unique-class").html('<%= j render "posts/_form" %> ') – Bruno Siqueira Oct 14 '15 at 12:56
why does this just load the string '<%= j render "posts/_form" %>' into the modal body for me? Is there a config setting I'm missing to let javascript through? – wetjosh Nov 17 '15 at 01:09
Ahh, because I was putting the the posts/new.js.erb file in the assets/javascripts folder. I moved it to the appropriate views folder and it works like a charm. – wetjosh Nov 18 '15 at 18:25
Hi guys, I am not really sure where is the `file.js.erb`located. Can anyone tell me? Or I need to create that file? Note: my rails version 4.2.6 – Fai Zal Dong May 23 '16 at 15:45
You need to create it in your views/posts folder – Orsay Aug 11 '16 at 13:47
2

Shouldn't it be: `<%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "#my-modal" %>` so that the data-target is an unique id? However this solution doesn't seem to work for bootstrap3. You should use the html code in the examples here: https://getbootstrap.com/javascript/#modals – OhDaeSu Jan 10 '17 at 14:29
2

And in the `posts/new.js.erb` it should be `$(".a-unique-class").html('<%= j render "form" %>')`. Then everything will work :). – OhDaeSu Jan 10 '17 at 16:25

score 18 · Answer 2 · answered Apr 21 '14 at 20:24

18

There is a prettier way to add data attributes in Rails. You can do something like this to get the same results.

<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} %>

answered Apr 21 '14 at 20:24

kobaltz

6,980
1
35
52

What's the best way to just load the action view instead of the whole page? this example seems to load the application view and the link_to page. What if I just wanted the edit.html.erb view and nothing else? thanks! – user2012677 Sep 10 '14 at 11:57
I recently did something similar to this where my index action view had several records. Each record has an associated modal with tabs. Each tab rendered a lot of data. Instead of polluting the browser with a bunch of data that may never be seen on that view, I loaded it on demand. Check out the Railscast source code to see how Ryan does it. You can tailor it to your likings. Took what would have been a 500KB footprint down to an initial 15KB. – kobaltz Sep 10 '14 at 12:42
The Railscasts. :) It wasn't a particular episode, but rather the actual Railscasts site. https://github.com/ryanb/railscasts – kobaltz Sep 14 '14 at 03:03

score -2 · Answer 3 · edited Dec 25 '13 at 08:14

-2

There is a syntax error in benchwarmer's answer above.

try this instead:

$(".a-unique-class").html('<%= j render "posts/form" %>')

edited Dec 25 '13 at 08:14

staticVoidMan

19,275
6
69
98

answered Dec 25 '13 at 07:53

Madx

1

3

this should ideally be a comment. also this is just part of an accepted answer so you shouldn't post such answers. you could optionally edit the answer (_but all this is possible only after gaining some reputation_). read [answer] – staticVoidMan Dec 25 '13 at 08:16

How to add bootstrap modal with link_to so the link content open in modal ?

3 Answers3

Linked