简单的表单不能在提交时关闭模式

Question

我有一个简单的表格，用户可以在其中留言并一键确认付款... 仅确认付款且模态不会关闭。 如果我在我的 :submit 中添加"data-dismiss" => "modal"，则模式已关闭但付款未确认... 我错过了什么？

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Payment confirmation</h4>
      </div>
      <%= simple_form_for(@booking, url: pay_booking_path(@booking), method: :patch, remote: true ) do |f| %>
        <div class="modal-body">
          <h4> Price :  <strong><%= @booking.max_booking_price %>$</strong></h4>
          <div class="motivations">
            <p>Why do you want to make this trip, tell us a bit about you</p>
            <%= f.input :motivation_message, label: false %>
          </div>
        </div>
        <div class="modal-footer">
          <%= f.button :submit, class: "btn btn-primary" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

如果我这样做，它会关闭但付款不起作用

 <div class="modal-footer" >
     <%= f.button :submit, class: "btn btn-primary", "data-dismiss"="modal"%>
 </div>

编辑

我也在尝试用一些 js 来修复它，但我对此并不满意：这就是我尝试过的......

<script>
$('.btn').on("click", function(event) {
    event.preventDefault();
    $('#myModal').modal( 'hide' );
});
</script>

Answer 1

尝试更改 data-dismiss="modal" 以匹配模型的 ID，即 data-dismiss="myModal"。未测试。