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文件中添加两个div id 一个是 #content ID，第二个是 #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添加到您的html页面中，如下所示

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

现在将以下javascript代码添加到html页面的head部分。

<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你想在用户点击提交按钮时打开模态弹出窗口？那么你想做什么然后将这些数据提交给控制器？

如何触发提交按钮上的模态＆amp;重定向Rails

2 个答案: