Home of the ColdFusion Community
|
Mailing Lists
|
Home /
Groups /
ColdFusion Talk (CF-Talk)
Ajax Indicator Image Code for AjaxCFC
Author: Denny Valliant
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:47311#250103
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 -----
Author: Rey Bango
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:47311#250099
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 -----
Author: Denny Valliant
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:47311#250098
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.
>
...
Author: Rey Bango
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:47311#250084
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...
|
May 24, 2012
|
Latest Fusion Authority Articles
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
