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");
// send data to CF
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". 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...
~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four
times a year.
http://www.fusionauthority.com/quarterly
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:250084
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
