Solved

simple javascript upload progress bar

Posted on 2004-10-13
8
5,670 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

776 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