Skip to main content
A
Anonymous
August 24, 2008
Answered

Long page load times

  • August 24, 2008
  • 6 replies
  • 1448 views
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?
    This topic has been closed for replies.
    Correct answer Newsgroup_User
    Disable the submit button and change it to something like working:

    <script type="text/javascript">
    <!--
    var submitted = false;
    function SubmitTheForm() {
    if(submitted == true) {
    return;
    }
    document.myform.mysubmit.disabled = true;
    document.myform.mysubmit.value = 'Image upload in progress..........';
    document.myform.submit();
    submitted = true;
    }
    //-->
    </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?
    >
    >

    6 replies

    F
    fober1
    Inspiring
    August 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>

    N
    Newsgroup_User
    Inspiring
    August 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
    D
    Dan_Bracuk
    Inspiring
    August 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.

    A
    Anonymous
    August 25, 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)
    A
    A***
    Inspiring
    August 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.
    A
    Anonymous
    August 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?
    D
    Dan_Bracuk
    Inspiring
    August 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.
    N
    Newsgroup_UserCorrect answer
    Inspiring
    August 24, 2008
    Disable the submit button and change it to something like working:

    <script type="text/javascript">
    <!--
    var submitted = false;
    function SubmitTheForm() {
    if(submitted == true) {
    return;
    }
    document.myform.mysubmit.disabled = true;
    document.myform.mysubmit.value = 'Image upload in progress..........';
    document.myform.submit();
    submitted = true;
    }
    //-->
    </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?
    >
    >

    A
    Anonymous
    September 1, 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?
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices