Am trying to query a large data from the database and I wish to display a progressbar. The code below returns data info from the server but the progressbar just jump into 100% while the ajax is still quering data.
I guess the proper way is to fake the progressbar timer or possibly make a timely ajax call eg per seconds to update the progressbar. can someone help me out with my issue. Thanks
below is the working code so far
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
function pf(event) {
if (event.lengthComputable) {
var percentComplete = Math.round((event.loaded/event.total)*100);
$(".progressbar").width(percentComplete + '%');
$(".progressbar").html('<span>' + percentComplete +' %</span>')
$(".progressbar").html('<span> ' + percentComplete +'% Completed</span>')
}
};
$("#sForm").on('submit',(function(e) {
e.preventDefault();
$('.progressbar').css('width', '0');
$.ajax({
url: "qdata.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", pf, false);
return xhr;
},
success: function(data)
{
if(data.trim() == "good"){
alert('completed now');
}
},
error: function()
{
}
});
}));
});
</script>
</head>
<body>
<div class="progressbar"></div>
<form id="sForm" action="qdata.php" method="post">
<div id="resultdata"></div>
<input type="submit" value="Submit now" />
</form>
</body>
</html>
qdata.php
// This is just sample db
//dbconfig.php
$result = $db->prepare('SELECT fullname FROM users');
$result->execute(array());
$count = $result->rowCount();
while ($row = $result->fetch()) {
$name=htmlentities($row['fullname'], ENT_QUOTES, "UTF-8");
}
echo 'good';
you can show percentage of progress in xhr as
xhr: function () {
//upload Progress
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//update progressbar
console.log('percent', percent);
$('.progressbar').css("width", percent + '%');
}, true);
}
return xhr;
},