Question

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

我有一个项目列表，比方说，todos。在该列表的底部，我有一个文本字段，我在其中添加新项目到该列表。我想这样做是为了让新项目动态地添加到该列表的底部，而不需要像在聊天窗口中那样刷新整个页面。

我创建了提交表单remote: true并成功提交，但未重新加载页面，但我无法同时将新项目显示在列表底部。我必须刷新页面才能看到更改。

我尝试了一些我在SO上找到的不同方法（这里不乏类似的问题）和网络，甚至是一个名为Sync的宝石，但每个都有自己的错误和问题，我无法得到任何工作正常。他们每个人都可能是自己的问题。所以我要问：是否有一个“配方”肯定会在Rails 4中成功实现这个？

Answer 1

让我们说，现在您有一个用户表单提交，

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

你还有一个控制器，

UsersController

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

def create
  #something
end

用于表格。

你唯一需要的是修改像

这样的功能

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

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

参考：

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

Answer 2

有多种方法可以满足您的要求。我的方法是：

创建对传递表单参数的控制器的AJAX调用
在控制器内部，保存/更新内容然后返回JSON对象
在success函数的AJAX回调中，使用对象值追加列表项/表行

代码可能是这样的：

<强> 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

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

嗯，这只是一个骨架。我更喜欢这样做。（因为我讨厌js.erb方法）

Answer 3

这是 rails 5，希望它会帮助某人（它仍然适用于 rails 4）：

试试这个 ajax 示例：

在“routes.rb”中：

# set the route that ajax can find the path to what controller in backend
get   '/admin/some_great_flow',   to: 'great_control#great_flow'

在“great_control_controller.rb”控制器中：

 # this function in controller will response for ajax's call
 def great_flow
    # We can find some user or getting some data, model here.
    # 'params[:id]' is passed by ajax that we can use it to find something we want.
    @user = User.find(params[:id]) 

    # print whole data on terminal to check it correct.
    puts YAML::dump(@user.id) 

    # transform what you want to json and pass it back.        
    render json: {staff_info: @user } 
end

在“app/views/great_control/index.html.erb”视图中：

<div>
     <label>Staffs</label>
     <%=select_tag(:staff, options_from_collection_for_select(@staffs, :id, :name), id:"staff_id", required: true)%>
</div>
<script>
//every time if option change it will call ajax once to get the backend data.
$("#staff_id").change(function(event) {
    let staff_id = $("#staff_id").val()
    $.ajax({
        // If you want to find url can try this 'localhost:prot/rails/info/routes'
        url: '/admin/some_great_flow', 
        type: 'GET',
        dataType: 'script',
        data: { id: staff_id },
        // we get the controller pass here
        success: function(result) {
             var result = JSON.parse(result);
             console.log(result['staff_info']);
             // use the data from backend for your great javascript.
        },
    });
});
</script>

我为自己写的。

Answer 4

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

中创建一个文件

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

由于

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

4 个答案: