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

Overview

Jquery Ajax Progresss

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

Usage

Simply include the script on your page:

<script src="js/jquery.ajax-progress.js"></script>

Then, whenever you make an ajax request, just specify a progress callback:

$.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

You might also like...

Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

You (Might) Don't Need jQuery Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs

Dec 24, 2022

Standalone AJAX library inspired by jQuery/zepto

ajax Standalone AJAX library inspired by jQuery/zepto Installation component-install ForbesLindesay/ajax Then load using: var ajax = require('ajax');

Dec 17, 2022

we learn the whole concept of JS including Basics like Object, Functions, Array etc. And Advance JS - Understanding DOMs, JQuery, Ajax, Prototypes etc.

JavaScript-for-Complete-Web Development. we learn the whole concept of JS including Basics like Object, Functions, Array etc. And Advance JS - Underst

Jul 22, 2022

pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.

pjax = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles,

Jan 5, 2023

infiniteScrollWithTemplate - JQuery plugin for ajax-enabled infinite page scroll / auto paging with template

jQuery Infinite With Template Plugin JQuery plugin for ajax-enabled infinite page scroll with template. If you like jQuery until now, this little libr

Mar 19, 2021

A lightweight jQuery Ajax util library.

Just Wait Wait what? The server response. Just Wait is a lightweight jQuery utility that allows you to specify a function to be executed after a speci

Jun 22, 2022

A jQuery plugin to submit forms with files via AJAX and to get a response with errors.

jquery-ajaxform A jQuery plugin to submit form with files via AJAX and to get a response with errors. Browsers without FormData uses iframe transport

Mar 30, 2021

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.

Tidy Table Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback. Features Extensible HTML/CSS interf

Aug 16, 2022

Aergo Timer Service schedule smart contract function calls

Aergo Timer Service ⏰ Create timers to call functions on your smart contracts Schedule calls based on time interval or on specific date-times For a sm

Mar 10, 2022
Comments
  • recommendation to avoid problems with jQuery 1.11.3...

    recommendation to avoid problems with jQuery 1.11.3...

    Hello, I have seen a similar approach to yours for doing the progress bar. I found a bug that would appear only on IE11 Win7 (probably Win8, not Win10) The issue is around this code:

    var oldXHR = $.ajaxSettings.xhr;
    $.ajaxSettings.xhr = function() {
        var xhr = oldXHR();
    

    the problem is that the oldXHR seems to be getting the wrong "this"... in jQuery 1.11.3 it relies on this.type, so the fix I would suggest is to change the code above with:

    var oldXHR = $.ajaxSettings.xhr;
    $.ajaxSettings.xhr = function() {
        var that = this;
        var xhr = oldXHR.bind(that)();
    
    opened by hbriceno 1
  • [enhancement] Add missing bower.json.

    [enhancement] Add missing bower.json.

    Hey, maintainer(s) of englercj/jquery-ajax-progress!

    We at VersionEye are working hard to keep up the quality of the bower's registry.

    We just finished our initial analysis of the quality of the Bower.io registry:

    7530 - registered packages, 224 of them doesnt exists anymore;

    We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

    Sadly, your library englercj/jquery-ajax-progress is one of them.

    Can you spare 15 minutes to help us to make Bower better?

    Just add a new file bower.json and change attributes.

    {
      "name": "englercj/jquery-ajax-progress",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "description": "please add it",
      "license": "Eclipse",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<dependency_name>": "<semantic_version>",
        "<dependency_name>": "<Local_folder>",
        "<dependency_name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }
    
    

    Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

    NB! Please validate your bower.json with jsonlint before commiting your updates.

    Thank you!

    Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

    opened by timgluz 1
Owner
Chad Engler
Chad Engler
A slick loader to use during your AJAX calls or data processing

Slick Loader A slick loader to use during your AJAX calls or data processing Doc Installation Simply import slick-loader into your HTML. <link rel="st

Zenoo 1 Jan 21, 2022
A simple CLI to patch the Fitbit OS Simulator with the new SSL certificate - March 2022

patch-fitbit-simulator Only for Mac OS currently A simple CLI to patch the Fitbit OS Simulator certificate with the new SSL certificate for the Device

Brandon Him 2 Mar 28, 2022
Jquery-actualizer - jQuery ajax actualizer

jQuery AJAX Actualizer Include jQuery & this plugin into your HTML file and use this js code: $('#target').actualizer('a'); On click at any A element,

Šimon (Simon) Rataj 1 Jul 28, 2020
Adds support for Blade templates to Prettier. (work in progress)

Laravel Blade support for Prettier ⚠️ This plugin is still a work-in-progress. If you're trying it out, please keep this in mind. This package include

Ryan Chandler 139 Sep 20, 2022
Chain Anime.js calls on jQuery selectors.

jQuery.animejs This is a small (< 1kb) helper plugin for the great Anime.js. Features Chain Anime.js calls in a more readable way. Supports latest Ani

null 2 Jun 8, 2022
Automaticly parses known pocket ips patch resources, scans folders or zip files for matching roms and applies the patches.

Pocket Automaton Automaticly parses known pocket ips patch resources, scans folders or zip files for matching roms and applies the patches. Usage pock

null 3 Nov 27, 2022
API implementation for the TERA Online retail server (patch 92/100) on Node.js.

tera-api API implementation for the TERA Online retail server (patch 92/100) on Node.js. The API consists of two independent servers running on differ

JKQ 20 Nov 30, 2022
Patch to add .server extension to folder in Remix

?? remix-server-folders This patch updates the Remix compiler to treat all files in any folder named with .server extension as server only files. In o

Kiliman 11 Dec 9, 2022
🏄‍♂️ Proxy POST/PUT/PATCH requests through a GET request

??‍♂️ to-GET Proxy POST/PUT/PATCH requests through a GET request Usage Base URL: https://toget.mihir.ch Endpoint: /:method Supported methods (case ins

Mihir Chaturvedi 4 Oct 2, 2022
It's a simple Leaderboard with the functionality to add and view leaderboard with API calls

It's a simple Leaderboard with the functionality to add and view leaderboard with API calls. This project follows GitFlow instead of GitHub flow and it's built with JavaScript, CSS and HTML.

Robertson Arthur 4 Jul 6, 2022