(ruby on rails)After an server data update, how to load/display a specific div from a partial in the quickest way with jquery/ajax?

Question

for clarity purposes I will display all the relevant code files to give the question contest/clarity. I am editing specific divs in a partial with a form and want to display the newly updated div only.

I have this div on the page Scoreboard#show:

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

The partial _schedules.html.erb ( with @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 %>

On the click of the edit button , the below file(edit.js.erb) is fired:

$("#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

Now, what upon submitting the edit form, I want to hide the edit form and then bring back the div( schedule_<%=schedule.id%> ) with the new data. If I use .html() to reload the whole .all-schedules div in the past, it resets the pagination index and also since the pagination is ajax, it stops working as a result of .html(). My goal is to only affect the specific #schedule_<%=schedule.id%> div and insert it where it was previous and stay on the page of pagination that the div was on.

So far, this is what the update.js.erb file looks like:

$("#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

I would prefer to use .html() for this as it is faster than .load(). I don't know if there's any other other methods out there to make this just as quick as .html(). Thanks in advance.

Answer 1

You may consider moving out the content of one schedule into a partial.

schedules/_schedule.html.erb

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

Render collection view schedules from parent view:

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

At this point you could easily render the only the schedule you need to reload:

update.js.erb

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

Give it a try bro ;)