I have a php page that takes about 50 seconds to load. During that time I wanted the Bootstrap Progress Bar to run. But this runs only after the page loads.
Here is my code:
<head>
<title>Harvest Expense Report</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dropdown.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var progressBar = $('.progress-bar');
var percentVal = 0;
window.setInterval(function(){
percentVal += 2;
progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
if (percentVal == 100)
{
var link = document.getElementById('nav-ask');
link.style.display = 'none'
}
}, 500); })
</script>
</head>
<body>
<!--Progress Bar-->
<div class="row">
<div class="col-md-12">
<div class="progress"id="nav-ask">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose a Month
</button>
<div class="dropdown-menu" select name="Dropdown_Month" id="month_dropdown" aria-labelledby="dropdownMenuButton">
<option class="dropdown-item" href="#" value="This">This Month</option>
<option class="dropdown-item" href="#" value="Last">Last Month</option>
</div>
</select>
</div>
<br>
<br>
<br>
<h3><?php echo date('M Y'); ?></h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
</thead>
<?php require_once( 'connection.php' );
$result= $api->getUsers();
$users=$result->data;
$range= Harvest_Range::lastMonth();
foreach($users as $key=>$value){
$user_id=$value->get("id");
$first_name=$value->get("first-name");
$last_name=$value->get('last-name');
$result_expenses=$api->getUserExpenses($user_id, $range);
$expenses_data=$result_expenses->data;
$total_cost=0;
foreach($expenses_data as $key=>$value){
if($value->get("is-locked")=="true"){
$total_cost=$total_cost+$value->get("total-cost");
}}
?>
<?php if($total_cost!=0){?>
<tbody>
<tr>
<td> <?php echo $first_name; echo " ".$last_name; ?> </td>
<td> $ <?php echo $total_cost; ?> </td>
</tr>
</tbody>
<?php }}?>
</table>
</body>
</html>
Here is the link to the PHP page. Any ideas on how can I run the progress bar before the page loads? Currently it loads after the page has fully loaded. I would like to run this as soon as a user enters the URL in the browser.
By default, PHP is only going to send the HTML/output to the browser when it's completely done. This is why you don't see the progress bar until the page has finished loading. There are two options to get around this:
You can use Output Buffering to send page content before your PHP script has finished. Depending on your server config this option may or may not work for you. Read about it here: http://php.net/manual/en/book.outcontrol.php
Change your page to use AJAX to dynamically update the page. When the page loads you will only show the progress bar. Then you make an AJAX call to another PHP script which will do the work necessary to get your data. When it's done it can return the data to the first page and you can use JavaScript/jQuery to hide the progress bar and update the page content.
You're better off going with option 2 as this is the more currently accepted web application standard.