7

这个论坛上的问题似乎都没有解决我的具体需求。基本上，我有一个“详细信息”按钮。我希望它在单击时显示一个模式对话框，其中包含从模型的 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 )

有帮助吗？总菜鸟在这里。

4

2 回答 2

36

我不确定@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" %>

应用程序/视图/布局/_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…&lt;/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>

应用程序/控制器/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

应用程序/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();

应用程序/视图/_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 上使用此代码创建了一个示例书店应用程序。希望这可以帮助。

于 2013-06-19T21:13:27.890 回答
0

“.live”在 jQuery 中已弃用。您是否尝试更换

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

经过

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

干杯

于 2013-05-09T08:30:41.690 回答