Long page load times

Report · Aug 24, 2008

Hello. I am running ImageCFC on my site. Users can upload images and then I run the CFC to resize them. It is taking a VERY long time to do this. Is there a good way to let the user know the images are uploading and to be patient. I used to just put in red bold text at the Submit button to "Please be patient as your images upload" but I'm looking for something a little more savvy. I would like to have a page load saying "Upload Successful" or even "Upload in Progress" while the code runs in the background. Recently I've seen the pages where you hit submit on a form and the whole browser window darkens except for a small notification box in the middle of the page that says something like "In progress" or one of those moving circle graphics or even a progress bar. Can anyone suggest a solution?

Report · Aug 24, 2008

Disable the submit button and change it to something like working:

<script type="text/javascript">

</script>

<input type="submit" name="mysubmit" id="mysubmit" value="Upload Images"
onclick="SubmitTheForm();">

--
Ken Ford
Adobe Community Expert Dreamweaver/ColdFusion
Fordwebs, LLC
http://www.fordwebs.com

"idesdema" <webforumsuser@macromedia.com> wrote in message
news:g8s48l$o8q$1@forums.macromedia.com...
> Hello. I am running ImageCFC on my site. Users can upload images and
> then I
> run the CFC to resize them. It is taking a VERY long time to do this. Is
> there a good way to let the user know the images are uploading and to be
> patient. I used to just put in red bold text at the Submit button to
> "Please
> be patient as your images upload" but I'm looking for something a little
> more
> savvy. I would like to have a page load saying "Upload Successful" or
> even
> "Upload in Progress" while the code runs in the background. Recently I've
> seen
> the pages where you hit submit on a form and the whole browser window
> darkens
> except for a small notification box in the middle of the page that says
> something like "In progress" or one of those moving circle graphics or
> even a
> progress bar. Can anyone suggest a solution?
>
>

Report · Sep 01, 2008

I am currently using this solution. Thank you. I was wondering if there's a way to include an image in addition to greying out the submit button. That way there is one more visual cue for the user to just chill while the code is thinking. Any thoughts?

Report · Sep 01, 2008

jQuery has at least 2 plug-ins - BlockUI and Impromptu - that will
dim/lighted the page which showing a message or modal-like window.

I have used both, but never for the reason you are looking for... not
sure how they will perform with form submission and/or cflocation...
Maybe i should try it now...

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Sep 01, 2008

the simplest of tests worked well:

