Ajax Indicator Image Code for AjaxCFC

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...

Thanks for sharing Rey!  I've been meaning to get something pretty... Yay! > > 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. > ...

No sweat Denny. Go here to pick up a cool Ajax indicator: http://www.ajaxload.info/ It creates on for you on the fly. Very cool! Rey Denny Valliant wrote: ----- Excess quoted text cut - see Original Post for more -----

Ooh la la! (sorry, my French is pretty bad;) I'd like to second the thanks for AjaxCFC, too. Woot, good stuff, this async'n... ----- Excess quoted text cut - see Original Post for more -----