I've been using Rob Ghonda's AjaxCFC more and more and the one thing that I wanted was the ability to define an Ajax indicator image.
So I looked into the util.js and found a link to the online DWR reference. In there, Joe Walker shows a snippet of code that can do exactly what I wanted; display one of those animated Ajax indicator images! So, I figured I'd share the code with all of your guys & gals. Here it is:
/**
* Setup a AJAX image indicator.
* Added by Rey Bango (8/16/06) based on code in the URL below
* @see http://getahead.ltd.uk/dwr/browser/util/useloadingmessage
*/
DWRUtil.useLoadingImage = function(imageSrc) {
var loadingImage;
if (imageSrc)
loadingImage = imageSrc;
else loadingImage = "ajax-loader.gif";
DWREngine.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';
}
});
DWREngine.setPostHook(function() {
$('disabledImageZone').style.visibility = 'hidden';
});
}
Just drop that into util.js, clear your cache and reload your page. It should then be accessible.
All you have to do now is change your code to call the new function right before executing your Ajax call (like this):
DWRUtil.useLoadingImage("/images/ajax-loader.gif");
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'publishFeed', fid, doEchoResult);
If you simply specify it like that, the function will create a DIV with an ID of “disabledImageZone” and an image with an ID of “imageZone” and will display the indicator in the upper right hand corner of the browser. If you want to have some flexibility in where your Ajax indicator will display, then just create your own DIV with a child image inside wherever you want the indicator to appear (like this):
I hope this helps someone out and thanks again Rob, for building AjaxCFC. Its awesome.
Rey…
