Solved

how to show progress bar

Posted on 2013-05-24
7
614 Views
Last Modified: 2013-06-02
Hello,

I have web page that submit some information to the server (postback the page). On the server, I  launch an external program to do some processing (async) and return to current page. The external  does some work and write the percent complete and action to a file.  I would like the  user to be inform of the process. So, when user return to the current page again , I would like to show a status bar with progress.and keep then on on the page until  job is complete
----
 When the user return to the page  how do I show the progress bar..Do I have re-direct to another page and show the status  ? or can I show a modal dialog with a progress bar in the current page (not sure how to do this action)

[php, jquery]

Thanks for the help
0
Comment
Question by:SiemensSEN
7 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 300 total points
ID: 39196238
What you do is on the page you have some javascript that runs on a setInterval

This makes an AJAX call back to the server to fetch the percent complete - how you display the results is entirely up to you - here is some sample code to demonstrate the point

Here is sample code (you can view it in action here http://www.marcorpsa.com/ee/t236.html)

The HTML file
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var progressWidth = 0;
var url = "progress.php";
var progint = setInterval("progressUpdate()", 3000);

$(function () {
  progressUpdate();
  progressWidth = $('#progressBarContainer').width();
});

function progressUpdate()
{
  $.get(url,'', function(data) {
    val = (data.percent - 1) * progressWidth;
    $('#progressBarContainer').animate({backgroundPosition: val + 'px 0'}, 150);
    $('#progressBarContainer').html(parseInt(data.percent * 100) +'% complete');
    if (data.percent >= 100) clearInterval(progint);
  }, 'json');
}
</script>
<style type="text/css">
#progressBarContainer {
  width: 200px;
  height: 20px;
  position: relative;
  text-align: center;
  z-index: 100;
  border: 1px solid #efefef;
  font-size: 12px;
  font-family: arial;
  line-height: 20px;
  background: pink url(images/progress.gif) no-repeat -190px 0;
  color: #eee;
}
</style>
</head>
<body>
<a href="progress.php?reset">Reset</a>

Progress

<div id="progressBarContainer">
  0% complete
</div>
</body>
</html>

Open in new window

The PHP simulator
session_start();
if (isset($_GET['reset'])) {
  $_SESSION['progressBar'] = time();
  header('location: t236.html');
  die();
}

$data = array('percent' => 0);
if (isset($_SESSION['progressBar'])) {
  if (empty($_SESSION['progressBar'])) {
    $_SESSION['progressBar'] = time();
  }
  
  $val = time() - $_SESSION['progressBar'];
  if ($val > 30) $data['percent'] = 1;
  else {
    $data['percent'] = $val / 30;
  }
}
else {
  $_SESSION['progressBar'] = time();
}
die(json_encode($data));

Open in new window


Background image for progress attached
progress.gif
0
 

Author Comment

by:SiemensSEN
ID: 39197190
Thanks you  for the answer and the sample code. However, I  need your advise on how to do the navigation.

The user complete the form and submit the request to server. I could forward the user to a new page and display the status bar but  I willl have to disable the 'Browser back' option until the job is done

Is it possible, to redirect the user to the same form and popup a display a modal dialog box with the progress bar

The input form is postback to the server and does not use AJAX to post..

Or would you suggest a different method
0
 
LVL 4

Assisted Solution

by:AnuTiji
AnuTiji earned 25 total points
ID: 39198957
Hi

Before posting the data to the server, show progress bar indicator.When you post data to the server, write a value to the cookie and from client side by using timer check whether there is value in the cookie. If the value is present in the cookie, hide the progress bar.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Assisted Solution

by:vid_yag
vid_yag earned 25 total points
ID: 39201202
Hello SiemensSEN,

Best thing would be to show progress bar on the same page inside modal box and use setInterval to fetch updated data on some 1-2 seconds interval. Once external program completes the process you can either hide modal box or trigger some page refresh using js.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39201702
The solution depends on what you want to achieve.

A) You want to show a progress bar on a particular page until a particular process is done - but user can (will) browse to other pages in the interim

B) You want to stop navigation on the site until the process is finished showing a progress bar while the background process is incomplete

Which of these (or is there another option) are you wanting?
0
 

Author Comment

by:SiemensSEN
ID: 39202121
Thanks for your help..

I would like the user to wait for the job to complete. ... Option B
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39202282
Ok - obviously taking into account that you cannot force the user to stay on the page - the user can browse away and return in which case do you want to cater for this i.e. if a user hits the back button - what happens - do you want to force a redirect back to the status page?

If the user browses away and returns - do you want to force the user to a specific page with a status.

Modal popups in browsers are simulated - they are not true modals - you are just hiding the rest of the page behind a div on top of which sits the div that contains your code - so you need to take the above questions into consideration - there is more to this than just poping a pseudo dialog.

The code I posted earlier is all you need on the page - you can locate it in a div which you can style to be a popup - you can also have it so that

a) You are always redirected to this page if there is a status pending
OR
b) each time you return to the page the updated status is shown and progress continues - as per the posted example.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
wordpress issue 2 24
Upgrades AWS EC2 & RDS Boxes 1 12
showing numeric numbers 2 11
How can I do a Select All on this page? 8 13
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
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…

746 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

13 Experts available now in Live!

Get 1:1 Help Now