Updating Like Button without Refreshing The Page

Question

Here's my Like button,

<a class="wst-click update_data" wst-href="{% url 'data:like' content.id %}" href="{% url 'data:like' content.id %}" >{{ data.likes.count }} Like</a>

This is what I'm doing for 'Like' functionality,

$('.wst-click').click(function(e){

    e.preventDefault();



    var this_ = $(this);

    var wstURL = this_.attr('wst-href');



    $.ajax({

        url: wstURL,

        method: 'GET',

        data: {},

        success: function (data) {

            $('.update_data').text(data);

        }

    })

});

So, when I press the Like button instead of Returning the number of new Likes, it's returning the raw html code of entire webpage. How can I fix that?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

It's working perfectly alright. I have added dummy example here.

<a class="wst-click update_data" wst-href="data/like/10" href="data/like/10" >11 Like</a>

$('.wst-click').click(function(e){
    e.preventDefault();

    var this_ = $(this);
    var wstURL = this_.attr('wst-href');
    $('.update_data').text('12 Like');

    /*$.ajax({
        url: wstURL,
        method: 'GET',
        success: function (data) {
            var like_text = $(data).find('.update_data').html();
            $('.update_data').html(like_text);
        }
    });*/
});

JSFiddle

Updating Like Button without Refreshing The Page

Sign up