Rails form submission not happening in the background - ruby-on-rails

Question

I have a Rails 5.2 app, where I'm using form_with, which is generating this HTML:
<form id="post-0" class="" action="/posts.js" accept-charset="UTF-8" data-remote="true" method="post">
The form is submitting successfully to the PostController's create action.
def create
#post = current_user.account.posts.new(post_params)
respond_to do |format|
if #post.save
format.html { redirect_to posts_path, notice: 'Post added.' }
format.js { render :create, status: :created }
else
format.html { render :index }
format.js { render :create, status: :unprocessable_entity }
end
end
end
It is then rendering the JS view:
app/views/posts/create.js.erb
alert('created');
However, in my browser, I'm literally redirected to http://localhost:3000/posts.js where it shows the javascript code. Meaning, the form submit doesn't seem to be happening in the background.
I would have expected to still have stayed on the page the form was on, with a Javascript Alert appearing saying "created".
Is there's something silly I've missed? Seems to me it must be something with form_with that I'm not doing right.
I tried swapping it for form_for #post, remote: true, format: :js do ... but that had the same problem.
At this point, I can't tell if the problem is in View that shows the form, or in the Controller's create action. The controller is rendering create.js.erb and the URL shown is http://localhost:3000/posts.js which does seem to suggest it's a Form problem in the View.
This app is Rails 5.2. I'm not sure it's relevant, but I've removed the Asset Pipeline for Webpacker, I do have rails-ujs installed (as it is showing the confirm dialog in these link_to links as expected <%= link_to('Destroy', user, method: :delete, data: { confirm: 'Are you sure?' }) %>

Answer 1

Form submissions can occur locally (ie. not remote) due to a number of reasons.
Some common reasons local submission may be occurring when using form_with include:
local: true
The local attribute is optional for form_with. If not provided, form_with will by default set local: false.
true will set the form to be submitted locally (standard form submission), not remote/asynchronously.
false will set the form to be submitted remotely/asynchronously.
Any value other than false (including :false which is a symbol not a boolean) will be interpreted as the value being true (ie. submit locally).
Javascript triggered form submissions
Despite the setting of the local attribute being set to something that should trigger a remote/asynchronous form submission, the form may still be submitting locally if you're triggering the form submit event via Javascript.
In the example given in question, the HTML generated by the form_with use is as expected, so attributes provided to form_with are not the problem in this instance.
If javascript is being used to submit the form, that could be the problem. For example, even with data-remote="true" on the form, this javascript will be a problem:
document.getElementById('form-0').submit();
This submits the form, but doesn't raise a submit event for rails-ujs to intercept via an onsubmit event handler.
Working with the Rails Unobtrusive Javascript Adapter
To have the form submission triggered by javascript (whether you're using jQuery, Stimulus JS, or anything else) you need to use a mechanism that rails-ujs (or jquery-ujs) will intercept for you.
Rails provides the Rails.fire custom javascript event wrapper in rails-ujs, which can by used like this:
Rails.fire(document.getElementById('form-0'), 'submit');

Answer 2

You're doing a very basic mistake. By using ajax you can't use format.js. This Ruby Module is used to redirect the page. instead you should be using render json: { status: 200}

Answer 3

saw your job on Upwork. No need to spend $100 on this!
<%= form_with url: content_export_path, method: :post, id: 'ce_form1', data: { remote: true } %>
Look where the remote: true declaration is... (inside data hash)
Let me know if this works.