Asynchronously update page with data that are stored by middleware

Question

I have middleware, that stores all http requests into DB.

Also I have view, that fetches data from DB and put this data into the context.

views.py

def requests(request):
    http_requests = WebRequest.objects.all()
    context = {
        "http_requests": http_requests
    }
    return render(request, "requests.html", context)

How can I asynchronously update data on this page as new requests come in (so, new requests should appear on this page asynchronously)? Can I use only Django features to achieve such behavior or I need to use some javascript libraries?

Django doesn't have ability to do anything asynchronously on the frontend. You definitely need javascript for this. — Shang Wang, Dec 16 '15 at 14:20
Possible duplicate of [Does Django have a way to open a HTTP long poll connection?](http://stackoverflow.com/questions/4787530/does-django-have-a-way-to-open-a-http-long-poll-connection) — Dhia, Dec 16 '15 at 15:30
@ShangWang Ok. Could you please give me some approach or example? How should javascript handle appearing of new requests? — ivan_ochc, Dec 16 '15 at 15:44
This is the common scenario where you need to update page on demand. Use `djangorestframework` or `django-tastypie` to create a restful api for your web requests and then poll via AJAX the api endpoint to get new requests, so you can update the page. There is no nice way for websockets right now, so polling is the safest way. — Lorenzo Peña, Dec 16 '15 at 17:35
@Lorenzo Peña Expected such approach, thanks. But I have no idea how to handle new http requests via AJAX. — ivan_ochc, Dec 16 '15 at 18:46
Here's an idea, store the datetime when you last requested data and pass it in the next request, so that the server only returns data stored after that. Apart from that, find a jQuery tutorial in Google and give it a try, not hard. — Lorenzo Peña, Dec 16 '15 at 18:49
@Lorenzo Peña I don't quite understand such approach. Do I need to use some setInterval for requesting api every n seconds to check new records in DB? — ivan_ochc, Dec 16 '15 at 19:38

Remi Smirra · Accepted Answer · 2015-12-18T13:27:46.727

It depends on how much time you want to spend on the project. As Lorenzo stated, it might make sense to create an API and have javascript-frameworks (e.g. emberjs or angularjs) handle the asynchronity. I dont think you can handle this with pure django... If you don't have time and are in for some 'hack' you could just replace the content of your page by polling the url and replacing the whole document with the response:

 $.ajax({
        type: "GET",
        url: "<url_to_your_requests_view>",
        success: function(response){
            $('body').html(response);
        }
    });

This is NOT clean, but should work as a quick an dirty trick...

EDIT: If you only want to exchange certain parts of your site, you can break it down to just add elements to the page:

 $.ajax({
        type: "GET",
        url: "<url_to_your_requests_view>",
        success: function(response){
            var newlyAddedRows = // find your newly added rows through some jquery
            newlyAddedRows.forEach(function(row){
                $('#request-holder').append(row);
            });

        }
    });

OR WITH JSON

 $.ajax({
        type: "GET",
        url: "<url_to_your_requests_api_endpoint>",
        success: function(response){
            var requestRows = response.requestItems
            var $requestsHolder = $('#request-holder');
            $requestHolder.empty();
            requestRows.forEach(function(row){
                requestsHolder.append('<div class="request-row">' + <visualize your data somehow> + '</div>'); //e.g. row.timestamp if you have that in your json
            });

        }
    });

Thanks, yes, it works. But, yes, it's quick and dirty trick. Is it make sense to return JSON and modify inner html structure inside of jQuery script instead of loading whole page? — ivan_ochc, Dec 18 '15 at 12:59
Yes. This is basically how the other frameworks handle this... See the EDIT above. — Remi Smirra, Dec 18 '15 at 13:11

Asynchronously update page with data that are stored by middleware

1 Answers1