Ajax loading bar function

Question

I know there are a few post about this but they dont cover what i need to achieve.

I'm trying to get the youtubelike loading bar to work properly.

And i found this :

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};

       xhr: function () {
                var xhr = new window.XMLHttpRequest();
                var percentComplete = 0; <--------------------------added this
                $('.progress').removeClass('hide');<----------------and this
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                        if (percentComplete === 1) {
                            $('.progress').addClass('hide');
                        }
                    }
                }, false);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);

                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                            });
                    }
                }, false);
                return xhr;
            }

I have added 2 lines because it would only work once as the hidden value was not being removed after the completion. Also put the width back to 0. I also like the fact that it seams to be calculating the real percentage of the event.

This is working great. Howerver, i want to turn this into a function that can be called for all my ajax call like this:

$(document).ready(function () {
    $("a").on("click", function (event) {
        event.preventDefault();
        var id = ($(this).attr("id"));
        var container = ($(this).attr("data-container"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        MY_LOADING_BAR_FUNCTION();<-----------------------------------Here i guess?
        $.ajax({

            url: 'ajax-php.php',
            type: 'post',
            data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html },
            success: function (data, status) {
                if (container == '#formbox') {
                    $("#screen").addClass("visible");
                }
                $(container).html(data);
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    }); // end on click
}); // en document ready

But i also ran across the Ajax setup that looks like this.

   $.ajaxSetup({
    beforeSend: function() {

    },
    complete : function() {

    }
});

Right now i got it to work by putting the entire code of the xhr: function () inside my ajax call. But i dont want to do it every time.

So these are the 2 options i have found that could work but i cant get them to work the way i want. I try to make a MY_LOADING_BAR_FUNCTION() but i'm getting a deprecated error.

Can anyone tell me how to make this work please.

Thank you everyone!

Answer 1

It's late to reply, but its worth to share some knowledge, so others may get help from it.

You can extend jQuery AJAX XHR object as below.

jQuery.ajaxSettings.xhr = function ()
{
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with upload progress
            console.log('percent uploaded: ' + (percentComplete * 100));
        }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log('percent downloaded: ' + (percentComplete * 100));
        }
    }, false);
    return xhr;
}