送信ボタンでモーダルをトリガーしてRailsをリダイレクトする方法

Question

フォームがあり、送信ボタンでフォームを送信してリダイレクトしたいが、同時にモーダルを表示して、それはものですか（約35秒かかります）。どのように提出ボタンを提出してモーダルを呼び出すことができますか？

<%= form_for @tenant, url: wizard_path, method: :put, validate: true do |f| %> 
    Blah...Blah... 
    <div class="actions"> 
    <%= f.submit "Submit Report Information" data-toggle="modal" data-target="#pleaseWaitDialog" %> 
    <!---Waiting Modal---> 
    <div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"> 
     <div class="modal-header"> 
      <h1>Processing...<small>May take up to 1 minute</small></h1> 
     </div> 
     <div class="modal-body"> 
      <div class="progress progress-striped active"> 
       <div class="bar" style="width: 100%;"></div> 
      </div> 
     </div> 
    </div> 
    </div> 
<% end %> 

これは私のコントローラですが（邪悪な宝石）ステップコントローラですが、これはフォームプロセスの最後のステップです。

class Tenants::ReportStepsController < ApplicationController 
    include Wicked::Wizard 
    before_filter :authenticate_tenant! 


    steps :basic_info, :bill_input, :upsell_input, :report_pay, :bank_trans, :confirm_info 

    def show 
    @tenant = current_tenant 
    @tenant.build_bill if @tenant.bill.blank? 
    ... 
    @tenant.build_upsell if @tenant.upsell.blank? 
    ... 
    end 
    @tenant.build_transaction if @tenant.transaction.blank? 
    render_wizard 
    end 

def update 
    ... 
end 

private 

    def finish_wizard_path 
    @tenant = current_tenant 
    @tenant.build_report if @tenant.report.blank? 
    @tenant.build_api_aggregation if @tenant.api_aggregation.blank? 
    @tenant.api_aggregation.save 
    @tenant.report.save 
    GetTransactionsWorker.perform_in(6.minutes, @tenant.id.to_s) 
    TransAggregationWorker.perform_in(7.minutes, @tenant.id.to_s) 
    <!---I assume calling the modal in the controller would happen here ----> 
    tenants_dashboard_path 
    end 

Answer 1

このため、CSSファイルに2つのdiv idを追加します。
1つは#content idで、2番目は#loadingです。

div#content { 
    display: none; 
} 


div#loading { 
top: 200 px; 
margin: auto; 
position: absolute; 
z-index: 1000; 
width: 160px; 
height: 24px; 
background: url(loadingimage.gif) no-repeat; 
cursor: wait; 
} 

loadingimage.gifが続く

<div id="loading"></div> 
    <div id="content">your html content here......</div> 

今のheadセクションに次のJavaScriptコードを追加すると表示ローディングアニメーション今

は、あなたのHTMLページにこれらのdivのidを追加することを任意の画像とすることができますあなたのHTMLページ。

<script type="text/javascript">// <![CDATA[ 
    function preloader(){ 
     document.getElementById("loading").style.display = "none"; 
     document.getElementById("content").style.display = "block"; 
    }//preloader 
    window.onload = preloader; 
// ]]></script> 

Answer 2

@supermeA [送信]ボタンをクリックしたときにモーダルポップアップを開きますか？あなたは何かをしてからそのデータをコントローラーに提出したいのですか？