We are working on a ProgressBar using Jquery UI. We are facing some problems, that we aren't getting values from PHP. We are unable to make a numerical loop that can return the value to Ajax based code.
Below is our code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#bardivs {
width:400px; /* or whatever the of the porgress bar is */
/*
The position of #bardivs must be something other than
static (the default) so that its children will be positioned
relative to it.
*/
position:relative;
}
#progresstext {
position:absolute;
top:0;
left:0;
}
</style>
<script>
var url = "http://localhost/sample/data.php";
$(function() {
var progress = 0;
//alert("some value" + value, value);
$("#progressbar").progressbar({ progress: 0 });
setTimeout(updateProgress, 500);
});
function updateProgress() {
var progress;
$.get(url, function(data) {
// data contains whatever that page returns
if (data < 100) {
$("#progressbar").progressbar("option", "value", data);
$("#progresstext").html("<p> Loading...<p>");
setTimeout(updateProgress, 500);
} else {
$("#progressbar")
.progressbar("option", "value", 100);
}
});
}
</script>
</head>
<div id="bardivs">
<div id="progressbar"></div>
<div id="progresstext"></div>
</div>
</html>
We don't have any idea how can we make the code in PHP use this loading function. It should in a loop.
There is no such progress: 0, the progress is measured by value and you should make the data INT because it comes as string:
$("#progressbar").progressbar({ value: 0 });
setTimeout(updateProgress, 500);
});
function updateProgress() {
var progress;
$.get(url, function(data) {
// data contains whatever that page returns
if (data < 100) {
$("#progressbar").progressbar({value: parseInt(data)});
$("#progresstext").html("<p> Loading...<p>");
setTimeout(updateProgress, 500);
} else {
$("#progressbar").progressbar({value: 100});
}
});
}
In php make sure you update the progress based on your scripts
<?php
$data = get_progress();
echo (int)$data;
?>