jQuery Rails 3.2 显示动作的模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16451758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails 3.2 Modal popup on show action
提问by Shikasan
None of the questions on this forum seem to address my specific need. Basically, I have a "Details" button. I want it that when it clicks, a modal dialog shows up with information drawn from the show.html.erb of the model. I have a book.rb model. In the index page I have:
本论坛上的所有问题似乎都无法满足我的特定需求。基本上，我有一个“详细信息”按钮。我希望当它点击时，会出现一个模式对话框，其中包含从模型的 show.html.erb 中提取的信息。我有一个 book.rb 模型。在索引页面中，我有：
<div class="detail_button"><%= link_to "Details", book %></div>
Clicking this button normally would take me to the book/id page, using the show action. But I don't want it to leave the page, rather I want a modal popup which can be closed. I've tried all the jquery and javascript code on related topics in this forum but none seem to do the trick. Most seem to be addressed to only create or custom actions.
单击此按钮通常会使用 show 操作将我带到 book/id 页面。但我不希望它离开页面，而是想要一个可以关闭的模式弹出窗口。我已经尝试了本论坛相关主题的所有 jquery 和 javascript 代码，但似乎没有一个能成功。大多数似乎只针对创建或自定义操作。
Just to avoid any repeats, I have tried the following, none of which worked:
为了避免任何重复，我尝试了以下方法，但都没有奏效：
This:
这个：
You could look at modal dialogs by www.jqueryui.com. Add jquery ui to your application.
Put a hidden div (display:none) in your layout page.
<div class="modal" style="display:none;">
</div>
Your link should be an ajax link:
<%= link_to 'Link', events_path(@event), :remote => true %>
Your controller should accept ajax response:
def show
@event = Event.find(params[:id])
respond_to do |format|
format.js
end
end
This is where the magic happens. After pressing the link via ajax, your show.js file will insert content into your empty hidden div and display the popup. Your views should have a javascript file: /view/events/show.js.erb
$('.modal').html(<%= escape_javascript(render(@event)) %>); //inserts content into your empty div.
$('.modal').dialog(); //jquery ui will open it as a modal popup
This:
这个：
$('a[data-popup]').live('click', function(e) {
window.open($(this).attr('href'));
e.preventDefault();
});
And this:
和这个：
$('a[data-popup]').live('click', function(e) { window.open($(this).attr('href')); e.preventDefault(); });
= link_to( 'Create a new company', new_company_path, 'data-popup' => true )
Any help guys? Total noob here.
任何帮助家伙？这里完全是菜鸟。
回答by Web Guy Ian
I'm not sure how @events relates to your Book model, but assuming we're just going off a single model (being Book), this is one way your code could be set up:
我不确定 @events 与您的 Book 模型有何关联，但假设我们只是使用一个模型（即 Book），这是您可以设置代码的一种方式：
app/views/books/index.html.erb
应用程序/视图/书籍/index.html.erb
Where you iterate through @books and include the link to 'View Details' with the remote: true set to enable AJAX.
遍历@books 并包含指向“查看详细信息”的链接的位置，将 remote:true 设置为启用 AJAX。
<table>
<% @books.each do |book| %>
<tr>
<td><%= book.title %></td>
<td><%= book.author %></td>
<td><%= number_to_currency(book.price) %></td>
<td><%= link_to 'View Details', book, remote: true %></td>
</tr>
<% end %>
</table>
On this page you should also render your modal/dialog box, but it should have a class on it that keeps it hidden (you'll later toggle this with JS/jQuery). I used a partial to keep the code more modular but you could just put the modal divs directly underneath.
在这个页面上，你还应该呈现你的模式/对话框，但它应该有一个隐藏它的类（你稍后会用 JS/jQuery 切换它）。我使用了部分来保持代码更加模块化，但您可以将模态 div 直接放在下面。
<%= render "layouts/modal" %>
app/views/layouts/_modal.html.erb
应用程序/视图/布局/_modal.html.erb
This is a partial with the structure of the model. I used Twitter Bootstrap's version, which has predefined styling as well as some nice animation triggers.
这是模型结构的一部分。我使用了 Twitter Bootstrap 的版本，它具有预定义的样式以及一些不错的动画触发器。
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-heading">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
app/controllers/books_controller.rb
应用程序/控制器/books_controller.rb
If your controller is set up with the standard scaffold, you only need to add format.js to the respond_to block of the show action. This will automatically render a file named show.js.erb (which you have to manually create) when that action is triggered.
如果您的控制器设置了标准脚手架，则只需将 format.js 添加到 show 操作的 respond_to 块中。当该操作被触发时，这将自动呈现一个名为 show.js.erb 的文件（您必须手动创建）。
def show
@book = Book.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.js # show.js.erb
format.json { render json: @book }
end
end
app/views/books/show.js.erb
应用程序/视图/书籍/show.js.erb
As you aptly stated, this is where the magic happens and the AJAX response is sent to your page. Using jQuery, I'm setting some variables and replacing the HTML in the modal template with that rendered by @book (which comes from a partial you have to create named _book.html.erb).
正如您恰如其分地指出的那样，这就是魔术发生的地方，并且 AJAX 响应被发送到您的页面。使用 jQuery，我正在设置一些变量并将模态模板中的 HTML 替换为由 @book 呈现的 HTML（来自您必须创建的名为 _book.html.erb 的部分）。
$modal = $('.modal'),
$modalBody = $('.modal .modal-body'),
$modalHeading = $('.modal .modal-heading');
$modalHeading.html("<%= @book.title %>");
$modalBody.html("<%= escape_javascript(render @book) %>");
$modal.modal();
app/views/_book.html.erb
应用程序/视图/_book.html.erb
This is where you create the template for what will go inside the modal on the successful AJAX response.
您可以在此处为成功的 AJAX 响应中的模态内部创建模板。
<p><b>Title:</b> <%= @book.title %></p>
<p><b>Author:</b> <%= @book.author %></p>
<p><b>Price:</b> <%= number_to_currency(@book.price) %></p>
<p><b>Description:</b> <%= @book.description %></p>
<p><b>Publisher:</b> <%= @book.publisher %></p>
<p><b><%= @book.style %></b> <%= @book.number_of_pages %> pages</p>
<p><b>ISBN:</b><%= @book.ISBN %></p>
<%= link_to 'Edit', edit_book_path(@book) %> |
<%= link_to 'Show', @book %> |
<%= link_to 'Remove', @book, method: :delete, data: { confirm: 'Are you sure?' } %>
I created a sample Bookstore applicationusing this code on Github. Hope this helps.
我在 Github 上使用此代码创建了一个示例 Bookstore 应用程序。希望这可以帮助。
回答by phron
".live" is deprecated in jQuery. Did you try to replace
“.live”在 jQuery 中已被弃用。你有没有尝试更换
$('a[data-popup]').live('click', function(e) ...
by
经过
$('a[data-popup]').on('click', function(e) ...
Cheers
干杯
