Rails 3.2 显示动作的模态弹出窗口

Posted 2023-05-09

【中文标题】Rails 3.2 显示动作的模态弹出窗口

【英文标题】：Rails 3.2 Modal popup on show action

【发布时间】：2013-05-03 08:06:14

【问题描述】：

这个论坛上的问题似乎都没有解决我的具体需求。基本上，我有一个“详细信息”按钮。我希望它在单击时显示一个模式对话框，其中包含从模型的 show.html.erb 中提取的信息。 我有一个 book.rb 模型。在我的索引页面中：

<div class="detail_button"><%= link_to "Details", book %></div>

单击此按钮通常会将我带到 book/id 页面，使用 show 操作。但我不希望它离开页面，而是想要一个可以关闭的模式弹出窗口。我已经尝试了这个论坛中相关主题的所有 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 )

有帮助吗？这里的菜鸟。

【问题讨论】：

第一个代码示例看起来应该可以工作。当您单击第一个示例的链接时会发生什么？请务必使用 Google Chrome、Firebug 等调试 JavaScript。

【参考方案1】：

我不确定@events 与您的 Book 模型有何关系，但假设我们只是使用单个模型（即 Book），这是设置代码的一种方式：

---

app/views/books/index.html.erb

您在哪里迭代 @books 并包含指向“查看详细信息”的链接，远程：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" %>

---

app/views/layouts/_modal.html.erb

这是模型结构的一部分。我使用了 Twitter Bootstrap 的版本，它具有预定义的样式以及一些不错的动画触发器。

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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

如果你的控制器是用标准脚手架设置的，你只需要将 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

正如您所说的那样，这就是神奇发生的地方，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

您可以在此处为成功的 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。希望这会有所帮助。

【讨论】：

很棒的教程！谢谢。一个小的更正，_book.html.erb 部分应该在视图/书籍中。

很棒的教程。非常感谢！

很好的例子。谢谢。

您好，我刚刚尝试了您的代码。我有“缺少模板书/节目”。事实上，模板展示现在是部分的。似乎应用程序忽略了我的控制器中的 js 渲染。

我收到一个错误，“安装 json (1.8.0) 时出错，Bundler 无法继续。”从下载的 git 项目中进行“捆绑安装”时。

【参考方案2】：

".live" 在 jQuery 中已弃用。你有没有尝试替换

$('a[data-popup]').live('click', function(e) ...

通过

$('a[data-popup]').on('click', function(e) ...

干杯

【讨论】：

对不起，我有点困惑。您粘贴的两个代码相同

对不起，复制/粘贴错误...我编辑我的答案（将 .live 替换为 .on）