为什么这个 Rails 表单不能通过 JavaScript 提交？答案

【问题标题】：Why won't this Rails form won't submit via JavaScript?为什么这个 Rails 表单不能通过 JavaScript 提交？
【发布时间】：2015-02-25 17:36:03
【问题描述】：

我试图通过 JavaScript 提交一个基本的 Rails 表单，但它不起作用……我不知道为什么。我已将 remote 设置为 true 并检查是否已加载所有适当的文件。有人可以帮忙吗？

这是我的表单代码。我正在使用 Ransack search_form_for 助手，但我认为这不会有任何影响。

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

这是我的 jQuery：

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

我在这里错过了一些非常明显的东西吗？

这是它呈现的表单标签：

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

这是我点击提交时的服务器日志：

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)

【问题讨论】：

你的服务器日志说什么？
嘿@ThomasO 感谢您的回复，已添加服务器日志.. 对我来说没什么不寻常的。
那么，你想让这段代码做什么？现在你的coffeescript所做的只是通过ajax提交表单，但它实际上并没有呈现任何东西。
嘿@ThomasO 我的计划是像这样提交它，这样我就可以稍微清理一下参数了。如果我取消远程真实设置并按正常提交，表单工作得非常好

标签： javascript jquery ruby-on-rails forms

【解决方案1】：

当您将表单设置为远程：在 Rails 中为 true 时，它会为您 AJAX 化表单。这意味着而不是您的浏览器提交表单 AJAX 将。默认情况下，在 Rails 中，此 AJAX 请求将请求将 Javascript 文件发送回浏览器。这意味着您的 index.html.erb 文件不会被发送回浏览器。相反，返回的是您的 products.js.coffee.erb 文件：

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

响应中没有其他数据。它没有搜索结果。为了解决这个问题，我们可以在这个文件中使用 erb 来渲染你想要的数据，如下所示：

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

【讨论】：