2017-03-24 6 views
0

私は、レールlink_toを使ってポップアップウィンドウを開こうとしていました。しかし残念ながら、私はいくつかの問題にぶつかっています。新しいページに行くと、ポップアップウィンドウは表示されません。レール付きのポップアップウィンドウを開くlink_to

私はレール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> 

どのようにポップアップを表示させることができますを使用?

+0

を入れてみてください'new_project_voucher_voucher_payment_path'ではなく'# 'をリンクとして使用します。あなたはモーダルではなく新しいページにリンクしています。 – nayiaw

+0

ありがとうございます。しかし、これは動作していません。 – thanu

+0

あなたのページにBootstrapのJavaScriptがロードされているかどうかチェックしてください。 [フィドル](https://jsfiddle.net/qvxLcvvy/)で試してみると、それは私のために働く。 – nayiaw

答えて

0

新しいコントローラより良いアプローチ券の支払いとモーダルをポップアップする場合、新しい応答する

アプリ/ビュー/ project_vouchers/show.html.erb JS

<%= 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'); 

アプリ/ビュー/ 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> 

アプリ/コントローラ/ 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 
関連する問題