multiple operations using jquery ajax

Question

I want to perform an operation and simultaneously show the progress in HTML5 and JavaScript. Since I am using IE 8, the <progress> element is not supported, the approach I thought of is using a jQuery AJAX method like this:

<div class="progress-bar" role="progressbar" id="id" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">Complete</span>
</div>

$(document).ready(function(){
    $("button").click(function(){
         $.ajax({
            url: "Perform a server side operation", 
            success: function(result){
                ProgressBarUpdate(20);
            }
        });
    });
});

var ProgressBarUpdate = function(value) {
    value = value + 10;
    $("#id").css("width", value +"%");
}

But the issue here is how to perform the operation and update the progress bar simultaneously? Because after coming to success: part of the AJAX request, directly showing 100% progress doesn't make sense. Is there any other approach available for this?

What action are you doing on server side ? if you are uploading any file then by using $.ajaxSettings.xhr().upload(); you can get the uplaoding percentage — Satinder singh
– Satinder singh, Commented Jun 1, 2015 at 9:27
I wanted to do the same in my project.But this isnt possible as it is a ajax call and you cant get the progress of it in true sense.You can make a fake(illusion) of a progressbar but thats not the actual progress:( — AkshayJ
– AkshayJ, Commented Jun 1, 2015 at 9:29
I am makking it as a generic component not necessarily upload — user1400915
– user1400915, Commented Jun 1, 2015 at 9:29
malsup.com/jquery/form/#file-upload with example: phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload - Check out uploadProgress and its percentComplete. — MortenMoulder
– MortenMoulder, Commented Jun 1, 2015 at 9:36

AmmarCSE · Accepted Answer · 2015-06-01 10:19:49Z

4

Assuming the operation is taking place server side, I know of two approaches.

Polling

This will take place with a different ajax

setInterval(function(){
   $.ajax("checkprogress.url", function(data){
       $('.progress-bar').val(data);
}, 1000);

Basically, you will poll a server-side service/script/code every interval and the response will contain the current progress. You will then update the progress bar.

WebSockets

Another approach is to use a web-socket framework which will allow you to push content(progress updates) and/or implement a remote procedure call to conected clients in real-time.

Two such frameworks are SignalR and socket.io

edited Jun 1, 2015 at 10:19

answered Jun 1, 2015 at 9:31

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

multiple operations using jquery ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related