dwr.util.useLoadingMessage

Setup a GMail style loading message. All of the demo pages (dynamic text, selection lists, live tables, live forms, dynamic validation and address entry) use this method.

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

  • The implementation is rather arbitary. Why red, why top right, etc. The only real answer is, to copy GMail.
  • The action is supposed to stop the user interacting with the page until the remote call is complete, but this only works on Firefox due to limitations in IE (although this limitation is likely to be removed in version 3.0)
  • This implementation will fail when multiple remote requests are outstanding - the message will be removed too quickly.

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");

‹ toDescriptiveStringupSubmission box ›