title: (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?
body: <p>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. </p>
  
  <p><strong>I have this div on the page Scoreboard#show:</strong> </p>
  
  <pre><code>&lt;div class="all-schedules"&gt; 
      &lt;%= render 'schedules/schedules' %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The partial _schedules.html.erb</strong>( with <code>@schedules= @scoreboard.schedules.paginate(page: params[:page], per_page: 10)</code>)</p>
  
  <pre><code> &lt;% @schedules.each do |schedule| %&gt;
        &lt;div class ="schedule-list" id="schedule_&lt;%=schedule.id%&gt;"&gt;
           &lt;div class="sched-box-1"&gt;
             #various divs here 
             e.g &lt;div class="sched-details"&gt; &lt;%=schedule.detail %&gt;&lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div class="sched-buttons"&gt;
             &lt;span class&gt;
               &lt;%= link_to "Edit", edit_scoreboard_schedule_path(@scoreboard, schedule), remote: true, class: " sched-edit btn btn-primary" %&gt;
             &lt;/span&gt;
  
             &lt;span class&gt; 
               &lt;%= link_to "Del", [@scoreboard, schedule], remote: true, method: :delete, class: " sched-delete btn btn-primary" %&gt;
             &lt;/span&gt;
           &lt;/div&gt;
        &lt;/div&gt; 
      &lt;% end %&gt;
  
  &lt;%= will_paginate @schedules %&gt;
  </code></pre>
  
  <p><strong>On the click of the edit button</strong>, the below file(edit.js.erb) is fired: </p>
  
  <pre><code>$("#schedule_&lt;%=@schedule.id%&gt;").hide(); #the div being edited is hidden
  $("#schedule_&lt;%=@schedule.id%&gt;").after("&lt;%= j render 'scheduleedit'%&gt;"); #this renders the edit form where the div used to be
  </code></pre>
  
  <p>Now, what upon submitting the edit form, I want to hide the edit form and then bring back the div(<code>schedule_&lt;%=schedule.id%&gt;</code>) with the  new data. If I use .html() to reload the whole <strong>.all-schedules</strong> 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 
  <code>#schedule_&lt;%=schedule.id%&gt;</code> div and insert it where it was previous and stay on the page of pagination that the div was on. </p>
  
  <p>So far, this is what the update.js.erb file looks like: </p>
  
  <pre><code>$("#edit_schedule_&lt;%=@schedule.id%&gt;").hide(); #this successfully hides the edit form 
  
  #code needed here to re-render the `#schedule_&lt;%=schedule.id%&gt;` div 
  #without affecting the ajax pagination and staying on the same page in the pagination index
  </code></pre>
  
  <p>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. </p>