Question

在Ruby on Rails应用程序中，我做了一个简单的表单（form_for）以提交文本。但是我想在同一页面上显示更新的文本，所以我使用remote: true（以Ajax的形式提交）。如果我输入text_area并单击“提交”按钮，则效果很好。

但是，我想稍作调整，将onkeyup: 'submitIt()'事件设置为text_area并将表单下方的function submitIt()定义为JQuery（$('#form-id').submit()）。这次是在每次输入键之后提交表单，但它以[text / html]提交，并且不再响应动作update.js.erb。尽管它确实会更新文本，因为它可以在控制器中进行动作更新，但它并没有以我想要的方式响应渲染视图。这完全违背了这个目的，我非常沮丧地阅读stackoverflow和ruby rails博客，无济于事。

有人有什么建议吗？

我的表单：

<%= form_for @product, remote: true, html: {id: 'edit-form'} do |f| %>
<ul class="errors"> </ul>

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
<%= f.label :price %>
<%= f.text_field :price, onkeyup: 'submitIt()' %>

<%= f.submit %>

<% end %>

<script>
function submitIt() {
    $("#edit-form").submit();
}
</script>

现在我将脚本更改为此：

<script>
function submitIt() {
    let valuesToSubmit = $('#edit-form').serialize();
    $.ajax({
        type: 'POST',
        url: $('#edit-form').attr('action'),
        data: valuesToSubmit,
        dataType: "JSON"
    }).success(function(json){
        console.log("success", json);
    });

}
</script>

当我键入并查看服务器时，请求是Ajax（JSON），产品更改已提交，并使用200OK呈现update.js.erb，（它不会将成功消息输出到控制台虽然）。而且视图中没有任何变化。如果单击“提交”按钮，则它会经历相同的顺序（服务器日志与我输入的相同），但实际上会更改视图。为什么？

这是我的打字行为的服务器日志：

Started PATCH "/products/1" for 127.0.0.1 at 2019-01-20 11:23:59 +0100
Processing by ProductsController#update as JSON
  Parameters: {"utf8"=>"✓", "product"=>{"name"=>"Nintendo", "price"=>"203"}, "authenticity_token"=>"vKsD9PcUN0DPLoWn44sYHZ6Fo0iB32u5nXyEmEw/WrYfiUC4qpKxTHWupdT8iMzHF5ji4CbWwVh7FrkxNJMFKQ==", "id"=>"1"}
  Product Load (2.4ms)  SELECT  "products".* FROM "products" WHERE "products"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/products_controller.rb:21
   (1.1ms)  begin transaction
  ↳ app/controllers/products_controller.rb:22
  Product Update (18.6ms)  UPDATE "products" SET "price" = ?, "updated_at" = ? WHERE "products"."id" = ?  [["price", 203.0], ["updated_at", "2019-01-20 10:23:59.220778"], ["id", 1]]
  ↳ app/controllers/products_controller.rb:22
   (105.2ms)  commit transaction
  ↳ app/controllers/products_controller.rb:22
  Rendering products/update.js.erb
  Product Load (10.1ms)  SELECT "products".* FROM "products"
  ↳ app/views/products/_index.html.erb:1
  Rendered products/_index.html.erb (134.5ms)
  Rendered products/update.js.erb (161.3ms)
Completed 200 OK in 494ms (Views: 196.0ms | ActiveRecord: 137.5ms)

这是我单击按钮的地方：

Started PATCH "/products/1" for 127.0.0.1 at 2019-01-20 11:22:46 +0100
Processing by ProductsController#update as JS
  Parameters: {"utf8"=>"✓", "product"=>{"name"=>"Nintendo", "price"=>"20"}, "authenticity_token"=>"vKsD9PcUN0DPLoWn44sYHZ6Fo0iB32u5nXyEmEw/WrYfiUC4qpKxTHWupdT8iMzHF5ji4CbWwVh7FrkxNJMFKQ==", "commit"=>"Update Product", "id"=>"1"}
  Product Load (2.1ms)  SELECT  "products".* FROM "products" WHERE "products"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/products_controller.rb:21
   (1.2ms)  begin transaction
  ↳ app/controllers/products_controller.rb:22
   (1.1ms)  commit transaction
  ↳ app/controllers/products_controller.rb:22
  Rendering products/update.js.erb
  Product Load (2.5ms)  SELECT "products".* FROM "products"
  ↳ app/views/products/_index.html.erb:1
  Rendered products/_index.html.erb (135.0ms)
  Rendered products/update.js.erb (161.0ms)
Completed 200 OK in 321ms (Views: 197.0ms | ActiveRecord: 6.8ms)

它们是相同的。

现在，我要检查草稿应用程序，“提交”按钮可用于创建新产品，但无法呈现更新操作的正确视图。很奇怪。服务器日志中唯一不同的是PATCH和POST请求。

宝石文件：

...
ruby '2.5.1'
gem 'rails', '~> 5.2.2'
gem 'jquery-rails'
...

我将此添加到application.js

//= require jquery

Answer 1

问题在于，rails-ujs会触发不同的提交，因此一种解决方案是触发默认行为https://github.com/rails/rails/issues/29546#issuecomment-313572043

<script>
function submitIt() {
   var editForm = $("#edit-form")[0];
   Rails.fire(editForm, 'submit');
}
</script>

具有onkeyup事件的text_area发送ajax请求并进行渲染，但视图未更改

1 个答案: