Progress indicator in dajax/dajaxice?

Question

I sucessfully integrated dajax in my project. It is fine but it lacks some features which could make it even better - eg. visible indicator that the request is being processed (darken screen, hourglass, whatever). I found some places in dajaxice.js where should I intercept the request but this is not the easy way.. Are you aware of some easy method or should I choose the hard way - to not use any ajax framework and do all the work manually?

Answer 1

Something like this would work (to give a gmail style loading... message in the top right corner):

function useLoadingMessage(message) {
  var loadingMessage;
  if (message) loadingMessage = message;
  else loadingMessage = "Loading";

  Dajaxice.preHook = function() {
    var disabledZone = document.getElementById('disabledZone');
    if (!disabledZone) {
      disabledZone = document.createElement('div');
      disabledZone.setAttribute('id', 'disabledZone');
      disabledZone.style.position = "absolute";
      disabledZone.style.zIndex = "1000";
      disabledZone.style.left = "0px";
      disabledZone.style.top = "0px";
      disabledZone.style.width = "100%";
      disabledZone.style.height = "100%";
      document.body.appendChild(disabledZone);
      var messageZone = document.createElement('div');
      messageZone.setAttribute('id', 'messageZone');
      messageZone.style.position = "absolute";
      messageZone.style.top = "0px";
      messageZone.style.right = "0px";
      messageZone.style.background = "red";
      messageZone.style.color = "white";
      messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
      messageZone.style.padding = "4px";
      disabledZone.appendChild(messageZone);
      var text = document.createTextNode(loadingMessage);
      messageZone.appendChild(text);
    }
    else {
      document.getElementById('messageZone').innerHTML = loadingMessage;
      disabledZone.style.visibility = 'visible';
    }
  };

  Dajaxice.postHook = function() {
    document.getElementById('disabledZone').style.visibility = 'hidden';
  };
}

Call useLoadingMessage() from your javascript document.ready script, or from the onload in your body tag for the very agnostic.

A couple of hacks in the dajaxice.core.js:

Line 49 onwards:

    oXMLHttpRequest.onreadystatechange = function() {
        if (this.readyState == XMLHttpRequest.DONE) {
            if(Dajaxice.postHook) Dajaxice.postHook();
            if(this.responseText == Dajaxice.EXCEPTION || !(this.status in Dajaxice.valid_http_responses())){
                error_callback();

Line 65 onwards:

    }
    if(Dajaxice.preHook) Dajaxice.preHook();
    if(method == 'POST'){
        oXMLHttpRequest.send(send_data);
    }
    else{

The javascript is all library agnostic and it should only involve adding 2 lines to the Dajaxice source. If you wish to use a different loading element simply give it an id of disableZone in your html and set visible = hidden for its css.

I took this solution from dwr, which is dajaxice for Java. It does have some other cool features though, like some decent debug pages and direct image uploading, which would be handy in dajaxice.... ;).