16

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

Curtis
  • 2,646
  • 6
  • 29
  • 53
  • 5
    My suggestion would be to not. At 1.3 to 1.4 seconds (in most cases), the user is hardly going to be thinking 'I wonder how long I've got left until I'm finished logging in'. Use a [loader gif](https://www.google.co.uk/search?q=loader+gif). – George Oct 02 '13 at 14:40
  • 1
    How do you know the request is going to take 1.3-1.4 and not 6 seconds on a slow connection? – Kevin B Oct 02 '13 at 14:40
  • @KevinB Was that aimed at the OP? – George Oct 02 '13 at 14:42
  • @Kevin B i quess he meant that the server procceses the request for ~1.5s – Eugen Halca Oct 02 '13 at 14:43

2 Answers2

33

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
    }
 });
Yoeri
  • 2,249
  • 18
  • 33
  • 2
    Glad I could help :) Also: if this is indeed the answer to your problem, mark it that way :) so that it is clear for everyone your problem is solved :) – Yoeri Oct 02 '13 at 14:43
  • Thanks @Yoeri! @Curtis, you should mark the answer as correct, I might have found it more quickly that way... – terraling Dec 03 '13 at 16:47
  • I tried using above code , does not work for me. it looks like ```evt.lengthComputable``` doesnot work.http://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr – django Mar 19 '14 at 11:31
  • Would this work if I'm using `.load` instead of `.ajax`? – J82 Jan 30 '15 at 04:55
  • I don't think so. The syntax to get the xhr object is a bit different: $( "#success" ).load( "/not-here.php", function( response, status, xhr ) {.. })). This is only executed after the request has been completed. – Yoeri Jan 30 '15 at 08:47
  • `percentComplete` hits 100 way before my `success` function is called. Do you know why this occurs? – Anthony Mar 17 '16 at 20:33
  • nope, no direct idea. you could post this as a seperate question. – Yoeri Mar 18 '16 at 17:47
  • This doesn't seem to work for me when using FormData and uploading a file, as it returns 1 almost instantly wen clearly the file is still being uploaded and success hasn't even been called yet. – AppHandwerker Jan 24 '21 at 11:56
3

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);
        }
    });
});
kentuckyss
  • 101
  • 1
  • 10