在Rails 5中，模态表单提交时无需刷新页面和重定向。

Question

有谁知道如何提交这个模态表单而不重定向到update_mobile_number动作，并且不重载视图屏幕？

当我提交表格时，我得到了这个错误

错误

POST http://localhost:3000/web/sessions/update_mobile_number 406 (Not Acceptable)

路线

resources :sessions do
  patch :update_mobile_number, on: :collection
end

otp_screen.html.erb

<p class="text-capitalize font14 mb-4 text-center ">Enter 6 digit OTP recieved on your mobile number <br/> <span id="mobile_number"><%[email protected]_code%> <%= @user.mobile_number%></span> <i class="fa fa-pencil update_mobile_number"></i></p>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Update mobile number</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <%= form_with(url: update_mobile_number_web_sessions_path, :method => "patch", local: true) do |form| %>
          <div></div>
          <div class="field">
            <br><%= form.label "Mobile Code" %>&nbsp;&nbsp;<%= form.select :mobile_code, options_for_select(CountryCode.pluck(:code), @user.mobile_code), { prompt: 'Please select' }, class: 'form-control', required: true %>
          </div>
          <div class="field">
            <br><%= form.label "Mobile Number" %>&nbsp;&nbsp;<%= form.text_field :mobile_number, :value=> @user.mobile_number, class: "form-control", required: true, placeholder: "Mobile Number"%>
          </div>
          <div class="actions">
            <br><%= form.submit "Update", class: "btn btn-primary"%>
          </div>
        <% end %>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
      </div>
    </div>
  </div>
</div>

JS

  $('.update_mobile_number').on('click', function(){
    $('#myModal').modal('show');
  });

控制器

def otp_screen
  @user = User.find_by(id: user_id)
end

def update_mobile_number
  respond_to do |format|
    format.js   
  end
end

update_mobile_number.js.erb。

  $('#myModal').modal('hide');

Answer 1

看来你的代码有一些 "问题"。

1) 如果你不想重载视图，你应该把local:true从。

<%= form_with(url: update_mobile_number_web_sessions_path, :method => "patch", local: true)

2) 也不确定这个: url: update_mobile_number_web_sessions_path 是正确的路径，因为你只是共享。

resources :sessions do
  patch :update_mobile_number, on: :collection
end

如果会话是在一个 :web 语境，那么它可能是好的，但如果这不是你的计划，你可能会尝试一下。update_mobile_number_sessions_path 或更好 rails routes 来确认你所需要的实际途径句柄是什么。