Re: How to show a work-in-progress icon while waiting for a web service
Good feedback. I am using the ColdFusion error checking of cfinput and cfselect to validate the input in the form before processing. If I simply JavaScript the button to either pop an image or inhibit the button, would it trigger that even though the validation failed? I'd not want to have the situation where the validation failed but the working icon or inactive button were left on the page. ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology-Michael-Dinowitz/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:333635 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to show a work-in-progress icon while waiting for a web service
Good feedback. I am using the ColdFusion error checking of cfinput and cfselect to validate the input in the form before processing. If I simply JavaScript the button to either pop an image or inhibit the button, would it trigger that even though the validation failed? I'd not want to have the situation where the validation failed but the working icon or inactive button were left on the page. ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology-Michael-Dinowitz/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:333638 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to show a work-in-progress icon while waiting for a web service
Good feedback. I am using the ColdFusion error checking of cfinput and cfselect to validate the input in the form before processing. If I simply JavaScript the button to either pop an image or inhibit the button, would it trigger that even though the validation failed? I'd not want to have the situation where the validation failed but the working icon or inactive button were left on the page. ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology-Michael-Dinowitz/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:333640 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to show a work-in-progress icon while waiting for a web service
Hi John,
The following will run the JavaScript (which disables submit button, and
displays the image) only if CF form validation passes:
style
#myImageID {display:none;}/*hide image*/
/style
script type=text/javascript
/* ![CDATA[ */
var submitted = false;
var imageID;
function myFunction(frm, bttnID, imgID) {
if (!submitted) {
submitted = true;
imageID = imgID;
frm[bttnID].disabled = true;
setTimeout('document.getElementById(imageID).style.display =
inline', 100);//delay for IE
return true;
} else {
return false;//disable 2+ submits
}
}
/* ]] */
/script
cfform name=myForm onsubmit=return myFunction(document.myForm,
'myButtonID', 'myImageID') enctype=multipart/form-data
cfinput type=file name=myField value= required=yes /
cfinput type=submit name=myButtonID value=click me /
/cfform
img id=myImageID src=PleaseWait.gif alt=Please Wait /
The JS could be placed in an external script, but CF mixes its JS w/ XHTML..
(including generation of the form's onsubmit attribute, and placement of the JS
call within).
Credit, where credit is due: http://tutorial8.learncf.com
Hope that helps!,
-Aaron Neff
Good feedback.
I am using the ColdFusion error checking of cfinput and cfselect to
validate the input in the form before processing. If I simply
JavaScript the button to either pop an image or inhibit the button,
would it trigger that even though the validation failed?
I'd not want to have the situation where the validation failed but the
working icon or inactive button were left on the page.
~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology-Michael-Dinowitz/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:333678
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
RE: How to show a work-in-progress icon while waiting for a web service
One simple way to do it is just to disable the submit button and change it's text to something like Loading data That way you give instant feedback to the user and it's someplace they're already looking. andy -Original Message- From: John Pullam [mailto:jpul...@mcleansystems.com] Sent: Wednesday, May 12, 2010 5:55 PM To: cf-talk Subject: How to show a work-in-progress icon while waiting for a web service I have an app which calls a web service on a different computer to do work on its behalf and sometimes my users are impatient and hit the invocation button a second time, which causes problems. I'd like to pop some kind of work-in-progress or busy icon on the web page while this service is executing but am drawing a blank on how to do that. I can envision a hidden div with some kind of animated gif but am not sure of exactly how to activate it and then deactivate it when the service returns. Would appreciate any ideas on how to do this. ~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology-Michael-Dinowitz/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:333631 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
Re: How to show a work-in-progress icon while waiting for a web service
Hi John,
This code may not be exactly what you need, but hopefully it helps:
style
#myImageID {display:none;}/*hide image*/
/style
cfform
cfinput type=button name=myButtonID value=click me /
/cfform
img id=myImageID src=PleaseWait.gif alt=Please Wait /
script type=text/javascript
/* ![CDATA[ */
var buttonID = 'myButtonID';
var imageID = 'myImageID';
var submitted = false;
var trigger = document.getElementById(buttonID);
trigger.onclick = function() {
if (!submitted) {
submitted = true;
setTimeout('document.getElementById(imageID).style.display =
inline', 100);//delay for IE (help prevent 'frozen' animated gif)
return true;
} else {
return false;//disable 2+ clicks
}
}
/* ]] */
/script
Thanks!,
-Aaron Neff
I have an app which calls a web service on a different computer to do
work on its behalf and sometimes my users are impatient and hit the
invocation button a second time, which causes problems. I'd like to
pop some kind of work-in-progress or busy icon on the web page while
this service is executing but am drawing a blank on how to do that. I
can envision a hidden div with some kind of animated gif but am not
sure of exactly how to activate it and then deactivate it when the
service returns.
Would appreciate any ideas on how to do this.
~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology-Michael-Dinowitz/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:333633
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
