Solved

simple javascript upload progress bar

Posted on 2004-10-13
8
5,662 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
 

Author Comment

by:dblacker
ID: 12302695
could you give an example of putting it into a session variable?
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
radio button value 3 45
jQuery Time Off Event 20 42
Need to learn promise API 2 28
Put upload button on your image and change it 2 22
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now