modal form submit without page refresh and redirect in rails 5

Question

Does anyone know how to submit this modal form without redirect to update_mobile_number action and without reload view screen?

I got this error while I submitting the form

error

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

Routes

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');
  });

Controller

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

It seems like there are a few 'issues' with your code.

1) If you do not want to reload view you should remove local:true from:

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

2) Also not sure if this: url: update_mobile_number_web_sessions_path is the right path since you only shared:

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

If session is within a :web context then it is probably fine but if that was not your plan, you might wanna try update_mobile_number_sessions_path or better - run rails routes to confirm what is the actual route handle you need.