jquery - (ruby on Rails)服务器数据更新后，如何使用 jquery/ajax 以最快的方式从部分加载/显示特定 div？

Question

为了清楚起见，我将显示所有相关的代码文件以给出问题竞赛/清晰度。我正在使用表单编辑部分特定的 div，并且只想显示新更新的 div。

我在 Scoreboard#show 页面上有这个 div:

<div class="all-schedules"> 
    <%= render 'schedules/schedules' %>
</div>

部分 _schedules.html.erb(带有 @schedules= @scoreboard.schedules.paginate(page: params[:page], per_page: 10) )

 <% @schedules.each do |schedule| %>
      <div class ="schedule-list" id="schedule_<%=schedule.id%>">
         <div class="sched-box-1">
           #various divs here 
           e.g <div class="sched-details"> <%=schedule.detail %></div>
         </div>

         <div class="sched-buttons">
           <span class>
             <%= link_to "Edit", edit_scoreboard_schedule_path(@scoreboard, schedule), remote: true, class: " sched-edit btn btn-primary" %>
           </span>

           <span class> 
             <%= link_to "Del", [@scoreboard, schedule], remote: true, method: :delete, class: " sched-delete btn btn-primary" %>
           </span>
         </div>
      </div> 
    <% end %>

<%= will_paginate @schedules %>

单击编辑按钮后，将触发以下文件(edit.js.erb):

$("#schedule_<%=@schedule.id%>").hide(); #the div being edited is hidden
$("#schedule_<%=@schedule.id%>").after("<%= j render 'scheduleedit'%>"); #this renders the edit form where the div used to be

现在，提交编辑表单后，我想隐藏编辑表单，然后带回包含新数据的 div( schedule_<%=schedule.id%> )。如果我过去使用 .html() 重新加载整个 .all-schedules div ，它会重置分页索引，而且由于分页是 ajax，它会由于 .html( )。我的目标是只影响特定的 #schedule_<%=schedule.id%> div 并将其插入到之前的位置，并停留在该 div 所在的分页页面上。

到目前为止，update.js.erb 文件如下所示:

$("#edit_schedule_<%=@schedule.id%>").hide(); #this successfully hides the edit form 

#code needed here to re-render the `#schedule_<%=schedule.id%>` div 
#without affecting the ajax pagination and staying on the same page in the pagination index

我更愿意使用 .html() 来实现此目的，因为它比 .load() 更快。我不知道是否还有其他方法可以使其像 .html() 一样快。提前致谢。

Answer 1

您可以考虑将一个时间表的内容移至部分时间表中。

时间表/_schedule.html.erb

<div class="schedule-list" id="schedule_<%=schedule.id%>">
   # your content
</div>

Render collection view家长 View 中的时间表:

<div class="all-schedules"> 
  <%= render @schedules %>
</div>

此时，您可以轻松渲染唯一需要重新加载的时间表:

更新.js.erb

$("#schedule_<%=@schedule.id%>").html("<%= j render('schedules', schedule: @schedule) %>")

兄弟，试试吧；)