此论坛上的所有问题似乎都没有解决我的具体需求。基本上，我有一个“详细信息”按钮。我希望它在点击时显示一个模态对话框，其中显示了从模型的show.html.erb中提取的信息。 我有一个book.rb模型。在索引页面中我有：
<div class="detail_button"><%= link_to "Details", book %></div>
点击此按钮通常会使用show动作将我带到book / id页面。但我不希望它离开页面，而是我想要一个可以关闭的模态弹出窗口。我在这个论坛上尝试了相关主题的所有jquery和javascript代码，但似乎没有做到这一点。大多数似乎只针对创建或自定义操作。
为了避免重复，我尝试了以下方法，其中没有一个有效：
此：
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 )
任何帮助人？这里的总菜鸟。
答案 0 :(得分：35)
我不确定@events是如何与您的Book模型相关的，但假设我们只是关闭单个模型（正在预订），这是您的代码可以设置的一种方式：
<小时/>
在您遍历@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>
在这个页面上你还应该渲染你的模态/对话框，但它应该有一个隐藏它的类（你稍后会用JS / jQuery来切换它）。我使用了部分来保持代码更加模块化，但你可以直接将模态div放在下面。
<%= render "layouts/modal" %>
<小时/>
这是模型结构的一部分。我使用了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>
<小时/>
如果您的控制器设置了标准脚手架，您只需要将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
<小时/>
正如您恰当地指出的那样，这就是魔术发生的地方，并且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();
<小时/>
这是您在成功的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?' } %>
我在Github上使用此代码创建了一个sample Bookstore application。希望这会有所帮助。
答案 1 :(得分：0)
“。live”在jQuery中已弃用。你有没有尝试替换
$('a[data-popup]').live('click', function(e) ...
通过
$('a[data-popup]').on('click', function(e) ...
干杯