By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,945 Members | 1,703 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,945 IT Pros & Developers. It's quick & easy.

Indeterminate progress bar

P: 13
Hi Guys

I need some help making a javascript progress bar. It can be a GIF image too and not so complex code is required. I am giving a sample code below and try to explain what I need.

<!-- Page1 code -->

[HTML]<html>
<body>
<form action="sec_test.php" method="post">
Enter the website address:
<input type="text" name="Path">
<input type="submit">
</form>
</body>
</html>
[/HTML]
<!-- Page2.php -->

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. $r=$_POST["Path"];
  3. $output=`tracert $r`;
  4. echo "<pre>";
  5. echo $output;
  6. echo "</pre>";
  7. ?>
What I need help with is that. All progress bars I have found in javascript have a specific timeout condition. But in my case, it is indefinite. Say if the user enters www.google.com, then the time it takes will vary from the time it would take to tracert www.yahoo.com. My actual code is more complex than this and might take 5 - 30 mins to load also. So I need some condition which tells that before the page loads and displays the result in Page2, it should display the loading bar and once the results are displayed, the loading bar should disappear. It can be a GIF image or a proper progress bar or anything for that matter. Could someone please give me some directions. I am fairly new to development and any help will be much appreciated. Its urgent too, kindly reply asap.

Thanks!!!


If javascript is not the right thing I should be working on, please let me know :)
Nov 8 '07 #1
Share this Question
Share on Google+
21 Replies


100+
P: 428
did you say 5 - 30 minutes?
Nov 8 '07 #2

P: 13
did you say 5 - 30 minutes?
PS: Tracert is just an example to replicate the problem that I am facing.

I am using a tool like Nessus through command line on Windows. It might take 5min to run a scan or may take 30min also, depending on the user input. I have done all the processing and it works fine. It runs the scan and displays the output too. However, there is a very long delay and Page1 seems to be halted for quite a long time.

But the problem is, even if I write a loading bar script in Page2, it will not display the loading bar until command prompt has finished processing and returns the result. This has been done using backticks in PHP

Expand|Select|Wrap|Line Numbers
  1.  
  2. $output=`tracert www.xyz.com`
  3.  
  4.  
or I can do it using Windows Scripting Host (WSH) too using the code below.

Expand|Select|Wrap|Line Numbers
  1.  
  2. $WshShell = new COM("WScript.Shell");
  3.   $ret="tracert.bat";     //batch file has the command --> tracert www.xyz.com
  4.   $oExec = $WshShell->Run($ret, 7, true);
  5.   break;
  6.  
  7.  
I am actually fine by just displaying some text saying... "Your Scan is running, please wait..."

Does not need to be a progress bar necessarily but I think I will be able to figure it out myself. Just need a tip from someone how this text can be displayed when I submit the website address and before the tracert is complete. Also, how to make it disappear when tracert returns its output.

Should I have some onunload javascript on Page1 instead of having it on Page2 onload, which can process tracert command in command prompt and then call Page2.php so that I can display the results. I am open to all options if I can display some progress indicator between the two pages.

Thank you in advance!
Nov 8 '07 #3

P: 13
I don't know if anyone read my question. But I don't need it now. I think its late for the answer. Thanks :)
Nov 9 '07 #4

P: 13
I don't know if anyone read my question. But I don't need it now. I think its late for the answer. Thanks :)
Hi All

Luckily I have again got some time to work on it. Can anyone please help?

Thanks...Your help will be much appreciated.
Nov 13 '07 #5

acoder
Expert Mod 15k+
P: 16,027
You can display an image that could already be present on the page, e.g.
[HTML]<img id="image" src="progress.gif" style="display:none">[/HTML] The style setting hides the image. Once you are ready to show it, set the display property to "block" or "inline", e.g.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("image").style.display = "block";
Nov 13 '07 #6

P: 13
You can display an image that could already be present on the page, e.g.
[HTML]<img id="image" src="progress.gif" style="display:none">[/HTML] The style setting hides the image. Once you are ready to show it, set the display property to "block" or "inline", e.g.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("image").style.display = "block";
Thanks for your reply. Displaying the image is not a problem but it displays the image after the command tracert is finished. Because tracert processing takes control from the web page and does not let any other command execute before it has finished processing.

I will be trying some Flash preloaders I think. Thanks for replying for my query.

Thanks!!!
Nov 16 '07 #7

acoder
Expert Mod 15k+
P: 16,027
So why not display the image before the tracert command is executed?
Nov 16 '07 #8

P: 13
I am sorry if this is an annoying one. If you try to run the command and make two php files doing this, you will notice that as soon as the user clicks Submit website address, the form gets submitted and the control is taken over by tracert command. Backticks function

[PHP]
`tracert www.xyz.com`;
[/PHP]

This command is similar to

[PHP]
$WshShell = new COM("WScript.Shell");
$tra="tracertCheck.bat"; //command for tracert www.xyz.com
$oExec = $WshShell->Run($tra, 7, true);
[/PHP]

What this code does is - it says on the Page 1 and does not load the tracert results until the command is finished. Also, it immediately passes the control to the command (or runs the batch file).

I even tried to make it from TRUE to FALSE but what that does is that it passes the control to Page2 immediately and starts exexuting the rest of the code on that page and there is no means left to track whether cmd has finished processing or not.This leads to another problem since I am using a database in the backend which fetches the results from SQL Server 2005. And I have SQL queries written on that page2. It starts executing the SQL queries at the same time resulting in incorrect results. And there is no place like - after submitting the Page1 and before executing Page2.

