Rails: Partial Refreshing on button click

Question

I just recently made a voting system that has a vote tallier for each time a user clicks on the vote button for a post and at the same time a counter that tracks the amount of votes the user made. The vote button refresh only that part of the HTML so without the whole page refreshing the vote tally number changes but the counter of vote amounts doesn't change unless the whole page is refreshed. How can I make it so that both with refresh only their part when the vote button is clicked upon? Just not sure where to start. Thank you!

HTML for Vote

<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 for Vote Amount

<li class='fst'><a class='ProfileLikes' href="/"><%[email protected]_count(:up) %><span class='ProfileStatText'>Likes</span></a></li>

Vote_up.Js

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

So you said it's working for the one part already? Please show the javascript so far. — Ben Lee
– Ben Lee, Commented Feb 25, 2012 at 3:26
Why not make an AJAX request and pull back JSON data with data elements for what ever data points you need. There is no need to redraw entire sections of the page if you only want to update the text in two different spots. — Nick Bork
– Nick Bork, Commented Feb 25, 2012 at 3:50
@Splash-X Quite embarassed to ask but I am noobish with jQuery can you start me off with this? — Kellogs
– Kellogs, Commented Feb 25, 2012 at 4:05

Nick Bork · Accepted Answer · 2012-02-25 04:21:36Z

The jQuery API Guide for an AJAX request can be seen here: http://api.jquery.com/jQuery.ajax/

There is a lot of information there so I'll give you some code to get you started:

 $(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!');
                }
           )};
      });
 });

Collectives™ on Stack Overflow

Rails: Partial Refreshing on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related