通过javascript进行部分更新

我尝试RubyonRails有一段时间了，但从来没有用js做过任何事情。我在网上搜索了一些教程，但没有找到我想要的

我有一个rails应用程序，在一个视图中，我有两个部分，一个是表单，另一个是显示表单创建的任务列表。我希望在单击submit按钮时，使用新创建的任务更新部分列表，同时保留以前创建的其他任务

谁有更好的链接来帮助我？还是给我一点时间解释

编辑：

在以下答案的帮助下，我将代码更改为：

_to_do_list.html.erb（对于部分表单，它应该更新下面的表单，当按下按钮子表单时，列表。）

其思想是在表中创建新行，创建新任务时不离开页面

多谢各位

编辑

您需要的是。如果你看文件，上面写着

JavaScript还可以向服务器发出请求，并解析响应。它还能够更新页面上的信息。结合这两种功能，JavaScript编写器可以生成一个只更新自身部分内容的网页，而无需从服务器获取完整的页面数据。这是一种强大的技术，我们称之为Ajax。

为此，您首先需要将表单更改为具有

remote:true

选项，该选项基本上允许js提交表单值。您的表单将看起来像

<%= form_for @todo_list, remote: true do |f| %>
  ...
  // form fields
<% end %>

<div id= "some-id"> // to target this div to render your partial from js
  <%= render 'show'  %>  // it doesn't make sense to have your partial inside form and 
</div>

在create.js.erb模板中，使用js渲染部分或附加新创建的项

$("#some-id").html("<%=j render "show" %>");

将控制器方法更改为：

def create
  @todo_list = ToDoList.new(params[:to_do_list])
  @todo_list.member_id = current_member.id
  respond_to do |format|
    if @todo_list.save
      @todo_lists = ToDoList.all // get a collection of todos to render in your partial
      format.js{}
      format.html { redirect_to @todo_list, notice: 'Lista ' +@todo_list.name+ ' foi criada com sucess!' }
      format.json { render json: @todo_list, status: :created, location: @todo_list }
    else
      format.html { render action: "new" }
      format.json { render json: @todo_list.errors, status: :unprocessable_entity }
    end
  end
end

在create.js.erb文件中

$("#show_list").html('<%=j render partial: "to_do_lists/show", locals: { todo_lists: @todo_lists } %>'); //You don't have an element with id = todos. You have it with show_lists so change that

$（“#显示列表”）.html（“”）//您没有id为todos的元素。你有它的显示列表，所以改变它

在关闭表单后，也要呈现部分内容。在表单中显示待办事项是没有意义的

我希望当单击提交按钮时，部分列表是 使用新创建的任务进行更新，同时保留其他任务 以前创建的。

这确实可以通过

ajax

--

Ajax

基本上是一种从JS向后端发送伪请求的方法

由于您是Rails新手，让我解释一下它是无状态的。（这构成了大多数使用HTTP协议构建的应用程序）将每个请求视为“新的”——不存储任何个性化的详细信息以供每次使用

这意味着，如果希望在不重新加载页面的情况下向Rails发送请求，则需要发送和接收数据，并将其附加到已加载的页面。这就是Ajax所做的

--

导轨

你的问题相对简单

您需要执行以下操作：

#app/views/todo_lists/create.js.erb
$("#todos").html('<%=j render partial: "todo_lists/your_partial", locals: { todo_lists: @todo_lists }" %>');

使用ajax将表单数据发送到Rails

在Rails后端，捕获事件，执行功能并响应

在前端，“倾听”响应并附加到页面

有很多方法可以实现这一点。为了简单起见，我将详细介绍实现它的最直接的方法（此方法使用）：

这将允许您调用以下命令：

#app/views/todo_lists/create.js.erb
$("#todos").html('<%=j render partial: "todo_lists/your_partial", locals: { todo_lists: @todo_lists }" %>');

#app/views/todo_list/create.js.erb
$（“#todos”）.html（'如果不查看您的html和对您正在尝试做的事情的更详细描述，我们真的无法提供具体帮助。像“如何，通常我做X？”这样的概念性问题比像这样的问题更难回答，并且确保答案符合目标“这是我的HTML，我正在尝试实现Y？我将如何实现？”。听起来你在问：“我如何使用Javascript操作页面中的DOM元素？”。这对于StackOverflow来说太宽泛了。请让你的问题更加具体。好的，我会编辑。谢谢。检查是否包含实际生成的HTML（浏览器看到的内容-您可以通过相关网页上的视图/源代码获得）而不是Rails模板，那么我们这些了解HTML和javascript的人（潜在帮助者的大量受众）可以帮助您，而不仅仅是那些了解Rails模板的人（受众要小得多）应该是调用我的第一个partial _to _do_列表中的partial的div的id？出于某种原因，不更新列表：（对不起，它应该是包含该表的元素的ID。是否要我为您添加代码？我使用收到的提示编辑了我的原始帖子，并将一个div放在这个div js.erb文件中引用的部分列表中。请添加代码，不知道为什么，但它不会更新列表：（.谢谢您的帮助非常有用，谢谢！我们成功地让它工作了：d出于某种原因，您的解决方案还向我返回了500次浏览器检查，而不是对列表的部分更新：（.我正在尝试解决你的解决方案，上面的朋友似乎是最好的解决方案。@Amancio这不是整个解决方案。我只是给了你一个关于ajax如何工作的演示。你能编辑你的问题并发布你尝试过的内容吗？是的，当然，我会编辑。如果你想让喜欢git的人也去那里。但基本上我是按照建议去做的。@Amancio阅读以更好地了解ajax的工作原理：）
$("#some-id").html("<%=j render "show" %>");

$("#table-id").append("<%=j render partial: "todo", locals: {f: @todo} %>");

<tr>
  <td><%=f.name %></td>
  <td><%=f.description%></td>
  <td><%=f.is_public  %></td>
</tr>

<table id="list" border="1" >
  <% @todo_lists.each do |f|%> // your @todo_lists is a collection of todos 
    <tr>
      <td><%=f.name %></td>
      <td><%=f.description%></td>
      <td><%= link_to new_task_path %></td> // you don't need to specify method here link_to by default uses a get request
      <td> <%= link_to 'Destroy', f, confirm: 'Are you sure?', method: :delete%></td>
    </tr>
  <% end %>
</table>

def create
  @todo_list = ToDoList.new(params[:to_do_list])
  @todo_list.member_id = current_member.id
  respond_to do |format|
    if @todo_list.save
      @todo_lists = ToDoList.all // get a collection of todos to render in your partial
      format.js{}
      format.html { redirect_to @todo_list, notice: 'Lista ' +@todo_list.name+ ' foi criada com sucess!' }
      format.json { render json: @todo_list, status: :created, location: @todo_list }
    else
      format.html { render action: "new" }
      format.json { render json: @todo_list.errors, status: :unprocessable_entity }
    end
  end
end

$("#show_list").html('<%=j render partial: "to_do_lists/show", locals: { todo_lists: @todo_lists } %>'); //You don't have an element with id = todos. You have it with show_lists so change that

#app/views/todo_lists/new.html.erb
<%= form_for(@todo_list), remote: true do |f| %>

#app/controllers/todo_lists_controller.rb
Class TodoListsController < ApplicationController
   def create
      @todo_list = TodoList.new(todo_params)
      @todo.save

      respond_to do |format|
         format.js #-> loads /views/todo_lists/create.js.erb
         format.html
      end
   end
end

#app/views/todo_lists/create.js.erb
$("#todos").html('<%=j render partial: "todo_lists/your_partial", locals: { todo_lists: @todo_lists }" %>');