Search code examples
requestmootoolsprogress

Mootools request follow progress output


Is there any way to follow the output downloaded "so far" when doing a request with Mootools? I know there's "onProgress", but that only gives me the bytes downloaded.

The page that is being downloaded, is a list of e-mail addresses, and for every e-mail that has been sent, the page appends a line to the page until it's done executing.

I would like to take that latest line, and present that to the user, as the progress goes on...


Solution

  • mootools supports only what webkit and gecko support (and now maybe IE9/10).

    onLoadstart(event, xhr)
    
    onProgress(event, xhr)
    

    the progress event - if available - should be enough to get you going. see https://dvcs.w3.org/hg/progress/raw-file/tip/Overview.html for the spec of what is available.

    http://jsfiddle.net/dimitar/tYdjN/

    var list = [], 
        len = 10000, 
        loaded = $('loaded'),
        output = $('output'),
        count = 168,
        chunks = 0;
    
    while(len--)
        list.push(Faker.Internet.email());
    
    list = list.join('<br/>\n');
    
    new Request({
        url: '/echo/html/',
        data: {
            html: list
        },
        onProgress: function (event, xhr) {
            chunks++;
            loaded.set('html', event.loaded + ' bytes');
            new Element('h4[html=Chunk ' + chunks +']').inject(output);
    
            new Element('div.chunk', {
                html: xhr.response,
                styles: {
                    background: ['rgb(', count, ',', count,',', count, ')'].join('')
                }
            }).inject(output);
            count -= 16;
        },
        onComplete: function(){
            //console.log(this.response.text);
            // $('list').set('html', this.response.text);
        }
    }).send();
    

    this example is using jsfiddle's ajax api and I am using Faker.js to generate 10000 random emails - whihc jsfiddle sends back to me in chunks. each chunk outputs its own emails in a div.