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">&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.


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