https://github.com/englercj/jquery-ajax-progress
Simple patch that adds a 'progress' callback to jquery Ajax calls
https://github.com/englercj/jquery-ajax-progress
Last synced: about 1 year ago
JSON representation
Simple patch that adds a 'progress' callback to jquery Ajax calls
- Host: GitHub
- URL: https://github.com/englercj/jquery-ajax-progress
- Owner: englercj
- License: mit
- Created: 2012-09-21T18:21:13.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2018-07-06T16:20:02.000Z (over 7 years ago)
- Last Synced: 2025-02-23T12:48:21.876Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 3.33 MB
- Stars: 119
- Watchers: 7
- Forks: 82
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend - jquery-ajax-progress
- awesome-frontend - jquery-ajax-progress
- awesome-front-end - jquery-ajax-progress
README
## Jquery Ajax Progresss
A simple patch to jQuery that will call a 'progress' callback, using the
[XHR.onProgress](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) event
### Usage
Simply include the script on your page:
```html
```
Then, whenever you make an ajax request, just specify a progress callback:
```javascript
$.ajax({
method: 'GET',
url: 'data/bird.json',
dataType: 'json',
success: function() { },
error: function() { },
progress: function(e) {
//make sure we can compute the length
if(e.lengthComputable) {
//calculate the percentage loaded
var pct = (e.loaded / e.total) * 100;
//log percentage loaded
console.log(pct);
}
//this usually happens when Content-Length isn't set
else {
console.warn('Content Length not reported!');
}
}
});
```
You can see it in action on the `demo.html` page.
### Notes
- This will not work using the `file://` protocol, see [XMLHttpRequest - Monitoring Progress](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) for more info.