导轨上显示的行动3.2模式弹出(Rails 3.2 Modal popup on show acti

2019-09-02 07:55发布

对这个论坛的问题,没有人可以解决我的具体需求。 基本上,我有一个“详细信息”按钮。 我想它,它点击时,一个模式对话框显示了从模型的绘制show.html.erb信息。 我有一个book.rb模型。 在索引页,我有:

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

通常单击此按钮会带我的书/ 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 )

任何帮助的家伙? 总小白在这里。

Answer 1:

我不知道如何@events涉及您的图书模式,但假设我们只是要落单的模型(即书),这是你的代码可以设立一个方法:


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

当您遍历@books,包括与远程链接“查看详情”:真正的设置为启用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的引导的版本,其中有预定义的造型,以及一些漂亮的动画触发器。

<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,我设置了一些变量,并通过@book(它来自一个部分,你必须创建一个名为_book.html.erb)呈现替代HTML中的模态模板。

$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上的代码。 希望这可以帮助。



Answer 2:

“.live”在jQuery的弃用。 你有没有尝试更换

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

通过

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

干杯



文章来源: Rails 3.2 Modal popup on show action