dwr.util.useLoadingMessage

Setup a GMail style loading message.

This method may be deprecated at some point in the future because its implementation has a number of limitations:

It is suggested that you use the source on this page as a template and customize it for your own purposes.

You must call this method after the page has loaded (i.e. not before the onload() event has fired) because it creates a hidden div to contain the loading message.

The easiest way to achieve this is to call dwr.util.useLoadingMessage from the onload event like this:

<head>
  <script>
  function init() {
    dwr.util.useLoadingMessage();
  }
  </script>
  ...
</head>
<body onload="init();">
  ...

There may well be times when you are not able to easily edit the headers or the body tag (this is common when using a CMS) in which case you can use the following:

<script>
function init() {
  dwr.util.useLoadingMessage();
}

if (window.addEventListener) {
  window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
  window.attachEvent("onload", init);
}
else {
  window.onload = init;
}
</script>

The source to this function is also a useful starting point for implementing your own loading message. The majority of this function dynamically creates a div (with id="disabledZone") which contains the message. The important code that makes it appear and disappear whenever Ajax activity is going on looks like this:

dwr.engine.setPreHook(function() {
  $('disabledZone').style.visibility = 'visible';
});
dwr.engine.setPostHook(function() {
  $('disabledZone').style.visibility = 'hidden';
});

This is fairly simple and makes it quite easy to implement your own "loading" message.

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

  dwr.engine.setPreHook(function() {
    var disabledZone = $('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 {
      $('messageZone').innerHTML = loadingMessage;
      disabledZone.style.visibility = 'visible';
    }
  });

  dwr.engine.setPostHook(function() {
    $('disabledZone').style.visibility = 'hidden';
  });
}

This can be simply adapted to allow use of a loading images as follows:

function useLoadingImage(imageSrc) {
  var loadingImage;
  if (imageSrc) loadingImage = imageSrc;
  else loadingImage = "ajax-loader.gif";
  dwr.engine.setPreHook(function() {
    var disabledImageZone = $('disabledImageZone');
    if (!disabledImageZone) {
      disabledImageZone = document.createElement('div');
      disabledImageZone.setAttribute('id', 'disabledImageZone');
      disabledImageZone.style.position = "absolute";
      disabledImageZone.style.zIndex = "1000";
      disabledImageZone.style.left = "0px";
      disabledImageZone.style.top = "0px";
      disabledImageZone.style.width = "100%";
      disabledImageZone.style.height = "100%";
      var imageZone = document.createElement('img');
      imageZone.setAttribute('id','imageZone');
      imageZone.setAttribute('src',imageSrc);
      imageZone.style.position = "absolute";
      imageZone.style.top = "0px";
      imageZone.style.right = "0px";
      disabledImageZone.appendChild(imageZone);
      document.body.appendChild(disabledImageZone);
    }
    else {
      $('imageZone').src = imageSrc;
      disabledImageZone.style.visibility = 'visible';
    }
  });
  dwr.engine.setPostHook(function() {
    $('disabledImageZone').style.visibility = 'hidden';
  });
}

You then use this example like this: useLoadingImage("images/loader.gif");