如何在没有刷新的情况下，在Rails 4中提交表单和更新元素?

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: true and 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.

我将submit表单设置为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(这里有很多类似的问题)和web上找到的不同方法，甚至还有一个叫做Sync的gem，但是它们都有自己的错误和问题，我无法让它们正常工作。每一个都可以是自己的问题。因此，我要问的是:是否有一个“配方”可以确保在Rails 4中成功实现这个功能?

3 个解决方案

#1

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的形式

#2

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

有很多种方法可以做到你所要求的。我的方法是:

Create an AJAX call to the controller that passes the parameters of the form

向传递表单参数的控制器创建AJAX调用
Inside the controller, you save/update things and then return a JSON object

在控制器中，保存/更新内容，然后返回JSON对象
On the success callback of the AJAX function, you append a list item/table row, using the object values

在AJAX函数的成功回调上，使用对象值附加一个列表项/表行

The code could be something like this:

代码可以是这样的:

model.js

model.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

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方法)

#3

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查看更改。对于eg，让我们考虑一个带有操作索引的控制器Mycontroller，并且您正在在索引上提交表单。然后在views 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

谢谢

#1