[Answer]-Handling a meta request with Ajax in Django

by

1👍

✅

The way to do this is do apply progressive development – make non-js work, and then on top of that make enhancements using ajax or whatever other client technologies you want.

Django request has is_ajax (docs) method which is very useful for progressive development. The idea is that when the request is non-ajax, do whatever you did before, however if it is ajax, return the like counter so that js can update the page:

def like_page(request):
    if 'id' in request.GET:
        id = request.GET['id']
        car = Cars.objects.get(id=id)
        car.likes += 1
        car.save()

    if not request.is_ajax():
        if 'HTTP_REFERER' in request.META:
            return HttpResponseRedirect(request.META['HTTP_REFERER'])
        else:
            return HttpResponseRedirect('/')
    else:
        data = {
            'likes': car.likes
        }
        json_data = json.dumps(data)
        return HttpResponse(json_data, content_type='application/json')

Please note that this returns json data back. This is very useful because it is easily extensible in the future in case you have to return additional information.

Now for the js/jquery stuff:

Template

<a id="car_like" href="/like/?id={{ car.id }}" >
    # of likes: 
    <span id="car_like_count">{{ car.likes }}</a>
</a>

JS

$(document).ready(function () {
    $('#car_like').click(function(event) {
        event.preventDefault();
        var car_like = $(this),
            url = car_like.attr('href');
        $.getJSON(url, function(data) {
            $('#car_like_count', car_like).html(data.likes);
        });
        return false;
    });
});

This will overwrite the default behavior of the like anchor, and will send ajax request. Ajax request will return a new like counter for the car, which js will display in place of the old number. However if for some reason js is not supported, the default action will happen and the like anchor will still work.

👤miki725

Leave a comment