you will need to download jQuery [ http://jquery.com/
and jquery.BlockUI [ http://malsup.com/jquery/block/ plug-in.

pay attention to the submit button's onClick event below...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test block ui with form submission</title>
<script src="includes/js/_jquery.pack.js"></script>
<script src="includes/js/jquery.blockUI.js"></script>
</head>
<body>
<cfif isdefined('form.submitbtn')>
You typed: <cfoutput><cfif
len(trim(form.text1))>#form.text1#<cfelse>nothing,
apparently...</cfif></cfoutput>
</cfif>
<br />
<form action="test_blockui.cfm" method="post">
<input type="text" name="text1" />
<br />
<br />
<input type="submit" name="submitbtn" value="send!"
onclick="$.blockUI();this.form.submit();" />
</form>
</body>
</html>

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Sep 01, 2008

oops...

this: <cfif isdefined('form.submitbtn')>
should be this instead: <cfif isdefined('form.text1')>

with $.blockUI() call it apparently removes the button clicked on from
the form scope...

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Aug 24, 2008

Disabling the submit button is a horrible idea. The simplest way to go about this is to put a message at the top of your action page and then cffflush it. You can put animated gifs and such there too.

If you want to get more complicated, there are progress bars out there, but I don't think they are written in Cold Fusion.

Report · Aug 24, 2008

Hi Dan. I think this is more along the line of what I wanted to do. So wht does the cfflush do?

Would it be something like...

<html>
Chunk of design code with message to be patient...

<cfml>
Cfml code here with actions to database
</cfml>

</html>

???

Where does the cfflush go and what does it do exactly? (Never used it)

Report · Aug 27, 2008

ColdFusion Progress Bar

cfflush has some limitations when used with tags like cfcontent, cfcookie, cfform, cfheader, cfhtmlhead, cflocation, and SetLocale. There may be errors also when it is used within the body of cfsavecontent, cfquery, and custom tags. See livedocs.

Another option is to use your <meta> tag.
Solution:
--> Load a please wait message with an animated gif progress bar
--> refresh with your <meta> tag and
--> exit
<cfif not isDefined('url.loaded') or url.loaded is "no">
<meta http-equiv="refresh" content="8;url=yourPage.cfm?loaded=yes">
<table>
<tr>
<td><p>Retrieving your data. Please wait... </p></td>
<td><img src='yourAnimatedGIF.gif'></td>
</tr>
</table>
<cfexit>
</cfif>

Amend your refresh time as desired.

Report · Aug 27, 2008

I don't think this will work will it? On the form submit, that is the page that hangs, not the recieving page. I also don't want to refresh and page because I don't want code re-executing.

Basically all I want to do is have a little animated gif popup after Submit is clicked that says... Please be patient.

Simple request right?

Report · Aug 28, 2008

If you want your progress bar on the form page, just wrap your progress bar within a <cfif isDefined(“form.submit”)> tag. This assumes you have named your submit button as “submit”.
It may be easier to have an action page different from the form page and have the please wait message on the action page. A <cflocation> tag can be placed on the action page to redirect as desired.

Report · Aug 28, 2008

As Adam has already pointed out, this won't work.

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Report · Aug 27, 2008

http://www.fordwebs.com/examples/light-file/index.cfm

--
Ken Ford
Adobe Community Expert Dreamweaver/ColdFusion
Adobe Certified Expert - Dreamweaver CS3
Fordwebs, LLC
http://www.fordwebs.com

"idesdema" <webforumsuser@macromedia.com> wrote in message
news:g942kh$3g3$1@forums.macromedia.com...
>I don't think this will work will it? On the form submit, that is the page
> that hangs, not the recieving page. I also don't want to refresh and page
> because I don't want code re-executing.
>
> Basically all I want to do is have a little animated gif popup after
> Submit is
> clicked that says... Please be patient.
>
> Simple request right?
>

Report · Aug 25, 2008

cfflush puts anything that can be displayed, text, images, etc, onto the client immediately whether the rest of the page has finished processing or not. It's a handy way to take away the link/form so that they don't continously click the button while your code is processing.

Report · Aug 27, 2008

> Disabling the submit button is a horrible idea.

It's a pretty standard approach to preventing double-submits of forms,
actually.

> The simplest way to go about
> this is to put a message at the top of your action page and then cffflush it.

Won't work. No CF code executes until after the web server has finished
receiving the request from the browser. And in this case, the request
includes the file being uploaded.

So your CF stuff to say "hang on whilst that uploads..." isn't going to be
run until after the upload has finishes.

I don't do UI stuff, I'm afraid, so I've devoid of suggestions bar also
asking on a client-side-scripting / design / UI forum (which a CF formum
isn't, really). Although other people here will no-doubt have some ideas.

Did you google about the place to see what other people have done?

--
Adam

Report · Aug 27, 2008

Hi,
Here's how to do it:
1) include in the page the html for the "busy"-message, but hide it with css
2) as soon as the form gets submitted, execute a javascript function that shows the message on top (z-index) of the other content

==========EXAMPLE=================================================
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD></HEAD>

<SCRIPT language="JavaScript">var child_window= null;
function submit_form(info){
document.getElementById('busy-curtain').style.display= 'block';
document.getElementById('busy-alert').style.display= 'block';
document.getElementById('busy-info').innerHTML= info;
document.getElementById('primary').submit();
}

</SCRIPT>

<style type="text/css">

div#busy-curtain{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: #ffffff;
filter: alpha(opacity=80);
opacity: 0.6;
-moz-opacity: 0.6;
display: none;
z-index: 900;
}
div#busy-alert{
position: absolute;
width: 400px;
height: 200px;
margin: -100px 0px 0px -200px;
top: 50%;
left:50%;
border: 2px solid #FFB300;
background-color: white;
display: none;
z-index: 900;
}
div#busy-info{
padding: 20px 60px 20px 60px;
color: #0071B3;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
z-index: 900;
}
</style>

<BODY>
<form id="primary" method="POST" enctype="multipart/form-data">
<TABLE width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
<TR>
<TD style="width:200px">
<LABEL for="primary_itm_file">File</LABEL>
</TD>
<TD nowrap>
<INPUT type="File" name="primary_itm_file_upload" style="width:100%"
onchange="submit_form('Uploading File')"
>
</TD>
</TR>
</TABLE>

<DIV id="busy-curtain"> </DIV>
<DIV id="busy-alert">
<DIV id="busy-info"> </DIV>
</DIV>

</BODY>
</HTML>

Long page load times

1 Correct answer