You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Christian Riedel <sa...@nurfuerspam.de> on 2004/08/05 10:24:42 UTC

How to show a 'please wait' page while performing action

Hi,

I am trying to implement a page, that is shown during perfoming a file 
upload action.

When the upload form is submitted I want a new page to be displayed 
showing a 'please wait' message. While this page is shown the actual 
file-upload should be performed and then, when the upload is finished, 
the actual 'result-page' should be shown.

By now I can only submit the form. the file-upload starts and the page 
does not do anything until the upload is completed. So if the upload 
takes a long time the user does not really know what's happening.

Can anyone help me with this?

TIA

Christian
-- 
To reply to this posting directly use the following address and
remove the 'NO-SPAM' part: Riedel.Christian.NO-SPAM@gmx.net


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: How to show a 'please wait' page while performing action

Posted by Shailender Jain <sh...@teleatlas.com>.
Hi,

The most simple way to do this is by making use of JavaScript.
You can put some message like 'EXECUTING' or some image  in the same page
with the DIV tag.

This DIV tag should be in the hide mode by default. When the user says
'UPLOAD' then this DIV tag should be visible
and the rest of the tag should be invisible.

I have done this functionality for IE but it does not work in Netscape
because Netscape does not support DIV tag.
May be you can try on GOOGLE to get such code.

Regards
Shailender Jain

--Code Snippets


<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<!--<%@ taglib uri="/tags/menutags" prefix="menu" %>-->


<html:html locale="true">
<Head>



<script LANGUAGE="JavaScript">
<!-- Begin
// quick browser tests
var ns4 = (document.layers) ? true : false;
var ie4 = (document.all && !document.getElementById) ? true : false;
var ie5 = (document.all && document.getElementById) ? true : false;
var ns6 = (!document.all && document.getElementById) ? true : false;

function show(sw,obj) {
 // show/hide the divisions
 if (sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'visible';
 if (!sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'hidden';
 if (sw && ns4) document.layers[obj].visibility = 'visible';
 if (!sw && ns4) document.layers[obj].visibility = 'hidden';
}
// End -->
</script>

<style type="text/css">
<!--
.myLayersClass { position: relative; visibility: hidden; }
//-->
</style>

  <Title>Coverage Import Upload Page</Title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <script language="javascript">
   var valid=false;

 if (document.layers)
     document.captureEvents(Event.KEYPRESS);
     document.onkeypress = function (evt)
     {
        var key = document.all ? event.keyCode :evt.which ? evt.which :
evt.keyCode;
        if (key == 13)
            doSubmit();
     };

     function doSubmit()
     {

     valid=false;
     if(document.forms[0].theFile.value!="")
     {
//      alert(document.forms[0].theFile.value);
         if(getFileExt(document.forms[0].theFile.value))
         {
          valid=true;

            show(false,'div2');
            show(true,'div1');

         document.forms[0].submit();

      }
     }
     else
     {
        alert("Select a file for upload ");
        valid=false;
     }

      //  document.forms[0].submit();

     }

   function onLoadFunction()
  {
      show(false,'div1');


  }
 </script>

</Head>


<Body Bgcolor="#FFFFFF" Text="#000000" onLoad="onLoadFunction();">

<!--
 The most important part is to declare your form's enctype to be
"multipart/form-data",
 and to have a form:file element that maps to your ActionForm's FormFile
property
-->


<html:form action="/upload" enctype="multipart/form-data" >
<div id = "div2"  align="center">
<!-- Code for including the Menu on top -->
<%@ include file="/view/home/menu.jsp" %>

      <Hr Noshade Style="color:#FF6600; background-color:#FF6600;">
              <Table Width="100%" Border="0" Cellspacing="0"
Cellpadding="0">
                  <Tr>
                  <Td Height="18" Width="100%"
Class="HLinkWhiteBGGrayTextBold"><A Href="home.do"
Class="HLinkWhiteBGOrangeTextBold">Home</A> >> Coverage Import </Td>
                  </Tr>
              </Table>
     <Hr Noshade Style="color:#FF6600; background-color:#FF6600;">




   <Table Width="100%" Border="1" Cellspacing="1" Cellpadding="1">
   <Tr>
 <Td Width="30%" Class="whiteBGGrayTextBoldLeft" Height="22">
    &nbsp;&nbsp;Please select the file that you would like to
upload:&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="file" name="theFile" SIZE="25"><br>
    </Td>
    </Tr>
    <Tr>
    <Td Width="100%" Class="whiteBGOrangeTextNormalMiddle"
Valign="Middle"><A Href="javascript:doSubmit();">
                <Img Border="0" Src="images/buttonSubmit.jpg"
Alt="Submit"></A></Td>
     </Tr>

 </Table>


   <!--<Table Width="100%" Border="0" Cellspacing="1" Cellpadding="1">
     <Tr>
    <Td Width="100%" Class="whiteBGOrangeTextNormalLeft"
Valign="Middle"><A Href="javascript:doSubmit();">
                <Img Border="0" Src="images/buttonSubmit.jpg"
Alt="Submit"></A></Td>
     </Tr>
   </Table>-->
     <br ><br >


</DIV>
</html:form>

<table border="0" width="100%">
<tr align="center">
<td >
 <html:errors/></td>
 </tr>
 </table>
  </Body>
</html:html>
<CENTER>
<div id = "div1" ALIGN="CENTER">
            <Table Width="100%" Border="0" Cellspacing="0" Cellpadding="0"
ALIGN ="CENTER">
                <Tr>
                    <Td Height="18" Width="100%"
Class="HLinkWhiteBGGrayTextBold" ALIGN="CENTER">
                       <Img Border="0" Src="images/nsmailID.gif"> Coverage
Import in Progress.. <Img Border="0" Src="images/nsmailF7.gif">


                    </Td>
                <TR>

            </Table>
</DIV>
</CENTER>




Christian Riedel wrote:

> Hi,
>
> I am trying to implement a page, that is shown during perfoming a file
> upload action.
>
> When the upload form is submitted I want a new page to be displayed
> showing a 'please wait' message. While this page is shown the actual
> file-upload should be performed and then, when the upload is finished,
> the actual 'result-page' should be shown.
>
> By now I can only submit the form. the file-upload starts and the page
> does not do anything until the upload is completed. So if the upload
> takes a long time the user does not really know what's happening.
>
> Can anyone help me with this?
>
> TIA
>
> Christian
> --
> To reply to this posting directly use the following address and
> remove the 'NO-SPAM' part: Riedel.Christian.NO-SPAM@gmx.net
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org