javascript - 通过 javascript 进行部分更新

Question

我在 Ruby on Rails 中冒险了一段时间，但从未对 js 做过任何事情。我在互联网上搜索了一些教程，但没有一个符合我的要求。

我有一个 Rails 应用程序，在一个 View 中我有两个部分，一个表单，另一个显示由表单创建的任务列表。我希望当单击提交按钮时，部分列表会使用新创建的任务进行更新，同时保留之前创建的其他任务。

谁有更好的链接来帮助我？或者给我一点时间解释一下？

编辑:

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

_to_do_list.html.erb(使用部分表单，它应该更新下面的表单，按下按钮子表单时列出。)

<%= form_for @todo_list, remote: true do |f| %>
....
<div class="field">
      <%= f.label :name%><br />
      <%= f.text_field :name %>
    </div>
    <div class="field">
      <%= f.label :description %><br />
      <%= f.text_area :description %>
    </div>

    <div class="field">
      <%= f.label 'Público?'%>
      <%= f.check_box :is_public %>
    </div>

    <div class="actions">
      <%= f.submit %>
    </div>
    <div id= "show_list"> 
      <%= render 'show'  %> 
    </div>

并且，部分显示，未更改，必须更新:

<table id="list" border="1" >
  <tr>
    <th>Name</th>
    <th>Description</th>
    <th>is public?</th>
    <th>Add Tasks</th>
    <th>erase List</th>
  </tr>
  <% @todo_lists.each do |f|%>
  <tr>
    <td><%=f.name %></td>
    <td><%=f.description%></td>
    <td><%=f.is_public  %></td>
    <td><%= link_to new_task_path :method => :get %></td>
    <td> <%= link_to 'Destroy', f, confirm: 'Are you sure?', method: :delete%></td>
  </tr>
  <% end %>
</table>

并且，新的 js 文件:

$("#todos").html('<%=j render partial: "to_do_lists/show", locals: { todo_lists: @todo_list } %>');

Controller :

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
        format.js{}
        format.html { redirect_to @todo_list, notice: 'Lista ' +@todo_list.name+ ' foi criada com sucesso!' }
        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

其想法是在表中创建一个新行，并在不离开页面的情况下创建新任务。

谢谢。

编辑

Answer 1

您需要的是AJAX 。如果你查看文档，它会说

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>

它应该在你的表单之外

在您的创建操作中，您需要有一个respond_to block

def create
  @todo = Todo.new(todo_params)
  respond_to do |format| 
    if @todo.save
      format.js{}  # this will allow rails to look for create.js.erb in your views/controller directory where you can use your js to render your partial or append newly created todo
    else
      format.html{render "new"}
    end
  end
end

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

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

或

不必再次渲染整个部分，只需通过 js 将新创建的待办事项附加到表中

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

这里您的 _todo.html.erb 将包含

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

详情请查看Working with javascript in rails

更新

如果你看看你的部分，你就会发现

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

将 Controller 方法更改为:

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

关闭表单后还渲染您的部分内容。在表单中显示待办事项没有意义