The link http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ provided the progress event listener integrated to the code of my previous post.
The first adjustment to the code is to give an ID to the div holding the class .progress-bar and set the CSS style width to 10%. The CSS width will show the status of the progress. When the AJAX has completed the JSON response download, the width should be set to 100%
Since we are concerned with the progress of the AJAX download, we tweak the corresponding event listener. The idea is to let the AJAX call "listen" how much progress is made on the download and update the progress bar width.
On success of AJAX download, I've commented out the hiding of the progress bar. On the test run, I would want to retain the bar.
And speaking of test run, I now execute the code. Initially, the progress bar is set to 10%
When AJAX starts to download the JSON response, the progress bar slides up until it hits 100%.
The full code is listed below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Loader</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--nivo stylesheets-->
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<script>
$(document).ready(function (){
function updateprogress(){
}
function init(){
$.ajax({
xhr: function(){
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
var value = percentComplete * 100;
value = value+"%";
$('#loadingbar').width(value)
console.log(percentComplete);
}
}, false);
return xhr;
},
url: 'gethours.php?action=get-time',
dataType: 'json',
success: function(json) {
//var jlength = Object.keys(json.return_param).length;
//alert('parameter1 = '+jlength);
//$("#loading").hide();
},
error: function(xhr, ajaxOptions, thrownError) {
$("#loading").hide();
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText + "\r\n" + "Err-01");
}
});
}
init();
})
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="loading">
<div class="progress progress-striped active">
<div id="loadingbar" class="progress-bar" style="width:10%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Need help on some web coding task? Let me know about it. Email me at jun.dolor@gmail.com and I'll be more than happy to blog about it with my thoughts.
Hosting of the sample pages were provided for by the following:
No comments:
Post a Comment