jquery – Rails 3.2模式弹出show动作

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

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

解决方法

我不确定@events是如何与你的Book模型相关的,但假设我们只是关闭一个模型(作为Book),这是你的代码可以设置的一种方式：

应用程序/视图/书籍/ index.html.erb

在迭代@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" %>

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

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

应用程序/视图/书籍/ 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上使用此代码创建了一个 sample Bookstore application.希望这可以帮助.

jquery – Rails 3.2模式弹出show动作

解决方法

相关文章