jQuery 'reverse callback' from ASP page

Question

OK, I have a need to send a large request to a server running ASP::PERL and to have the server post back progress to the calling page. Basically -> tell server to upload a whole bunch of files in a file share, then update a div on the client as each file is checked for error/uploaded/success or fail.

Is there a way to put some callback funtion in the backend ASP page to call a clientside javascript funtion on the loaded page? This has to work in a loop on the server, so basically a pingback from the server to the client as each file is uploaded until all files are checked/uploaded.

Answer 1

You might get some mileage from this post. topic is bulk email but the strategy will work for your requirement..

Answer 2

Like the comment above says, (I'm pretty sure) you have to do this with polling.

When you send the files to the server, use the setTimeout() function to register a callback function. This function will "poll" the server, asking for the status of the operation (how many files... what % complete). If the operation isn't finished, just re-register the same function -- with setTimeout() again -- just before your function completes.

var callback = function() {
  // (1) Use ajax to get status from the server
  // (2) Update the progress div
  // (3) If complete, signal the user and hide the progress bar;  otherwise register callback() again
}

var submitFiles = function() {
  // Send files to server
  setTimeout(callback, 1000);
}

Answer 3

Thanks for all your help folks. I figured out how to do what we needed. What it boiled down to was that we wanted to sort of stall the calls per file so that we didn't overwhelm our backend server with a whole bunch of file upload calls. So, we chose a recursoin strategy that basically makes an asynch call, then waits until a success callback and handles the result - then calls the method again. Here is some code:

function doAjaxCall(targetCheckBox)
{
    if ((targetCheckBox) == 'undefined' || targetCheckBox == null)
    {
       targetCheckBox = $('#toprint input:checkbox[id*=ChkIn]:checked:first');

       if ($(targetCheckBox).length == 0)
       {
            alert('All Files Processed!');
            if (!CheckForm()){
                $('#checkinbtn').remove();
            } else 
            {
                $('#checkinbtn').removeAttr('disabled');
                $('#checkinbtn').val('Check In');
            }
            return;
       }
    }

    var res = $(targetCheckBox).val().split("/");
    var targetID = res[res.length-1];
    var test = document.getElementById('comment_'+targetID);
    var commentField = $(test);
    $.ajax({
        type: "POST",
        url: "loadfiles.asp", 
        data: getPostString($(targetCheckBox).val()), 
        success: function(result) {
            if (result.indexOf('Error')> -1){
                commentField.attr('style', 'background-color:#FF6267');
            } else {
                commentField.attr('style', 'background-color:#88CC55');
            }
            commentField.empty();
            commentField.html(result);
            $(targetCheckBox).remove();
            doAjaxCall(null);  // recurse on success until we don't have any more files
        }
    });
    $("#fileCounter").remove();
}