如何在 Rails 的 Bootstrap 模式中呈现表单？答案

【问题标题】：How to render form in Bootstrap modal in Rails?如何在 Rails 的 Bootstrap 模式中呈现表单？
【发布时间】：2016-01-06 03:19:39
【问题描述】：

我在我的 Rails 应用程序中使用引导模式。我现在的代码：

索引页面：

    <button type="button" class="btn btn-primary" data-amount="30" data-toggle="modal" data-target=".bs-example-modal-sm">Process Payment</button>

    <%= render 'point_transactions/payment'%>

Jquery Bootstrap 模态：

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})

我的表单正在处理 Braintree 付款

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <%=form_for point_transactions_path, url: point_transactions_path do |f| %>
        <div id="payment-form"></div>
        <br>
          <%=f .submit 'Submit', class: 'btn btn-success btn-lg' %>
            <%end%>
    </div>
  </div>
</div>

<script>
  braintree.setup('____', "dropin", {
    container: "payment-form"
  });
</script>

每次加载索引页面时，我都会渲染付款表单。如果我单击按钮，jQuery 模态将弹出表单。

如何在用户单击按钮后呈现表单 - 我猜它会在 jQuery 中？
我的按钮包括 data-amount="30"。如何通过 jQuery 将参数数据量传递给我的控制器？

感谢您的帮助。

【问题讨论】：

您可以做到，但请告诉我们您从哪里渲染form？您打算将请求发送回服务器并获取form 视图然后进行渲染？
目前我的控制器中没有任何新内容，我正在索引页面中呈现表单，并且 def 索引带有支付令牌。我认为这不是正确的方法，但我的目的是尽可能快地加载弹出表单。我尝试将其重定向到弹出的新页面，但速度很慢。
关于 Ruby on rails 的想法不多，但我可以建议您为此使用 ajax..

标签： jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

作为回答您的第二个问题的尝试，我假设您希望将值 30 返回到您的控制器。如果是这种情况，您可以将其作为查询参数添加到您的 url。

form_for point_transactions_path, url: point_transactions_path(amount: 30) do |f|

回到您的控制器中，您可以像这样访问它

params[:amount]  #=> 30

【讨论】：

谢谢，但我的意图是拥有更多按钮，每个按钮都应该携带不同的参数，这些参数应该传递给控制器。知道怎么做吗？

【解决方案2】：

问题通过以下方式解决：

jQuery:

$(document).on("click", ".open-AddPointDialog", function () {

     var myPoint = $(this).data('points');
     $(".modal-body #point_transaction_points").val( myPoint );
});

HTML 弹出式表单

<div class="modal fade" id="addPointDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body">
          <%=form_for @point_transaction , url: point_transactions_path do |f| %>
            <div id="payment-form"></div>
            <br>
             <%= f.hidden_field :points %>
          <%= f.submit 'Submit', class: 'btn btn-success btn-lg' %>
          <%end%>
        </div>
    </div>
  </div>
</div>

按钮

<a data-toggle="modal" data-points="30" class="open-AddPointDialog btn btn-success big" href="#addPointDialog"><i class="fa fa-hand-o-right hided-icon big"></i> Buy Points </a>

【讨论】：