I load my sql data using ajax. Then, I loop in sql data array and update progress on progress bar. But, the progress bar not fully occupied event the percentage reach 100%. Why is it so?
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
{
$.ajax
({
type :'POST',
url :'13_2.php',
success :function(data)
{
var data_array = JSON.parse(data);
for(i=0;i<data_array.length;i++)
{
perc =((i+1) / data_array.length * 100);
perc =(Math.round(perc * 100) / 100).toFixed(2);
var progressBar =document.querySelector('.progress div');
progressBar.style.width =perc;
progressBar.innerHTML =perc;
}
}
})
})
</script>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-striped" style="min-width:0px;"></div>
</div>
</div>
</body>
</html>
13_2php
<?php
$bdd =new PDO();
$query ="SELECT * FROM level_1";
$req =$bdd->prepare($query);
$req->execute();
$nRows =$bdd->query('select count(*) from level_1')->fetchColumn();
$result =$req->fetchAll();
$encode =json_encode($result);
echo $encode;
?>
Thanks in advance.
The percentage value we are adding to progressBar.style.width
must have %
symbol (ex:100%).
$.ajax
({
type :'POST',
url :'13_2.php',
success :function(data)
{
var data_array = JSON.parse(data);
for(i=0;i<data_array.length;i++)
{
perc =((i+1) / data_array.length * 100);
perc =(Math.round(perc * 100) / 100).toFixed(2);
width =perc+ "%";
var progressBar =document.querySelector('.progress div');
progressBar.style.width =width;
progressBar.innerHTML =width;
}
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.