How to show twitter bootstrap modal via JS request in rails?
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"> </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.
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