ilopx/jquery-ajax-progress

Simple patch that adds a 'progress' callback to jquery Ajax calls

1.2.1 2015-08-23 21:57 UTC

Requires

• bower-asset/jquery: 2.1.*

Requires (Dev)

• bower-asset/bootstrap: 3.*

MIT

• englercj
• ilopX
• snoj
• RaphaelDDL

README

A simple patch to jQuery that will call a 'progress' callback, using the XHR.onProgress event

Video demo

Install and use

a. CDN

jquery.ajax-progress.js or jquery.ajax-progress.min.js

Include the script on your page:

<script src="https://cdn.rawgit.com/ilopX/jquery-ajax-progress/master/dist/jquery.ajax-progress.js"></script>

or

<script src="https://cdn.rawgit.com/ilopX/jquery-ajax-progress/master/dist/jquery.ajax-progress.min.js"></script>

b. Install

bower install ilopx-jquery-ajax-progress

composer require ilopx/jquery-ajax-progress

Use simple template script

template.js

$(function() {
    $.ajax({
        method: 'GET',
        url: '', // TODO: add url
        data: {
            // TODO: add data
        },
        success: function() {
            // TODO add message all ok
        },
        error: function() {
            // TODO add message error
        },
        progress: function(e) {
            if(e.lengthComputable) {
                var progress = e.loaded / e.total * 100;
                var content = e.srcElement.responseText;
            }
            else {
                // TODO add message error 'Content Length not reported!';
            }
        }
    });
});

Notes

• This will not work using the file:// protocol, see XMLHttpRequest - Monitoring Progress for more info.