CODEWITHSUNDEEP
c#asp.netajaxloading
Evan Parsons
Evan Parsons

Reputation: 1209

Progress Bar for AJAX based on server-side process

My original idea was to create a session variable, and update it as the server-side process did all it's computing. For example, if it's done 1/10 of the major tasks, update the session variable to say 10%... Meanwhile I have a second AJAX request going on checking this Session variable until the Server-side processing is done doing it's thing. However I'm reading now that the Session variable isn't available until my server-side processing page is finished.

I also noticed that with this approach that my second aspx would load after the server-side processing was complete, which is useless since it won't provide any loading information until after the processing is all done.

Right now I have an animated loading icon, but I need some sort of indicator as to what step the server is on.

Current setup

function getComparison(result) {
    //grabs content from comparisons.aspx to show results
    $("#differenceSummary").html(result);
    //hide loading overlay image
    $("#loading").removeClass("visible");

}

Basically I just dump the contents of comparisons.aspx into a div. I looked into the UpdatePanel server control, but the examples don't seem to make it look useful in this situation. They all use buttons, I need a live feed of what's going on.

If I could return ANYTHING (would prefer a 1-100 or some sort) to the client as to what process I'm on, this would be extremely useful.

Upvotes: 2

Views: 3862

Answers (1)

Evan Parsons
Evan Parsons

Reputation: 1209

For those wondering how I ended up doing this, I ended up doing several AJAX requests.

My first AJAX request determined how many requests were going to need to be made (I had 700,000 DB records, I did 30,000 at a time) and setup the loading bar. Once the loading bar was setup, I hit the same ASPX file "X" amount of times, for each call that's made, I update the progress bar (Requires a bit of math). Once the progress bar reaches 100 percent, I do another AJAX request to grab the result from the server side processing that I did.

My initial code that calls comparison.aspx, and appends it to a div.

$.ajax({
        url: "comparisons.aspx",
        type: "GET",
        success: getComparison,
        error: showErrors
    });

//On Success, show results
function getComparison(result) {
    //grabs content from comparisons.aspx to show results
    $("#differenceSummary").html(result);

}

When comparisons.aspx first loads, it loads an empty progress bar and also generates info based on files I've uploaded (This is specific to my application). When this page is loaded, the amount of AJAX Requests is put in the javascript.

        //how many records to check at a time
        var numOfRecordsAtATime = 30000;

        //number of original/modified records

        var origNumOfRecords = parseInt($("#origNumOfRecords").text());
        var modNumOfRecords = parseInt($("#modNumOfRecords").text());
        var highestNum;
        //arithmetic to see how many AJAX calls are necessary
        if (origNumOfRecords > modNumOfRecords) {
            highestNum = origNumOfRecords;
        } else {
            highestNum = modNumOfRecords;
        }

        var numberofCallsToMake = parseInt(Math.floor(highestNum / numOfRecordsAtATime)) + 1;
        //How much the progress meter should increase at a time
        var increments = (100 / numberofCallsToMake);

        //number of records in total we've completed
        var numRecordsCompleted = 0;
        //number of times we've incremented
        var numIncrementsCompleted = 0;         


 function startAjax() {
    $("#progressbar").progressbar({
        value: 1
    });
    if (!halt) {
        while (true) {
            if (numRecordsCompleted < origNumOfRecords) {
                $.ajax({
                    url: "ajaxCall.aspx?randNo=" + Math.random(),
                    type: "GET",
                    success: doAjaxCall,
                    error: showTheError
                });
                numRecordsCompleted = numRecordsCompleted + numOfRecordsAtATime;

            } else {
                break;
            }

        }

    }

}

function doAjaxCall(result) {
    numIncrementsCompleted++;
    console.log(result);
    var progress = (parseInt(numIncrementsCompleted * increments));
    $("#progressbar").progressbar({
        value: progress
    });
    console.log(progress);
    if (progress == 100) {

        getResults();

    }
}

Upvotes: 3

Related Questions