Rails: частичное обновление по нажатию кнопки

Question

Я только недавно создал систему голосования, в которой голосование повышается каждый раз, когда пользователь нажимает кнопку голосования для сообщения, и в то же время счетчик, который отслеживает количество голосов, сделанных пользователем.Кнопка голосования обновляет только ту часть HTML-кода, поэтому без обновления всей страницы номер подсчета голосов изменяется, но счетчик количества голосов не изменяется, пока не обновится вся страница.Как я могу сделать так, чтобы оба обновляли только свою часть при нажатии кнопки голосования?Просто не уверен, с чего начать.Спасибо!

HTML для голосования

<div class='Counter'>
<span class='CounterNum'><span id='<%= micropost.id%>'><%=micropost.votes_for %></span></span>
<div class='<%=micropost.id %>'>
<a href="/microposts/<%=micropost.id %>/vote_up" data-remote='true' class='CounterButton b2'>
<span id="CounterIcon" class="<%=micropost.id%>"></span>
</a>
</div>
</div>

HTML для суммы голосования

<li class='fst'><a class='ProfileLikes' href="/"><%=@user.vote_count(:up) %><span class='ProfileStatText'>Likes</span></a></li>

Vote_up.Js

$("#<%=@micropost.id%>").html('<%="#{@micropost.votes_for}"%>');
$(".<%=@micropost.id%>").html('<a href="/microposts/<%=@micropost.id%>/unvote" data-remote="true" class="SquekCounterButton b3 <%=@micropost.id%>"><span id="SquekCounterIcon" class="<%=@micropost.id%>"></span></a>');

Answer 1

Руководство по jQuery API для запроса AJAX можно посмотреть здесь: http://api.jquery.com/jQuery.ajax/

Там много информации, поэтому я дам вам некоторый код для начала:

 $(document).ready(function(){
      $('a.CounterButton').click(function(event){
           event.preventDefault(); //This will prevent the link from navigating

           $.ajax({
                url: $(this).attr('href'), //This pulls the URL from the HREF of the link
                dataType: 'json', //This tells the AJAX request we're expecting JSON 
                success: function(response){
                     console.log(response); //Output the response to console
                     //Maybe something like:
                     $('#' + response.ID ).text(response.Likes);
                },
                error: function(jqXHR, textStatus, errorThrown){
                     alert('An error occured!');
                }
           )};
      });
 });