Link to another page using Twitter Bootstrap jquery modal in rails

Question

I just want this modal to come up and display the contents of another page but i cannot get it to work as I am new to Jquery. Is there a way to modify the code below in order to bring up the contents of '/contact/' in the modal popup?

----------
# this content is on http://myurl.com/contact/
 <div style="display: none;" id="myModal" class="modal hide fade">
 <p>this is my email app here...</p>
</div>
----------
# this is the button on a 'show' page where i want someone to push to bring up the contents of the above page in the modal.
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch Email</a>

Answer 1

OK, so the trick here is that the "other page" is probably a result of a Rails controller action which would normally render the page on a separate URL, right? Yet bootstrap assumes that when you click the link, its HTML exists already on the current page.

So how to handle this? You'll need to make the controller request via AJAX ( link_to ... :remote => true is a good place to start) and change the controller to have its contents added to a div on current the page somewhere. Once that's done, the code you have above, or something like it (or like what is documented on the Bootstrap page) will do what you want.

EDIT: adding specific example, in my case opening the edit user page in a bootstrap modal (using Devise gem for authentication):

app/views/devise/registrations/_edit.html.erb:

<div class="modal hide fade in" id="user-edit">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">x</button>
    <h2>Edit User</h2>
  </div>

  <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:method => :put}) do |f| %>
    <div class="modal-body">
      <%= devise_error_messages! %>

      <div>
        <%= f.label :name %><br/>
        <%= f.text_field :name %>
      </div>

      <div>
         <%= f.label :email %><br/>
        <%= f.email_field :email %>
      </div>

      <div>
        <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br/>
        <%= f.password_field :password, :autocomplete => "off" %>
      </div>

      <div>
        <%= f.label :password_confirmation %><br/>
        <%= f.password_field :password_confirmation %>
      </div>

      <div>
        <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br/>
        <%= f.password_field :current_password %>
      </div>
    </div>

    <div class="modal-footer">
      <%= f.button "Update", :class => "btn btn-primary", :data => { :dismiss => "modal"} %>
      <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
  <% end %>
</div>

app/views/devise/registrations/edit.js.erb:

$("#main").before("<%= escape_javascript(render "edit", :formats => [:html]) %>");
$("#user-edit").modal();

and, the link that invokes it from any page (I have it in the nav now:

<li><%= link_to "Edit Account", edit_user_registration_path, :remote => true %></li>