Shivam Kumar Dodval Shivam Kumar Dodval - 1 year ago 105
Ajax Question

Updating Like Button without Refreshing The Page

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?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download