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): <div id="disabledImageZone" style="visibility: hidden; float: left;"><img id="imageZone" src=""></div><div id="echoFeedPublishResult" style=" float: left; font-style: italic; margin-bottom: 10px; font-size: 10pt; font-weight: bold;"></div> 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
