Solved

simple javascript upload progress bar

Posted on 2004-10-13
8
5,683 Views
Last Modified: 2011-09-20
I know little to no javascript and basically rely on dreamweavers behaviors options to add finctions to my pages.

I have an annimated gif that I would like to use as a progress bar. I would like a new window to pop up displaying the annimated gif when the form is submitted. And then have the window automatically close when php page that handles the form redirects to another page after the upload is complete.

Again my experience with javascript is shaky at best so the more basic the solution the better it is for me.
0
Comment
Question by:dblacker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 9

Expert Comment

by:riyasjef
ID: 12302454
Hi

<script language="JavaScript">
function popup()
{
var pop = window.open("test.htm", "hello", 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=150,height=100');
pop.focus();
pop.write("<img src='image.gif'>");
}
</script>
<form onsubmit="return popup()">
...............

</form>

riyasjef
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12302614
sorry

change pop.write("<img src='image.gif'>");
to

pop.document.write("<img src='image.gif'>");

But to close the popup window when the download is  completed, u have to put the status of "upload" in a session variable...
ie; Put the session value to "ok" ,say  when download completes..and u have to periodically check (from pop up)
whether the session is set or not..

This can be done using XMLHTTP.

If it is set then close the popup using

window.close();

Riyasjef
0
 

Author Comment

by:dblacker
ID: 12302656
This works for getting the window to pop up - but i need the window to close after the form has
been processed and the files are uploaded...
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dblacker
ID: 12302695
could you give an example of putting it into a session variable?
0
 

Expert Comment

by:McFrosty
ID: 12304213
modification of riyasjef's code:

<script language="JavaScript">
var pop;
 function popup()
{
pop = window.open("test.htm", "hello", 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=150,height=100');
pop.focus();
pop.document.write("<img src='image.gif'>");
}

function closeit()
{
    pop.close();
}

</script>
<body onUnload="closeit();">
<form onsubmit="return popup()">
...............

</form>

The body tag should take care of it.  When the page is redirected, the popup window will close.

0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12307687
@McFrosty
 
as soon as the form is submitted the ..popup closes..But it should not
Here is my scripts

Hi these are the steps to follow

U have to put a hidden field in the page to which redirection is done and set its value as 1(ie; the last page loads in the parent)
and from the popup it will check whether this field is set or not
if set , then close it..


These are the changes

Main.html
-----------

<script language="JavaScript">
function popup()
{
      var pop = window.open("progressbar.html", "hello", 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=150,height=100');
      pop.focus();
}
</script>
<form onsubmit="return popup()">
...............

</form>

--------------------------

progressbar.html
-------------


<html>
<head>
<script>

function setTimer()
{
      T=setInterval("check()",100);

}

function check()
{

      if(window.opener)
      {
            if(window.opener.getElementById("hdnStatus"))
            {
                  if(window.opener.getElementById("hdnStatus")==1)
                  {
                        clearInterval(T);
                        window.close();
                        return false;
                  }

            }
      }
}

</script>
</head>
<body onload="setTimer()">
      <img src="progress.gif">
</body>
</html>

----------------------------------------------
Message.html  // Page To which redirection is done
-------------------------------------------------

<html>
<body>
      <input type="hidden" name="hdnStatus" value=1>
</body>
</html>

Riyasjef

0
 
LVL 9

Accepted Solution

by:
riyasjef earned 500 total points
ID: 12309497

there is a change in fn check()

function check()
{

      if(window.opener)
      {
            if(window.opener.document.getElementById("hdnStatus"))
            {
                  if(window.opener.document.getElementById("hdnStatus").value==1)
                  {
                        clearInterval(T);
                        window.close();
                        return false;
                  }

            }
      }
}
0
 

Expert Comment

by:McFrosty
ID: 12311285
That would do it...gj Ri
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question