Skip to content
Browse files

Fixed the test page and the handler interfaces. Wrote more of the REA…

…DME.
  • Loading branch information...
1 parent f722001 commit e564789f4124a9681a0931f043b845ec1a475e09 @kpozin committed Apr 23, 2011
Showing with 73 additions and 64 deletions.
  1. +0 −16 README
  2. +28 −9 README.md
  3. +17 −14 jquery.ajaxprogress.js
  4. +28 −25 test/index.html
View
16 README
@@ -1,16 +0,0 @@
-Description
------------
-
-This jQuery plugin provides access to the `onprogress` event of the `XMLHttpRequest` object available
-in modern browsers. It has been tested in recent versions of Chrome/Chromium and in Firefox 4.
-
-Note: this is not yet ready for use. I'm still working out a few issues with providing the right arguments to the
-event handlers.
-
-How to use
-----------
-
-The plugin exposes the `onprogress` event in two ways:
-
-1.
-2.
View
37 README.md
@@ -1,16 +1,35 @@
-Description
------------
+# Description
-This jQuery plugin provides access to the `onprogress` event of the `XMLHttpRequest` object available
+This jQuery plugin provides access to the [onprogress](http://www.w3.org/TR/progress-events/) event of the `XMLHttpRequest` object available
in modern browsers. It has been tested in recent versions of Chrome/Chromium and in Firefox 4.
-Note: this is not yet ready for use. I'm still working out a few issues with providing the right arguments to the
-event handlers.
+# Dependencies
-How to use
-----------
+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 plugin exposes the `onprogress` event in two ways:
-1.
-2.
+### Global AJAX Event
+As a [global AJAX event](http://docs.jquery.com/Ajax_Events#Global_Events) that you can subscribe to.
+ $("#loading").bind("ajaxProgress", function(jqEvent, progressEvent, jqXHR) {
+ if (progressEvent.lengthComputable) {
+ $(this).text("Loaded " + (Math.round(progressEvent.loaded / progressEvent.total * 100) / 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 object conforming to the
+(ProgressEvent interface)[http://www.w3.org/TR/progress-events/#interface-progressevent], and `jqXHR` is the original
+(wrapper around the XMLHttpRequest object)[http://api.jquery.com/jQuery.ajax/#jqXHR].
+
+### Local AJAX Event
View
31 jquery.ajaxprogress.js
@@ -3,16 +3,15 @@
* http://www.kpozin.net/ajaxprogress
*
* (c) 2011, Konstantin Pozin
- * Licensed under MIT license.
+ * Licensed under MIT license (https://github.com/kpozin/jquery-ajaxprogress/raw/master/MIT-LICENSE.txt)
*/
-
(function($) {
// Test whether onprogress is supported
- $.support.ajaxProgress = (XMLHttpRequest && "onprogress" in (new XMLHttpRequest()));
+ var support = $.support.ajaxProgress = ("onprogress" in (new $.ajaxSettings.xhr()));
// If it's not supported, we can't do anything
- if (!$.support.ajaxProgress) {
+ if (!support) {
return;
}
@@ -21,21 +20,26 @@
return this.bind("ajaxProgress", f);
};
-
- // Hold on to a reference to the jqXHR object so that we can pass it to the progress callback
- $(window).bind("ajaxSend", function(event, jqXHR, ajaxOptions) {
+ // Hold on to a reference to the jqXHR object so that we can pass it to the progress callback.
+ // Namespacing the handler with ".ajaxprogress"
+ $("html").bind("ajaxSend.ajaxprogress", function(event, jqXHR, ajaxOptions) {
ajaxOptions.__jqXHR = jqXHR;
});
/**
- * @param evt XMLHttpRequest progress event
- * @param options jQuery AJAX options
+ * @param {XMLHttpRequestProgressEvent} evt
+ * @param {Object} options jQuery AJAX options
*/
function handleOnProgress(evt, options) {
+
+ // Trigger the global event.
+ // function handler(jqEvent, progressEvent, jqXHR) {}
if (options.global) {
- $.event.trigger("ajaxProgress", evt, options.__jqXHR);
+ $.event.trigger("ajaxProgress", [evt, options.__jqXHR]);
}
+ // Trigger the local event.
+ // function handler(jqXHR, progressEvent)
if (typeof options.progress === "function") {
options.progress(options.__jqXHR, evt);
}
@@ -56,14 +60,13 @@
var newXhr = makeOriginalXhr();
if (newXhr) {
- newXhr.onprogress = function(evt) {
+ newXhr.addEventListener("progress", function(evt) {
handleOnProgress(evt, s);
- }
+ });
}
return newXhr;
};
-
$.ajaxSetup(newOptions);
-})(jQuery);
+})(jQuery);
View
53 test/index.html
@@ -7,40 +7,43 @@
<script type="text/javascript">
- function runTest() {
+ (function() {
+ "use strict";
+ function runTest() {
- var $prog = $("#prog");
+ var $prog = $("#prog");
- function showProgress(jqXHR, evt) {
- console.log("Global event", arguments);
- var msg = "Length not computable";
- if (evt.lengthComputable) {
- msg = "Got " + evt.loaded + " / " + evt.total;
+ function showProgress(jqXHR, evt) {
+ console.log("Global event", arguments);
+ var msg = "Length not computable";
+ if (evt.lengthComputable) {
+ msg = "Got " + evt.loaded + " / " + evt.total;
+ }
+ $("<p>" + msg + "</p>").appendTo($prog);
}
- $("<p>" + msg + "</p>").appendTo($prog);
- }
- $("body").ajaxProgress(showProgress);
+ $("body").ajaxProgress(showProgress);
- // In Firefox, this file is too small
- var ajax = $.ajax({url:"/lib/jquery-1.5.2.js", cache: false,
- progress: function(jqHXR, e) {
- console.log("Local event", arguments);
- }
- }
- );
+ // In Firefox, this file is too small
+ var ajax = $.ajax({url:"/lib/jquery-1.5.2.js",
+ cache: false, dataType: "text", // If we don't set a dataType, jQuery will get reinitialized
+ progress: function(jqHXR, e) {
+ console.log("Local event", arguments);
+ }}
+ );
- ajax.done(function() {
- console.log("Done!");
- });
+ ajax.done(function() {
+ console.log("Done!");
+ });
- ajax.fail(function() {
- console.warn(arguments, "Failed!");
- })
- }
+ ajax.fail(function() {
+ console.warn(arguments, "Failed!");
+ })
+ }
- $(runTest);
+ $(runTest);
+ })();
</script>

0 comments on commit e564789

Please sign in to comment.
Something went wrong with that request. Please try again.