Skip to content
This repository has been archived by the owner on Apr 5, 2023. It is now read-only.
/ jquery-ajaxprogress Public archive

A jQuery extension that provides access to global and local AJAX events for XMLHttpRequest

License

Notifications You must be signed in to change notification settings

kpozin/jquery-ajaxprogress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Description

This jQuery plugin provides access to the onprogress event of the XMLHttpRequest object available in modern browsers.

This allows you to get the information needed to visually show download progress when your web application is making a large AJAX request.

The code has been tested in recent versions of Chrome/Chromium and in Firefox 4.

Dependencies

This plugin requires jQuery 1.5 or higher.

How to use

Add the script to the page's list of <script> tags after the jQuery reference.

In your page code, check the value of jQuery.support.ajaxProgress. If this value is false, then the browser doesn't support the onprogress event, so you'll have to write fallback code (for example, showing a generic progress spinner instead of a percentage).

The onprogress event passes to its handlers a native object conforming to the ProgressEvent interface:

The ProgressEvent object

The interface has the following fields

  • {Boolean} lengthComputable - true if the size of the response is known. This is usually known if the server sends a Content-Length header.
  • {Number} loaded - the number of bytes loaded so far
  • {Number} total - the total number of bytes in the response.

The plugin exposes the onprogress event in two ways:

Global AJAX Event

As a global AJAX event that you can subscribe to. You can set a handler on any jQuery selection in the DOM, and it will get triggered for all AJAX requests.

$("#loading").bind("ajaxProgress", function(jqEvent, progressEvent, jqXHR) {
    if (progressEvent.lengthComputable) {
        $(this).text("Loaded " + (Math.round(progressEvent.loaded / progressEvent.total * 100)) + "%");
    } else {
        $(this).text("Loading...");
    }
});

The handler signature is function ( jqEvent, progressEvent, jqXHR ), where jqEvent is the the event object created by jQuery, progressEvent is the native ProgressEvent object described above, and jqXHR is the original wrapper around the XMLHttpRequest object.

Local AJAX Event

You can also provide a handler for a specific jQuery.ajax() call by including a progress field in the options object you pass to jQuery.ajax().

$.ajax("/myfile", {progress: function(jqXHR, progressEvent) {
    if (progressEvent.lengthComputable) {
        console.log("Loaded " + (Math.round(progressEvent.loaded / progressEvent.total * 100)) + "%");
    } else {
        console.log("Loading...");
    }
}});

About

A jQuery extension that provides access to global and local AJAX events for XMLHttpRequest

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published