I have a voting page, where user can vote up and down a restaurant. It triggers an ajax call to update the votes in database. Meanwhile a jquery snippet takes care of updating the vote count on the page. It works alright. But the code is tedious.

<tr>
   <td class="<%= up_arrow_class %>"
     id='<%= "uparrow#{mrs.id}" %>' 
     onclick="changeVote('up', <%= mrs.id %>)">
   </td>
   <td rowspan="3" class="restname">
     <%= mrs.restaurant.name %>
   </td>
</tr>
<tr>
  <td class="votenumber" id='<%="vnumber#{mrs.id}"%>'>
    <%= vote_count %>
  </td>
</tr>
<tr>
  <td class="<%= down_arrow_class %>"
    id='<%= "downarrow#{mrs.id}" %>' 
    onclick="changeVote('down', <%= mrs.id %>)">
  </td>
</tr>

As shown in the code snippet, in order to let JQuery know which restaurant's vote needs to be updated, each restaurant has to have 3 ids - one for upvote, one for downvote and one for the vote numbers.

Once user clicks on the up/down button, an ajax call issued:

$.ajax({
    url: url,
    type: "GET",
    data: {
      uid: uid, 
      mrs_id: mrs_id, 
      vote: vote, 
      id: id
    },
	datatype: "json",
      success: function(data, textStatus, xhr){
        if (data) {
          var counts = Number($("#vnumber" + mrs_id).html());
          if (vote == 'up') {
            counts++;
            voteUp(mrs_id);
          }
          else {
            counts--;
            voteDown(mrs_id);
          }
          $("#vnumber"+mrs_id).html(counts);
        }                
        else {
          alert("Something went wrong. Please contact your admin")
        }
        });

Element's id's repeatedly shown everywhere. Return of ajax call updates the page based on the id.

It seems to have much redundancy and in order to clean that up, we're going to refactor that to a partial view. The idea is that instead of using JQuery to update the votes, each time when user click an up/down button, the partial view gets refreshed. Given the size of the transmitting data, the extra loading time is almost unnoticeable. JQuery is off the hook to modify the html elements and id won't be needed any more. The ajax call return changed
to:

$.ajax({
    url: url,
    type: "GET",
    data: {
      uid: uid, 
      mrs_id: mrs_id, 
      vote: vote, 
      id: id
    },
	datatype: "json",
      success: function(data, textStatus, xhr){
 		$("#restaurant_table").html(data)
      },
  });

partial view html code is simpler too because of removing ids. One more gain is that since ajax call refresh the partial view, the list is automatically resorted to the latest order based on most recent vote.

I had thought that using JQuery to update a page is always better than refreshing the page. The reality is that depends. In this example, when partial view is small enough, it's simpler to refresh that view page than try to update the page with jquery.