【问题标题】:Twitter Bootstrap Modal submit button to submit and open modal in RailsTwitter Bootstrap 模态提交按钮,用于在 Rails 中提交和打开模态
【发布时间】:2013-06-23 22:14:41
【问题描述】:

我有以下 Twitter Bootstrap 模态按钮 (haml) - 我想使用此按钮保存我的表单,然后打开模态对话框询问我是否要打印它。如何使此按钮执行提交或保存:

%a.btn{"data-toggle" => "modal", :href => "#myModal", 
  class: 'btn btn-inverse btn-large',
  :role => "button"} Press to Complete Visit

  #myModal.modal.hide.fade{"aria-hidden" => "true",
 "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

【问题讨论】:

    标签: ruby-on-rails twitter-bootstrap modal-dialog


    【解决方案1】:

    您应该做一个 AJAX 发布并有一个端点来接收数据。

    HTML:

    %a.btn{class: 'btn btn-inverse btn-large',
      id: 'submit-btn',
      :role => "button"} Press to Complete Visit
    
      #myModal.modal.hide.fade{"aria-hidden" => "true",
      "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
    

    Javascript:

    $('#submit-btn').click(function() { 
      $.ajax({
        type: post,
        url: '/your-end-point',
        data: your_data,
        success: function() {
          $('#myModal').show();
        }
      })
    })
    

    导轨:

    routes.rb

    post 'your_end_point' => 'your_controller#submit'
    

    your_controller.rb

    def submit
      # Save form data...
      render :json => 'success'
    end
    

    【讨论】:

    • 看起来很完美,但我遇到了数据问题。我在想我必须渲染一个 json 对象,但我不知道该怎么做
    • 我已经用一些 Rails 代码示例编辑了我的答案。希望现在对你来说更清楚了。
    猜你喜欢
    • 2020-11-02
    • 2013-04-15
    • 2019-02-02
    • 2021-08-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-12
    相关资源
    最近更新 更多