使用 rails link_to 打开弹出窗口答案

【问题标题】：open popup window with rails link_to使用 rails link_to 打开弹出窗口
【发布时间】：2017-03-24 05:52:27
【问题描述】：

我试图使用 rails link_to 打开一个弹出窗口。但不幸的是，我遇到了一些问题。当我转到新页面时，没有显示弹出窗口。

我使用的是 Rails 2.3.2

show.html.erb

<%= link_to "new payment", new_project_voucher_voucher_payment_path(@project, @voucher ), "data-toggle" => "modal", "data-target" => "#new_voucher_payment" %>

new.html.erb

<div id ="new_voucher_payment" class="modal fade"  role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Confirmation</h4>
        <p>hello!!!!!!!!!!!!!!!!!</p>

      </div>
    </div>
  </div>
</div>

如何让弹出窗口出现？

【问题讨论】：

尝试把'#'作为链接而不是new_project_voucher_voucher_payment_path。您正在链接到新页面而不是模式。
谢谢。但这不起作用。
以防万一，您是否仔细检查过 Bootstrap 的 JavaScript 是否已加载到您的页面中？在fiddle 中尝试过，它对我有用。
您将上述代码放在同一页面中。它也适用于我。但我希望上面的代码在不同的视图页面中。如何处理不同的页面路径和 div id？

标签： javascript ruby-on-rails

【解决方案1】：

如果你想弹出一个带有凭证支付的模式，新控制器更好的方法是响应 new as js

app/views/project_vouchers/show.html.erb

<%= link_to "new payment", new_project_voucher_voucher_payment_path(@project, @voucher ) remote: true do %>
....
<div class="modal fade" id="new_voucher_payment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

app/views/project_vouchers/voucher_payments.js.erb

$("#new_voucher_payment").html("<%=j render 'voucher_payment', object: @voucher_payments %>");
$('#new_voucher_payment').modal('show');

app/views/project_vouchers/_voucher_payment_form.html.erb

  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
      <h4 class="modal-title">Confirmation</h4>
      <p>hello!!!!!!!!!!!!!!!!!</p>
      # your code comes here  
     </div>
   </div>
 </div>

app/controllers/voucher_payments_controller.rb

class VoucherPaymentsController < ApplicationController
  ....
  def new
    ....
    respond_to do |format|
      format.html {
        # write the code for html response
      }
      format.js {
       @voucher_payments
      }
    end
  end
  ....
end

【讨论】：