How to show twitter bootstrap modal via JS request in rails?

Question

I want to show a twitter bootstrap modal as a response to a JS request. My show.js.erb function looks something like this:

$(document).ready(function() {

    $('#dialog').modal('show')

});

Here "dialog" is the modal's id. The modal code itself looks something like this:

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">&times;</a>
          <h3> Showing Modal </h3>
    </div>
    <div class="modal-body">
        I need to show up!
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Done</a>
    </div>
</div>

One thing I am sure of is that the javascript is being called. I can have it alter items on the page. Another thing is that modal is working fine. It shows up just fine when I use an HTML button to trigger the request like this:

<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>

Any idea why the modal doesn't show up on JS request?

Thank You!

score 39 · Accepted Answer · answered Dec 23 '11 at 07:29

39

I had a similar problem, which I solved with a slight twist

My modal div is rendered on the calling page (from a partial) and not by the response of the JS request:

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Loading...</h3>
  </div>
  <div class="modal-body center">
      <%= image_tag "loading.gif" %>
  </div>
  <div class="modal-footer">&nbsp;</div>
</div>

I use this link to rely on rails and Twitter unobtrusive JS:

<%= link_to negotiation.name, negotiation_path(negotiation), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

and my show.js.erb looks like this (shortened)

$('.modal-body').html('<%= escape_javascript(render :partial => 'negotiationdetail', :object => @negotiation) %>');
$('.modal-header').remove(); // don't need a header here

This works fine and has the benefit of showing a "loading" animation to the user while the modal is being populated.

answered Dec 23 '11 at 07:29

Pierre

8,368
4
34
50

9

With Bootstrap2, this link_to worked for me: <%= link_to @country.name, country_path(@country), {:remote => true, 'data-toggle' => 'modal', 'data-target' => "#modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %> – Alex Mar 24 '12 at 19:22
4

nice work gents. Minor point: 'data-keyboard' and 'data-backdrop' are true by default in 2.0, so not really needed unless setting = false. – Foot Aug 09 '12 at 19:34
Thank you very much. This worked for me, too. In rails 3 with bootstrap 2, link_to can be written as: <%= link_to negotiation.name, negotiation_path(negotiation), :class => :btn, :data => { :toggle => :modal, :remote => true, :target => "modal-window" } %> – Surya Jul 19 '13 at 08:19
Can anybody confirm that the above solution also works with Rails 4 and Bootstrap 3? Because for me it doesn't. – Tolsto Feb 14 '14 at 12:01
Remove all "hide" class references from you
if you use Bootstrap 3 instead of 2.
– Tolsto Feb 14 '14 at 13:51
2

This may be obvious to most, but for us noobs out here, the show.js.erb file should be saved in the views folder and not in the assets folder. – wetjosh Nov 18 '15 at 18:23

score 2 · Answer 2 · edited Mar 21 '19 at 18:36

I had this problem and i fixed it by changing the javascript rendering to:

    $("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
    $("#modal-window").modal();

And the modal window to:

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

You can check more detailed explanation here https://kolosek.com/rails-creating-modals

score 0 · Answer 3 · answered Aug 01 '13 at 21:04

This example works very well.

<body>
    <div id="top"> 
       <a tabindex="-1" href="metadata.html" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
    </div>

    <div id="modal" class="modal hide fade in" style="display:none;">
      <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
      <div class="modal-body"></div>
      <div class="model-footer">footer</div>
    </div>

 <script>

  $(document).ready(function() {
     $('#top').find('a').trigger('click');

    });
 </script>
</body>

Best regards.

score 0 · Answer 4 · answered Aug 20 '16 at 10:50

I had this problem,

the cause for me was setting the modal wholly in partial file and put the trigger (button / link) calling the modal from other view file.

So let say that the trigger button is in my index view page and I construct the modal in _form.html.erb file; And I want to create a new record from index page using that modal.

Solution:

create the outermost div which has the "id" in the same file as the trigger

index.html.erb - trigger button

<h3>
  <%= link_to 'Add Category',
    new_todo_path,
    remote: true,
    class: "btn btn-lg btn-success",
    data: {toggle: "modal", target: "#modal_form_category"} 
  %>
</h3>

index.html.erb - outermost of the modal

<div id="modal_form_category" class="modal fade" role="dialog">
</div>

new.js.erb

$(document).ready(function() {
  $("#modal_form_category").html("<%= j render "form" %>");
});

P.S: pardon the new.js.erb I have no absolute reason enclosing the code untill the page is ready. I guess it will work even without the ready function; if you know is it necessary or not please do tell me.

score 0 · Answer 5 · answered Dec 22 '11 at 21:08

That code looks like it should work (I'm doing something similar where I show the modal on document ready).

Check that you're loading the bootstrap-modal.js and make sure it's loading before your custom JS loads. If your custom JS is loading first, you'll see this behavior.

score 0 · Answer 6 · answered Dec 26 '11 at 09:17

0

I have face the same problem and it has been solved as

load the jquery files (for example jquery_171_min.js)
and then load the less js and css and
load the bootstrap-modal.js

try with this sequence.. Hope it works.

answered Dec 26 '11 at 09:17

Anuja P

2,123
2
19
32

score -5 · Answer 7 · answered Dec 16 '11 at 05:10

-5

I am not aware of a jquery "modal" function. It looks like you are trying to get the element#dialog to show up. You could simply do:

$("#dialog").show();

Or am I totally missing the question?

answered Dec 16 '11 at 05:10

andrewpthorp

4,998
8
35
56

1

Thanks although I don't think this is the right answer. It may help to check the modal's brief documentation here: http://twitter.github.com/bootstrap/javascript.html – Yusuf Saber Dec 20 '11 at 02:41

How to show twitter bootstrap modal via JS request in rails?

7 Answers7

Linked