Multiple Ajax Calls while one Ajax call is still running

Question

I got some progressbar Update Issues. What I like to do is, fire a ajax call which takes some time to complete and during the this call I'd like to fire ajax calls, set by an interval, to update my progressbar.

Since I could not find a solution and only found the Browser's restriction, which would match here. It's always max 2 calls active.

Still, my second call stays pending in Google Chrome, untill my first (main) call finished.

EDIT: full jquery script

// update cars cache
$('#cars_cache_update_run').bind('click', function(){
    // remove button
    $(this).remove();

    // hide import widgets
    $('#products_import_widget').css('display', 'none');
    $('#vehicles_import_widget').css('display', 'none');
    $('#orders_import_widget').css('display', 'none');
    $('#test_data_widget').css('display', 'none');

    // show blind
    $('#cars_cache_update_info').css('display', 'none');
    $('#cars_cache_update_blind').css('display', 'inline');

    var carsUpdateInterval = setInterval(function() {
        getImportState('http://localhost/index.php/import/import_state/cache_update', 'cars_import_progressbar');
    }, 1000);
    // ajax request
    $.ajax({
        url: "http://localhost/index.php/import/cars_cache",
        async : true,
        success: function(data){
            $('#cars_cache_update_blind').css('display', 'none');
            $('#cars_cache_update_success').css('display', 'inline');
            clearInterval(carsUpdateInterval);

        },
        error: function(thrownError){
            $('#cars_cache_update_blind').css('display', 'none');
            $('#cars_cache_update_error').css('display', 'inline');
            $('#cars_cache_update_error_msg').html(thrownError);
        }
    });
});

function getImportState(url, id)
{
    $.ajax({
        url: url,
        success: function(data){
            var json = $.parseJSON(data);

            $.each(json, function(i, item) {
                var progressbar_value = json[i]['state'];
                $( "#"+id ).progressbar({
                    value: progressbar_value
                });
            })
        }
    });
}

Another funny thing, if I call the interval request by $.get I'll get a strange error.. Working with Codeignitor Framework.

GET http://localhost/[object%20Object] 404 (Not Found) jquery.1.7.min.js:4
send jquery.1.7.min.js:4
f.extend.ajax jquery.1.7.min.js:4
f.(anonymous function) jquery.1.7.min.js:4
(anonymous function)

Many Thanks for your help already, been trying for hours now.. Maybe I'm just a noob.. Haha.

rootless

possible duplicate of [Multiple ajax calls at same time](http://stackoverflow.com/questions/10150159/multiple-ajax-calls-at-same-time) — Brad Christie, Dec 17 '12 at 14:06
How are you handling this on the serverside, as often times there can be issues with only request per session etc. when doing multiple ajax calls to the same backend. — adeneo, Dec 17 '12 at 14:08
adneo: I'm just calling a controller/method in Codeigniter Framework.. Haven't thought about that. Do you know how to test or then increase the value of the requests per session? — rootless, Dec 17 '12 at 15:30

score 0 · Answer 1 · answered Dec 17 '12 at 14:13

Don't call multiple ajax with intervals. Try something like this:

function updateProgress(){
    $.ajax({
        url: "http://localhost/index.php/import/import_state/cache_update",
        success: function(data){
            var json = $.parseJSON(data);
            $.each(json, function(i, item) {
                var progressbar_value = json[i]['state'];
                $( "#cars_import_progressbar" ).progressbar({
                    value: progressbar_value
                });
            });
            updateProgress(); // after success, call the same function again
        }
    });
}

updateProgress(); // start updateProgress

Hope it helps :]

i see what you meant now - i tried to put the updateProgressFile request before the actual updateFile request. the result ended in one updateProgressFile request and after the updateFile call it hangs again on pending.. — rootless, Dec 17 '12 at 20:39

Multiple Ajax Calls while one Ajax call is still running

1 Answers1