在rails 5中没有页面刷新和重定向的模态表单提交

Posted 2023-05-09

【中文标题】在rails 5中没有页面刷新和重定向的模态表单提交

【英文标题】：modal form submit without page refresh and redirect in rails 5

【发布时间】：2020-09-10 22:37:53

【问题描述】：

有谁知道如何在不重定向到 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"><%=@user.mobile_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');

【参考方案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 以确认您需要的实际路由句柄是什么。

【讨论】：

嗨@draganstankovic 感谢您的评论，我提到的路由路径是正确的，因为会话在网络名称空间内。如果我从表单中删除 local: true ，那么它也将不起作用！！。我需要在不重新加载或刷新页面的情况下提交模态表单是否可以将此表单作为 JS 而不是作为 HTML 提交？？

类似：$("#myModal form").trigger('submit.rails') 对你有用吗（如果你在 Rails 5.1+ 上）？