javascript 如何在不刷新的情况下在页面上提交表单和更新元素，在 Rails 4 中

How to submit form and update element on the page without refresh, in Rails 4

提问by San Diago

I'm having a lot of trouble trying to do something that I imagine would be fairly simple.

我在尝试做一些我认为相当简单的事情时遇到了很多麻烦。

I have a list of items, let's say, todos. At the bottom of that list I have a text field where I add new items to that list. I want to make it so that the new items are added to the bottom of that list dynamically, without a full page refresh, like in a chat window.

我有一个项目清单，比如说，待办事项。在该列表的底部，我有一个文本字段，我可以在其中向该列表添加新项目。我想让它动态地将新项目添加到该列表的底部，而不像在聊天窗口中那样刷新整页。

I made the submit form remote: trueand it successfully submits without reloading the page, but I can't get the new item to appear at the bottom of the list at the same time. I have to refresh the page to see the changes.

我制作了提交表单remote: true，它在不重新加载页面的情况下成功提交，但我无法同时让新项目出现在列表底部。我必须刷新页面才能看到更改。

I tried a few different approaches I found on SO (there's no shortage of similar questions here) and the web, and even a gem called Sync, but each of them had errors and problems of their own and I couldn't get any to work properly. Each of them could be its own SO question. So instead I ask: Is there a "recipe" that is sure to successfully implement this in Rails 4?

我尝试了在 SO（这里不乏类似问题）和网络上找到的几种不同方法，甚至还有一个名为 Sync 的 gem，但每个方法都有自己的错误和问题，我无法解决任何问题适当地。他们每个人都可以是它自己的 SO 问题。所以我问：是否有一个“食谱”可以确保在 Rails 4 中成功实现这一点？

回答by Chuanpin Zhu

let's say, now you have a user form to submit,

比方说，现在你有一个用户表单要提交，

<%=form_for @user,remote: true%><%end%>

And you also have a controller,

你还有一个控制器，

UsersController

In your controller, you have a function,

在您的控制器中，您有一个功能，

def create
  #something
end

which is for the form.

这是表格。

the only thing you need is to modify the function like

您唯一需要做的就是修改函数，例如

def create
  #something
  respond_to do |format|
    format.js
    format.html
  end
end

then in your view side, under directory of view/users/ , create a create.js file, in the file, you can do the js action, like get the new record, and append the new record to the users list.

然后在您的视图端，在 view/users/ 目录下，创建一个 create.js 文件，在该文件中，您可以执行 js 操作，例如获取新记录，并将新记录附加到用户列表中。

reference:

参考：

http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for

http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for

回答by MurifoX

There are various ways to do what you are asking. My approach would be:

有多种方法可以完成您的要求。我的方法是：

• Create an AJAXcall to the controller that passes the parameters of the form

• Inside the controller, you save/update things and then return a JSONobject

• On the successcallback of the AJAXfunction, you append a list item/table row, using the object values

• 创建对AJAX传递表单参数的控制器的调用

• 在控制器内部，您保存/更新内容，然后返回一个JSON对象

• 在函数的success回调中AJAX，您使用对象值附加一个列表项/表行

The code could be something like this:

代码可能是这样的：

model.js

模型.js

$(function() {
  $("#submit_button").on("click", function(event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "your_controller_url",
      data: "your_form_data"
      success: function(result) {
        // Append the result to a table or list, $("list").append(result)
      },
    });
  });
});

controller.rb

控制器文件

def your_action
  # Do your stuff
  # return JSON to the ajax call
end

Well, this is just a skeleton. I prefer doing things this way. (Because i hate the js.erb approach)

好吧，这只是一个骨架。我更喜欢以这种方式做事。（因为我讨厌 js.erb 方法）

回答by Paritosh Singh

You can see the changes using javascript. For eg lets consider a controller Mycontroller with action index and you are submitting form on index. Then create a file in views my_controller/index.js.erb

您可以使用 javascript 查看更改。例如，让我们考虑一个带有动作索引的控制器 Mycontroller 并且您正在提交表单上的索引。然后在视图中创建一个文件 my_controller/index.js.erb

To reflect changes use javascript in this template. Definately remote sends the ajax call, so to see the changes you need some manipulation using javascript.

要反映更改，请在此模板中使用 javascript。肯定是远程发送 ajax 调用，因此要查看更改，您需要使用 javascript 进行一些操作。

Thanks

谢谢