表演动作时出现Rails 3.2 Modal弹出窗口 [英] Rails 3.2 Modal popup on show action
问题描述
该论坛上的所有问题似乎都无法满足我的特定需求.基本上，我有一个详细信息"按钮.我希望单击它时，出现一个模态对话框，其中包含从模型的show.html.erb中提取的信息. 我有一个book.rb模型.在索引页面中，我有:
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:
<div class="detail_button"><%= link_to "Details", book %></div>
通常，单击该按钮将使用show动作将我带到书/id页.但是我不想让它离开页面，而是想要一个可以关闭的模式弹出窗口.我已经尝试过该论坛中相关主题上的所有jquery和javascript代码，但似乎没有一个可行的方法.多数似乎只针对创建或自定义操作.
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.
为了避免重复，我尝试了以下方法，但没有一个起作用:
Just to avoid any repeats, I have tried the following, none of which worked:
此:
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
此:
$('a[data-popup]').live('click', function(e) {
window.open($(this).attr('href'));
e.preventDefault();
});
这:
$('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.
推荐答案
我不确定@events与您的Book模型有什么关系，但是假设我们只使用一种模型(即Book)，这就是一个例子您的代码设置方式:
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:
在@books进行迭代的地方，并在遥控器上包含指向查看详细信息"的链接:true设置为启用AJAX.
Where you iterate through @books and include the link to 'View Details' with the remote: true set to enable 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>
在此页面上，您还应该呈现模态/对话框，但是它上应该有一个使它隐藏的类(您稍后将使用JS/jQuery对其进行切换).我使用了部分代码来保持代码的模块化，但是您可以将模式div直接放在其下面.
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.
<%= render "layouts/modal" %>
这是模型结构的一部分.我使用了Twitter Bootstrap的版本，该版本具有预定义的样式以及一些不错的动画触发器.
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.
<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>
如果您的控制器设置有标准支架，则只需将format.js添加到show action的response_to块中.触发该操作后，它将自动呈现一个名为show.js.erb的文件(您必须手动创建).
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.
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
正如您恰当地指出的，这就是魔术发生的地方，并且AJAX响应被发送到您的页面.使用jQuery，我设置了一些变量，并将模式模板中的HTML替换为@book渲染的HTML(来自必须创建名为_book.html.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).
$modal = $('.modal'),
$modalBody = $('.modal .modal-body'),
$modalHeading = $('.modal .modal-heading');
$modalHeading.html("<%= @book.title %>");
$modalBody.html("<%= escape_javascript(render @book) %>");
$modal.modal();
在这里，您将为成功的AJAX响应上的模态中的内容创建模板.
This is where you create the template for what will go inside the modal on the successful AJAX response.
<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?' } %>
我使用此代码在Github上创建了示例书店应用.希望这会有所帮助.
I created a sample Bookstore application using this code on Github. Hope this helps.
这篇关于表演动作时出现Rails 3.2 Modal弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
