Jquery Rails 3.2显示动作时的模式弹出窗口

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

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

这是：

$('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 )

有人帮忙吗？这里的noob总数。

jQuery中不推荐使用“.live”。你有没有试着替换

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

借

---

干杯

我不确定@events与您的图书模型有何关联，但假设我们只是脱离一个模型（即图书），这是设置代码的一种方法：

---

app/views/books/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>

---

app/views/books/show.js.erb 正如您恰当地指出的，这就是神奇发生的地方，AJAX响应被发送到您的页面。使用jQuery，我设置了一些变量，并用@book呈现的HTML替换模式模板中的HTML（它来自必须创建的名为_book.HTML.erb的部分）

$modal=$（'.modal'），
$modalBody=$（'.modal.modal body'），
$modalHeading=$（'.modal.modal heading'）；
$modalHeading.html（“”）；
$modalBody.html（“”）；
$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上使用此代码创建了一个。希望这能有所帮助。

第一个代码示例看起来应该可以工作。单击第一个示例的链接时会发生什么？一定要用Google Chrome、Firebug等调试JavaScript。很抱歉，我有点困惑。您粘贴的两个代码都是sameI抱歉，复制/粘贴错误。。。我编辑我的答案（replace.liveby.on）非常棒的教程！谢谢一个小的修正是，_book.html.erb部分应该在views/books.mazing教程中。谢谢！很好的例子。谢谢。你好，我刚试过你的密码。我有“丢失的模板书/展览”。事实上，模板展示现在只是一部分。应用程序似乎忽略了我控制器中的js呈现。当从下载的git项目中执行“bundle安装”时，我收到一个错误，“安装json（1.8.0）时出错，Bundler无法继续”。

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

<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>

<%= render "layouts/modal" %>

<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>

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

$modal = $('.modal'),
$modalBody = $('.modal .modal-body'),
$modalHeading = $('.modal .modal-heading');
$modalHeading.html("<%= @book.title %>");
$modalBody.html("<%= escape_javascript(render @book) %>");
$modal.modal();

<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?' } %>