javascript - Using JQuery to alter html link while doing ajax update

Question

I have what is essentially the equivalent to a "like" button, aka, a link that when you click on it, a message to the server should be sent to increment the counter on the page. Is there a built in widget for this? or is it code your own, i.e. it should basically do this:

• Switch the "Like" link to say "Unlike"
• Increment the counter.
• POST to the server saying the counter should increment.
• If server returns error, unincrement the counter and switch "Unlike" back to like.

Answer 1

You can follow this example fiddle I created just now: http://jsfiddle.net/jxc876/yGCTH/

Pretty simple :

0) setup HTML

<div id="comment-123">This is a comment
    <div class="likeCount">0 likes</div> 
     <a href="#" class="like">+like</a>
    <a href="#" class="dislike">-dislike</a>
</div>

1) Register a function on the link

$('.like').click(doLike);

2) send data off to server

    $.post('/echo/json/', data, callback, 'json');

3) After the server replies, get the new counter, & update the display

function callback(reply) {
    var comment = '#comment-' + reply.commentId;
    $(comment + ' .likeCount').text(reply.likeCount);
    $(comment + ' a').toggle();    
}