Are there progress update events in jQuery ajax?

Question

i have long running task that gets called using jquery ajax. i am using the block ui plugin to show "loading". is there anyway i can send progress messages back to the client to show progress and have that updated on the block ui plugin message.

So it will show this (as the server does its work) . .

"Loading first source . . . "
"Loading second source . . . "
"Loading third source . . . "
"Parsing Results . . . "

Pless

my serverside is C# but i would assume the answer wouldn't have any difference given different back end language – Pless

The answer can depends upon -> The 'long running task' is executed client side or server side? – Epineurium

the long running task is on the server side – Pless

Answer 1

From what I've seen for the case of uploading stuff - people create a separate gateway and query it for progress info as it's only avaliable on the server side. But I think it's not the best thing in Your case.

If You want to load stuff with progress information or allow server to pop info on progress while generating output then http streaming is what You want. It's covered nicely here. Basically it's a single http request, to which the server responds in chunks for a minute or so (therefore sending stuff when it wants) and then a new connection is opened.

This was quite a discovery for me ;)

[edit]

Currently there are lots of better techniques avaliable, and all of them are wrapped up in Socket.IO - Websockets with fallbacks to other techniques including http streaming

Socket.IO is a module for nodeJS, but there are other and similar implementations. I have already exchanged some packets with JAVA Socket.IO implementation from https://github.com/Atmosphere/atmosphere

Cathrinecathryn

Thanks for pointing this out. I changed the resources used in the post to some more up-to-date stuff. – Cathrinecathryn

Answer 2

One way is to use HTTP Handlers and AJAX with jQuery.

1. Initiate Server side request

$("#btnCreateInvoice").click(function() {             
       $.ajax({ type: "POST",  url: "YourHttpHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { start the block UI }
       });
    });

2. Polling

What next you need to do is to poll the server at 't' interval and get the status. For that we need to call a function at 't' interval that would initiate an AJAX call to a HTTPHandler to get the status.

$(function() {
  setInterval(updateStatus, 't');
});

function updateStatus() {
  $.ajax({ type: "POST",  url: "GetStatusHandler.ashx",
       contentType: "text/html; charset=utf-8",
       dataType: "html",  
       success: function(data) { process 'data' here and update the block UI message box }
       });
}

In your case here, the GetStatusHandler.ashx can return the complete innerHtml for status. For eg on the first call it will return 'Loading First source...', then it might return:
Loding First source...
Loading Second source...
and so on.

Epineurium

Answer 3

I only recently became aware of a project that does ajax "push". You might want to check it out:

http://www.ape-project.org/

As far as I know there are a few other projects out there doing similar things, this is the truest to: "send progress messages back to the client" where the other solution requires a request to poll for progress (still a very legitimate and good solution).

Murther

This project uses http streaming and is linked among others in the second link I gave. Nevertheless ape-project is a c++ server for http streaming and using it for doing one progressbar seems quite an overkill to me. – Cathrinecathryn

Answer 4

I would have each AJAX request return a JSON response containing a message, the data, and the next URL to request: {message: "Loading second resource...", data: ..., next_url: "/next_part"}

Before your first AJAX request, set the BlockUI message to "Loading...". When you get the response, set the BlockUI message to the message you get back from your AJAX call. Then make the next AJAX call to the value of "next_url", and so on, looping until you've completed all of the tasks.

If you're loading one large data set, but in pieces, you may want to do something like a progressive loading design pattern, but also set a progress message as you get each response.

Clodhopper

Answer 5

What you are trying to do is something similar to Comet. Traditional ("non-comet") webservers are not designed for this kind of transaction model and is therefore not a desired solution.

My suggestion is to break up the processing in one client request per data source:

function loadData() {
   // Each call passes callback(id) as a success handler
   fireAsynchronousRequest("source1");
   fireAsynchronousRequest("source2");
   fireAsynchronousRequest("source3");
}

function callback(var source) {
   if (source == "source1") {
       updateStatus("Source 1 loaded");
   }
   else if (source == "source2") {
       updateStatus("Source 2 loaded");
   }
}

This is an example of an asynchronous solution. You can implement state handling in callback() if you need it to be synchronous.

Cuxhaven

Answer 6

Well I had a similar situation and I solve it with another approach. It is a VERY UGLY work around, I know that so please do not start stating how bad it is, cause I know it, but it was ok for what I need it.

I'm putting the progress in a file, on the server side. For example, I have process.php called which needs to do a lot of work and it takes a while till it complete, so the user is getting nervous and he close the browser (not too good). So process.php is saving some output to a file on the server. On the page which called the process.php I have a small div, span, or whatever where I want to display the progress, but I suggest div. Each X millisecond, or seconds, I load another script from the server in the div, let's say display_info.php Now display_info.php is reading the file which was outputed by process.php and the content is diplayed in the div.

You have to be careful that the output from process.php has to be unique for each occasion, otherwise you will mess up the info output to the browsers.

Emil

Susannahsusanne