Long page load times

#1 08-24-2008, 01:03 PM

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?

#2 08-24-2008, 01:09 PM

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

#3 08-24-2008, 07:50 PM

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.

#4 08-24-2008, 10:08 PM

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)

#5 08-25-2008, 07:44 AM

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.

#6 08-27-2008, 11:46 AM

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.
http://livedocs.adobe.com/coldfusion...mon/html/wwhel
p.htm?context=ColdFusion_Documentation&file=000002 55.htm

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.

#7 08-27-2008, 12:10 PM

> 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

#8 08-27-2008, 01:24 PM

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?

#9 08-27-2008, 02:06 PM

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

#10 08-27-2008, 02:29 PM

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>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode