Solved

simple javascript upload progress bar

Posted on 2004-10-13
8
5,673 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how can i turn the array into an object 4 50
jQuery Dialog Autoresize Bug 2 25
jQuery force form POST 7 52
Why is initialize not a function? 8 26
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

821 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