在Rails中使用Twitter Bootstrap jQuery模式链接到另一个页面 [英] Link to another page using Twitter Bootstrap jquery modal in rails

问题描述

我只希望此模式出现并显示另一个页面的内容，但由于我是Jquery的新手，所以我无法使其工作.有没有一种方法可以修改下面的代码，以便在模式弹出窗口中弹出"/contact/"的内容?

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>

推荐答案

好，所以这里的窍门是其他页面"可能是Rails控制器动作的结果，该动作通常会在单独的URL上呈现该页面，正确的?但是bootstrap假定当您单击链接时，其HTML已存在于当前页面上.

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.

那么如何处理呢?您需要通过AJAX发出控制器请求(link_to ... :remote => true是一个不错的起点)，并更改控制器以使其内容添加到当前页面上某个位置的div上.完成后，上面的代码或类似的代码(或类似Bootstrap页面上记录的内容)将满足您的要求.

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.

添加一个具体示例，以我为例，以引导程序模式打开编辑用户页面(使用Devise gem进行身份验证):

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>

这篇关于在Rails中使用Twitter Bootstrap jQuery模式链接到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！