为什么这个Rails表单不会通过JavaScript提交？

Question

I am attempted to submit a basic Rails form via JavaScript but it's just not working... I have no idea why. I have set remote to true and have checked that all appropriate files are loaded. Can anyone help?

Here is my form code.. I am using the Ransack search_form_for helper, but I don't think this should have any impact.

<%= search_form_for @q, url: (form_url), id: 'my-form', remote: true, html: {method: :get, :class => 'filter-form'} do |f| %>

Here is my jQuery:

products.js.coffee    
jQuery ->
        $('#my-form').submit();

Have I missed something super obvious here?

Here is the the form tag it's rendering:

<form accept-charset="UTF-8" action="/products" class="filter-form" data-remote="true" id="my-form" method="get">

Here is the server logs when I hit submit:

Started GET "/products?utf8=%E2%9C%93&q%5Bupward_trending%5D=true&q%5Bdownward_trending%5D=&q%5Bseven_days%5D=&q%5Bthirty_days%5D=&q%5Bsix_months%5D=&q%5Btwelve_months%5D=&q%5Ball_time%5D=&q%5Bname_cont%5D=test&q%5Bcategory_id_i
n%5D%5B%5D=1&q%5Bcategory_id_in%5D%5B%5D=3&q%5Bcategory_id_in%5D%5B%5D=4&q%5Bcategory_id_in%5D%5B%5D=6&q%5Bcategory_id_in%5D%5B%5D=7&q%5Bcategory_id_in%5D%5B%5D=8&q%5Bcategory_id_in%5D%5B%5D=9&q%5Bcategory_id_in%5D%5B%5D=10&q%5B
category_id_in%5D%5B%5D=11&q%5Bcategory_id_in%5D%5B%5D=12&q%5Bcategory_id_in%5D%5B%5D=14&q%5Bcategory_id_in%5D%5B%5D=15&q%5Bcategory_id_in%5D%5B%5D=&q%5Bcountry_eq%5D=&q%5Bprice_gbp_gteq%5D=&q%5Bprice_gbp_lteq%5D=&q%5Bstart_date
_gteq%5D=&q%5Bstart_date_lteq%5D=&commit=Filter" for 187.153.50.8 at 2015-02-25 17:41:47 +0000                                                                                                                                      
Processing by ProductsController#index as JS                                                                                                                                                                                        
  Parameters: {"utf8"=>"✓", "q"=>{"upward_trending"=>"true", "downward_trending"=>"", "seven_days"=>"", "thirty_days"=>"", "six_months"=>"", "twelve_months"=>"", "all_time"=>"", "name_cont"=>"test", "category_id_in"=>["1", "3", 
"4", "6", "7", "8", "9", "10", "11", "12", "14", "15", ""], "country_eq"=>"", "price_gbp_gteq"=>"", "price_gbp_lteq"=>"", "start_date_gteq"=>"", "start_date_lteq"=>""}, "commit"=>"Filter"}                                        
  User Load (0.4ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  ORDER BY "users"."id" ASC LIMIT 1                                                                                                                      
  Category Load (0.3ms)  SELECT "categories".* FROM "categories"                                                                                                                                                                    
  Rendered products/_filter.html.erb (370.0ms)                                                                                                                                                                                      
  Product Load (22.8ms)  SELECT  "products".* FROM "products"  WHERE (status > 100) AND "products"."above_revenue_average" = 't' AND (("products"."name" ILIKE '%test%' AND "products"."category_id" IN (1, 3, 4, 6, 7, 8, 9, 10, 11
, 12, 14, 15)))  ORDER BY "products"."end_date" DESC LIMIT 30 OFFSET 0                                                                                                                                                              
  Category Load (0.2ms)  SELECT  "categories".* FROM "categories"  WHERE "categories"."id" = $1 LIMIT 1  [["id", 3]]                                                                                                                
  Category Load (0.2ms)  SELECT  "categories".* FROM "categories"  WHERE "categories"."id" = $1 LIMIT 1  [["id", 11]]                                                                                                               
  Category Load (0.2ms)  SELECT  "categories".* FROM "categories"  WHERE "categories"."id" = $1 LIMIT 1  [["id", 9]]                                                                                                                
  CACHE (0.0ms)  SELECT  "categories".* FROM "categories"  WHERE "categories"."id" = $1 LIMIT 1  [["id", 9]]                                                                                                                        
  Category Load (0.2ms)  SELECT  "categories".* FROM "categories"  WHERE "categories"."id" = $1 LIMIT 1  [["id", 4]]                                                                                                                
   (43.6ms)  SELECT COUNT(*) FROM "products"  WHERE (status > 100) AND "products"."above_revenue_average" = 't' AND (("products"."name" ILIKE '%test%' AND "products"."category_id" IN (1, 3, 4, 6, 7, 8, 9, 10, 11, 12, 14, 15)))  
  Rendered products/index.html.erb within layouts/application (483.3ms)                                                                                                                                                             
  Rendered layouts/_header.html.erb (2.1ms)                                                                                                                                                                                         
  Rendered layouts/_footer.html.erb (0.5ms)                                                                                                                                                                                         
Completed 200 OK in 593ms (Views: 384.2ms | ActiveRecord: 187.1ms)

Answer 1

When you set the form to be remote: true in Rails it AJAXifies the form for you. This means rather than your browser submitting the form AJAX will. By default in Rails, this AJAX request will request a Javascript file to be sent back to the browser. This means your index.html.erb file is NOT getting sent back to the browser. Instead, what is getting sent back is your products.js.coffee.erb file:

jQuery ->
    $('#my-form').submit();

The response has no other data in it. It doesn't have the search results. To fix this, we can use erb inside this file to render the data you want, something like this:

$("<%= j (render '@q') %>").appendTo("my-form");