I admit it is difficult for me to explain the situation but I would like to ask you a favour please. Please try to run it. It will make sense to you what I am saying.

If I put a progressing.gif on Page 2, it will not display it until the command has finished processing and IE stays on Page 1 itself.

Thank you for trying to help me. If I get a solution, I will post it.

Regards.
Nov 18 '07 #9

acoder
Expert Mod 15k+
P: 16,027
How about putting the progress image on page 1 and displaying that as soon as submit is clicked?
Nov 18 '07 #10

P: 13
How about putting the progress image on page 1 and displaying that as soon as submit is clicked?
I will try it and let you know the results.

Thanks very much for contributing :)

Regards...
Nov 19 '07 #11

acoder
Expert Mod 15k+
P: 16,027
Keep us posted on your progress. Good luck!
Nov 19 '07 #12

P: 13
Keep us posted on your progress. Good luck!
Hi there,

I wrote a javascript onclick submit button to display a loading gif but then the form values does not get submitted to the next page and it keeps on displaying the GIF and there is no processing. If I try to display the GIF on Page 2 onload, it does not display it until the tracert scan is complete.

I tried to make a simple Ajax call. I know I can use onreadystatechange=4 which is after completion of PHP page and I have put Page2.php call on it but I tried other statechanges to display the GIF but it didnt seem to work.Might be I am not able to pass two values by post through ajax. I am getting confused at this stage to resolve such a simple thing on my own.

May be if someone could help me with an Ajax call to display a GIF until Page2.php is processing and once it is complete, display the results would be helpful :)

Thank you again!
Nov 20 '07 #13

acoder
Expert Mod 15k+
P: 16,027
I wrote a javascript onclick submit button to display a loading gif but then the form values does not get submitted to the next page and it keeps on displaying the GIF and there is no processing.
Can you show what code you used for this? If it doesn't work, we can take the Ajax route.
Nov 20 '07 #14

P: 13
Can you show what code you used for this? If it doesn't work, we can take the Ajax route.
Sure. Thank you!

Page1.php

[PHP]
<html>
<head>
<script type="text/javascript">
function progress()
{
document.write("tracert is running in the background");
document.write('<img src="show_loading.gif">');
document.myForm.submit(); //tried with and without this line of code
}
</script>
</head>
<body>
<form name="myForm" action="page2.php" method="post">
<input = "text" name ="IP"/>
<input type = "submit" name = "submit" onclick="progress();" />

</form>
</body>
</html>
[/PHP]

Page2.php


[PHP]
<?php
$ip = $_POST["IP"];
$result =`tracert $ip`;

echo "<pre>";
echo $result;
echo "</pre>";

?>
[/PHP]

Thanks!
Nov 20 '07 #15

acoder
Expert Mod 15k+
P: 16,027
You can't use document.write after the page has loaded.

Above your form, you could have a div:
[HTML]<div id="loading" style="visibility:hidden">tracert is running in the background.<img src="show_loading.gif"></div>
[/HTML]
Then in progress(), just replace the document.writes with:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("loading").style.visibility = 'visible';
Nov 21 '07 #16

P: 13
You can't use document.write after the page has loaded.

Above your form, you could have a div:
[HTML]<div id="loading" style="visibility:hidden">tracert is running in the background.<img src="show_loading.gif"></div>
[/HTML]
Then in progress(), just replace the document.writes with:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("loading").style.visibility = 'visible';
Many Many thanks to you!!! I didn't knew it was so simple - Sorry I was trying the wrong thing. Did not read anywhere that we can't use document.write after the page has been loaded or I might not have understood what the problem could be.

Lovely!!! You are a star!!!!

But just one last thing please, the gif image is not moving. The circle which shows loading is just there but not moving like a GIF should. If it can't be done, then also I am happy to just display the text. This would solve the purpose.

Thanks again!!! I am so glad that I posted my question here.

Regards...
Nov 21 '07 #17

acoder
Expert Mod 15k+
P: 16,027
Many Many thanks to you!!! I didn't knew it was so simple - Sorry I was trying the wrong thing. Did not read anywhere that we can't use document.write after the page has been loaded or I might not have understood what the problem could be.
Technically speaking, you could, but that would open the document for writing again which is not what you want.
But just one last thing please, the gif image is not moving. The circle which shows loading is just there but not moving like a GIF should. If it can't be done, then also I am happy to just display the text. This would solve the purpose.
You need an animated gif. Are you sure it is animated?
Nov 21 '07 #18

P: 13
Technically speaking, you could, but that would open the document for writing again which is not what you want.
You need an animated gif. Are you sure it is animated?
Hi Acoder,

Yes it is an animated GIF. I think we have displayed the GIF on click and passed the control to Page2 which is want I wanted. But GIF is not working. And I am sure this time that its an animated one. When the code was not right, it used to iterate. :)
Nov 21 '07 #19

acoder
Expert Mod 15k+
P: 16,027
Yes it is an animated GIF. I think we have displayed the GIF on click and passed the control to Page2 which is want I wanted. But GIF is not working. And I am sure this time that its an animated one. When the code was not right, it used to iterate. :)
It may be because the form is being submitted to the next page and the image is 'frozen'.
Nov 22 '07 #20

P: 13
It may be because the form is being submitted to the next page and the image is 'frozen'.
Yes that's what I think it is. But displaying just the text would do for me. Thanks a lot...
Nov 23 '07 #21

acoder
Expert Mod 15k+
P: 16,027
No problem, you're welcome.

Post again any time if you have more questions.
Nov 23 '07 #22

Post your reply

Sign in to post your reply or Sign up for a free account.