Ajax in Rails 5 throw "ActionController::UnknownFormat " error - ruby-on-rails

Question

I am trying to implement a search method that will automaticaly populate a form through the use of Ajax.
I have a simple_form_form that is feed with a collection of Client instance. Once I select a client, a js code submit the form and then goes to the corresponded controller method.
This part is working, but when the code hits the Client#search it stops at my "respond_to |format|" line. Stating that this is an unknown format.
I looked differents stackover posts, but I could'nt find any concrete answers.
Thanks,
here is the code:
My error:
error messages
routes.rb
Rails.application.routes.draw do
class OnlyAjaxRequest
def matches?(request)
request.xhr?
# raise
end
end
get 'search', to: 'invoices#search', as: 'search', constraint: OnlyAjaxRequest.new
end
formSubmit.js
let clientOption = document.querySelector('#search_client');
const form = document.querySelector('.search');
clientOption.addEventListener('change', (event) => {
form.submit();
})
Client Controller:
def search
if params[:search]
#client_found = Client.find(params[:search][:client]) if Client.find(params[:search][:client]).present?
respond_to do |format|
#format.html {}
format.js { render :search}
end
end
end
Search.js.erb
console.log('hello');
$('#ajx-cli').html("<%= escape_javascript(render partial: 'invoices/invoice_new_partial/find_client')%>");
Client Selection Form
<%= simple_form_for :search, url: search_path, remote: true, method: :get, html: { id: :find_cli } do |f| %>
<%= f.input :client, label:"Sélectionnez un client", collection: #my_clients, label_method: :company_name, value_method: :id, include_blank: true, as: :select %>
<% end %>
Updated Form
<div id='ajx-cli'>
<%= f.fields_for :client do |client| %>
<%= render partial: "invoices/invoice_new_partial/oneoff_client",locals: {f: client, client_found: #client_found} %>
<% end %>
</div>
Also, my search action seems to be processed as html instead of js.
Logs terminal
Started GET "/search?utf8=%E2%9C%93&search%5Bclient%5D=176" for ::1 at 2020-10-17 14:15:07 +0200
Processing by InvoicesController#search as HTML
Parameters: {"utf8"=>"✓", "search"=>{"client"=>"176"}}
User Load (0.5ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 92], ["LIMIT", 1]]
↳ /Users/utilisateur/.rvm/gems/ruby-2.6.3/gems/activerecord-5.2.3/lib/active_record/log_subscriber.rb:98
Invoice Exists (0.7ms) SELECT 1 AS one FROM "invoices" WHERE (due_date < '2020-10-17') AND "invoices"."status" != $1 LIMIT $2 [["status", 3], ["LIMIT", 1]]
↳ app/controllers/application_controller.rb:32
Invoice Update All (0.9ms) UPDATE "invoices" SET "status" = 4 WHERE (due_date < '2020-10-17') AND "invoices"."status" != $1 [["status", 3]]
↳ app/controllers/application_controller.rb:34
Client Load (0.2ms) SELECT "clients".* FROM "clients" WHERE "clients"."id" = $1 LIMIT $2 [["id", 176], ["LIMIT", 1]]
↳ app/controllers/invoices_controller.rb:56
CACHE Client Load (0.0ms) SELECT "clients".* FROM "clients" WHERE "clients"."id" = $1 LIMIT $2 [["id", 176], ["LIMIT", 1]]
↳ app/controllers/invoices_controller.rb:56
Completed 406 Not Acceptable in 9ms (ActiveRecord: 2.3ms)
ActionController::UnknownFormat (ActionController::UnknownFormat):
app/controllers/invoices_controller.rb:58:in `search'
EDIT
Trying to force format didn't work either. My request was correctly processed as JS, so I didn't have the same error, but my search.js.erb was rendered instead of being executed.
New Invoice#search
def search
if params[:search]
#client_found = Client.find(params[:search][:client]) if Client.find(params[:search][:client]).present?
respond_to do |format|
format.js { render layout: false, content_type: 'text/javascript'}
end
end
New Client Selection Form
<%= simple_form_for :search, url: search_path(format: :js), remote: true, method: :get, html: { id: :find_cli } do |f| %>
<%= render partial: "invoices/invoice_new_partial/client_selection",locals: {my_clients: #my_clients, f: f, client_found: #client_found} %>
<% end %>
Logs:
Started GET "/search.js?utf8=%E2%9C%93&search%5Bclient%5D=178" for ::1 at 2020-10-17 19:19:43 +0200
Processing by InvoicesController#search as JS
Parameters: {"utf8"=>"✓", "search"=>{"client"=>"178"}}
User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 92], ["LIMIT", 1]]
↳ /Users/utilisateur/.rvm/gems/ruby-2.6.3/gems/activerecord-5.2.3/lib/active_record/log_subscriber.rb:98
Invoice Exists (0.6ms) SELECT 1 AS one FROM "invoices" WHERE (due_date < '2020-10-17') AND "invoices"."status" != $1 LIMIT $2 [["status", 3], ["LIMIT", 1]]
↳ app/controllers/application_controller.rb:32
Invoice Update All (6.5ms) UPDATE "invoices" SET "status" = 4 WHERE (due_date < '2020-10-17') AND "invoices"."status" != $1 [["status", 3]]
↳ app/controllers/application_controller.rb:34
Client Load (0.3ms) SELECT "clients".* FROM "clients" WHERE "clients"."id" = $1 LIMIT $2 [["id", 178], ["LIMIT", 1]]
↳ app/controllers/invoices_controller.rb:56
CACHE Client Load (0.1ms) SELECT "clients".* FROM "clients" WHERE "clients"."id" = $1 LIMIT $2 [["id", 178], ["LIMIT", 1]]
↳ app/controllers/invoices_controller.rb:56
Rendering invoices/search.js.erb
Rendered invoices/invoice_new_partial/_find_client.html.erb (0.5ms)
Rendered invoices/search.js.erb (2.2ms)
Completed 200 OK in 24ms (Views: 5.6ms | ActiveRecord: 7.9ms)

Answer 1

I couldn't wrapped my mind around why my js.erb was rendered as a plain text, instead of being executed, so I started over.
I updated my form Submit.js and it worked like a charm.
New routes.rb
post 'search', to: 'invoices#search', as: 'search'
New Client Selection form
<%= simple_form_for :search, remote: true, html: { id: :find_cli } do |f| %>
<%= render partial: "invoices/invoice_new_partial/client_selection",locals: {my_clients: #my_clients, f: f, client_found: #client_found} %>
<% end %>
New formSubmit.js
let clientOption = document.querySelector('#search_client');
const form = document.querySelector('.search');
clientOption.addEventListener('change', (event) => {
let selector = document.querySelector('#search_client')
let client = selector.options[selector.selectedIndex].value;
Rails.ajax({
type: "post",
url: `/search?utf8=✓&search%5Bclient%5D=${client}`,
headers: {
accept: '*/*',
'X-CSRF-Token': Rails.csrfToken()
}
});
});