Click Upvote Click Upvote - 8 months ago 37
Javascript Question

Forcing page content to change through Javascript

I'd like to show some visual progress to a user during an ajax request. E.g when he clicks a 'process' button which makes an AJAX request to a server-side script, he will see a 'loading...' message and a graphic, but I also want to show him some progress of how much processing is done. E.g

5/10 processed, 6/10 processed...
and so on.

Is there anyway to do this?


Yep, there is, but it is kind of complicated. The only way I've found is using an iframe on the client, and response.writeing on the server to send blocks of javascript back to the client, that javascript calls on the parent window to process the status messages.

Here's some sample code. There may be problems with it, I'm snipping it out of a much bigger app.


<button id="doStuff">
<div id="status"></div>
<div id="iframeHolder"></div>


//This one will be called from the HTML the javascript is streaming back
function updateStatus(message) {
$('#doStuff').click(function(event) {
    var url="";
    $('#iframeHolder').html('<iframe src="' + url + '"></iframe>');

server side (this is vb, but you should be able to do it in your language of choice):

dim message as string = "hello world"
dim script = String.Format("<script type='text/javascript'>parent.updateStatus('{0}');</script>",message)

Some observations

  • Querystring will be your friend here. I'm not sure if you can programatically postback to an iframe
  • You will probably have to add some cachebusting garbage to the querystring, otherwise the browser will more than likely cache the contents. It'll be very very quick, but wrong :-)
  • You might need to send "some" html before the browser starts processing the iframe stuff. I've found that sending a HTML comment of about 1k of garbage helps
  • To avoid refresh problems in FF, and "forever loading" problems in chrome and safari, set the iframe's src to about:blank once you're done ($('#iframeHolder iframe').attr('src','about:blank'))
  • the jQuery UI progress bar looks pretty swanky for displaying the percent processed

Hope that helps. I tore my head out with this a couple of months ago :-)