如何在提交按钮上触发模态&重定向Rails

How to trigger a modal on submit button & redirect Rails

本文关键字：模态 amp Rails 重定向 提交 按钮      更新时间：2024-06-10

我有一个表单，我希望提交按钮提交表单并重定向，但我希望同时出现一个模式，让用户在应用程序执行任务时等待（大约需要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

为此，我们将在CSS文件中添加两个div id
一个是#内容id，另一个是#加载。

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页面的头部。

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

@supermeA您想在用户单击提交按钮时打开模式弹出窗口吗？然后你想做点什么，然后把数据提交给控制器？

相关文章：