update progress bar using ajax request seconds
Basicaly, I'm performing an AJAX request for an external login system, how can I update the progress bar based on the length of the request?
For example, the request takes between 1.30s to 1.40s to complete, how can I update an progress bar based on certain intervals, like update it 10% every 10ms or something, here's the HTML layout for the progress bar
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
<span class="sr-only">65% Complete</span>
</div>
</div>
The length of the progress bar is determined using the width: 65%
attribute
The idea is to basically get it to look like it's updating based on the request so when the request is complete the percentage bar is full
I think this post is quite clear http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
Posting this for future reference (should the blog be removed):
$.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
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
//Do something success-ish
}
});
You can use jquery form plugin and use this method 'uploadProgress' like this:
$('#register-form').on('submit', function(e) {
e.preventDefault();
$(this).ajaxSubmit({
url: url,
uploadProgress: function (event, position, total, percentComplete){
$('.progress-bar').width(percentComplete + '%');
$('.progress-bar > p').html(percentComplete);
},
success: function (response, statusText, xhr, $form) {
// TODO: You'll need to do some custom logic here to handle a successful
// form post, and when the form is invalid with validation errors.
},
error: function(a, b, c) {
// NOTE: This callback is *not* called when the form is invalid.
// It is called when the browser is unable to initiate or complete the ajax submit.
// You will need to handle validation errors in the 'success' callback.
console.log(a, b, c);
}
});
});