Any way to know if a XMLHttpRequest has completed within a separate XMLHttpRequest scope?

Question

any help with the following would be gratefully accepted:

I have a scenario whereby I have a variable number of Ajax file uploads on a page, each contained within their own Form. During each forms' onSubmit action I call a separate method called PostFile() to perform the file upload as follows:

function PostFile(fileInputId, id) {

    var formdata = new FormData();
    var fileInput = $('#fileinput' + '_' + id)[0];

    formdata.append(fileInput.files[0].name, fileInput.files[0]);
    formdata.append("Id", id);

    //Creating an XMLHttpRequest and sending
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/Bookings/UploadArtwork');

    xhr.send(formdata);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {            

            if ($.ajax.active == 0) {

                NoOtherFilesBeingUploaded();
            }
        }
    };
}

My issue is that I only want the NoOtherFilesBeingUploaded() function to run if there are no other files currently being uploaded via other forms on the page; i.e. if there are no other XMLHttpRequest in progress.

Effectively I need a counter of current open XMLHttpRequests. However, I've discovered that ajaxStart() does not fire for XMLHttpRequests events so $.ajax.active is always 0.

Anybody have any ideas?

Thanks in advance

Update:

I'm using XMLHttpRequest so I can add a progress bar as follows:

xhr.upload.addEventListener("progress", function (event) {

    if (event.lengthComputable) {
        var percentComplete = Math.round(event.loaded * 100 / event.total);
        $('#progressNumber_' + id).html(percentComplete.toString() + '% complete');
    }
    else {
        $('#progressNumber_' + id).html('unable to compute');
    }
}, false);

Apologies for leaving this out of the original post.

Why are you creating your own XHR when you're already using jQuery? — Blazemonger, Aug 13 '13 at 13:53
If you use [`$.ajax`](http://api.jquery.com/jQuery.ajax/), then it creates a jqXHR object which your function can return. You can then use [deferred methods](http://api.jquery.com/category/deferred-object/) on that object any time you like. — Blazemonger, Aug 13 '13 at 13:58
Hi...thanks for the replies. So if I use $.ajax as in here: http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax the ajaxStart() function will increment with each request? — ledragon, Aug 13 '13 at 14:01

score 2 · Answer 1 · answered Aug 13 '13 at 14:22

2

jQuery's ajaxStart() only fires for the XMLHttpRequests come from jQuery itself. One alternative approach may be to maintain a counter by yourself, increasing it after xhr.send and decreasing it in onreadystatechange function.

answered Aug 13 '13 at 14:22

JackyZhu

394
3
10

Hi Jacky...thanks for the comment. This was my original thought. I wondered if someone had a better idea. – ledragon Aug 13 '13 at 14:37

score 0 · Accepted Answer · answered Aug 13 '13 at 17:22

ok here's how I got it working:

function PostFile(fileInputId, id) {

    var formdata = new FormData();
    var fileInput = $('#fileinput' + '_' + id)[0];

    formdata.append(fileInput.files[0].name, fileInput.files[0]);
    formdata.append("id", id);

    $.ajax({
        url: '/Bookings/UploadArtwork',
        data: formdata,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        xhr: function()
        {
            var xhr = new window.XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    $('#progressNumber_' + id).html(percentComplete.toString() + '% complete');
                }
            }, false);

            xhr.addEventListener("loadend", function (evt) {
                if ($.active == 0) {
                    NoOtherFilesBeingUploaded();
                }
            }, false);

            return xhr;
        },
        success: function (data) {

        }
    });
}

Thanks to Dave Bond here: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

Any way to know if a XMLHttpRequest has completed within a separate XMLHttpRequest scope?

2 Answers2