Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

update progress bar using ajax request seconds

Tags:

jquery

ajax

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

like image 362
Curtis Avatar asked Oct 02 '13 14:10

Curtis


People also ask

How do you send AJAX request every 5 seconds?

Creating a function that calls the AJAX request and using this function in setInterval() and set Interval for 5 sec. Now the function executes every 5 seconds and fetches new data from the server. It repeatedly executes the function even when the previous AJAX request is not successfully executed and return.

How would you implement progress bar based on AJAX response?

Use the ajaxStart to start your progress bar code. $(document). ajaxStop(function(){ // hide the progress bar $("#progressDialog"). modal('hide'); });

Does AJAX wait for response?

ajax() function with the default settings, any JavaScript code after this AJAX request will be executed without waiting for a response. In most cases, this is the desired behavior, but there are some situations where you will want to prevent further execution until there has been a response to the AJAX call.


2 Answers

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
    }
 });
like image 166
Yoeri Avatar answered Sep 28 '22 04:09

Yoeri


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);
        }
    });
});
like image 26
kentuckyss Avatar answered Sep 28 '22 03:09

kentuckyss