?
Solved

simple javascript upload progress bar

Posted on 2004-10-13
8
Medium Priority
?
5,694 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

777 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