Web applications always have some latency whether we like it or not.When the user clicks the button on the screen there is some time spent in sending the request to the server.On the server after processing the request ,the response needs to be returned to the user.So there is delay because the request and response needs to be send via the network.Meanwhile the end user is not aware about the status of the request and how much more time the request will take to complete.
Using the progress bar widget we can inform the user about the progress of the operation.We can inform the user about how much more time it will take to complete the operation.Without the status update about the operation user can get confused.
Progress bar widget like the other jQuery widgets is easy to create.We need to call the progressbar() method on the element to which we need to attach the progressbar.
In the following example we will create a progress bar and then update its status by 25% after every 5 seconds .
1)First we need to declare the div on which we want to call the progressbar method.Also as we call the progressbar when some operation is being performed so we will declare a button on the click of which we will show the progressbar.
<div id="progressStatus" style="width:300px"></div> <input type="button" id="btnSubmit"></input>
2) In the document ready event we are attaching the click event to a button.We will define the logic to show the progress bar within this event handler
$(document).ready(function () {
$("#btnSubmit").click(function(){
})
});
3) Inside the click event handler we define the following logic to attach the progressbar widget to a div.
var interval, maxVal, val, duration;
maxVal = 500, val, duration = 5000;
$(document).ready(function () {
$("#btnSubmit").click(function () {
interval = setInterval(IncrementProgressBar, duration);
function IncrementProgressBar() {
if (!$('#progressStatus').is(':ui-progressbar')) {
$("#progressStatus").progressbar({
value: 100,
max: maxVal
});
val = $("#progressStatus").progressbar('value');
}
else {
val = $("#progressStatus").progressbar('value');
val = val + 100;
$("#progressStatus").progressbar('value', val);
}
if (val == maxVal)
clearInterval(interval);
}
})
setInterval is a javascript method which evaluates an expression after a specified duration.So the IncrementProgressBar method will be called after every 5 seconds.
In the IncrementProgressBar method we are attaching the the progressbar to the div if it is not already attached.maxVal is a variable which we have defined above with a value of 500,so our progress bar will be incremented by 100 from 0 to 500.
if (!$('#progressStatus').is(':ui-progressbar')) {
$("#progressStatus").progressbar({
value: 100,
max: maxVal
});
Like the other jQuery widgets we can call the progressbar by passing a javascript object as an argument.In the above code we are passing a javascript object with just two properties value and max,value represesnts the current value of the progress bar while the max property represents the maximum value that the “value” propery can be incremented.
$("#progressStatus").progressbar({
value: 100,
max: maxVal
});
If we try to increment the value property with a value more than maximum the property value is set to maximum.
When the value of the progressbar is equal to maxvalue then we are clearing the interval as we don’t want our method to be called once the progressbar’s value is incremented to maximum value.
Below is the complete javascript and html .
<html>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
var interval, maxVal, val, duration;
maxVal = 500, val, duration = 5000;
$(document).ready(function () {
$("#btnSubmit").click(function () {
interval = setInterval(IncrementProgressBar, duration);
function IncrementProgressBar() {
var progressBar = $("#progressStatus").data("progressbar");
if (!$('#progressStatus').is(':ui-progressbar')) {
$("#progressStatus").progressbar({
value: 100,
max: maxVal
});
val = $("#progressStatus").progressbar('value');
}
else {
val = $("#progressStatus").progressbar('value');
val = val + 100;
$("#progressStatus").progressbar('value', val);
}
if (val == maxVal)
clearInterval(interval);
}
})
});
</script>
<body>
<form>
<div id="progressStatus" style="width:200px"></div>
<input type="button" id="btnSubmit" value="submit" />
</form>
</body>
</html>
If we browse the page containing the above html then on clicking the submit button our progress bar will be incremented till it’s value becomes 500.
Leave a Reply