CODEWITHSUNDEEP
javascriptjqueryajax
Krishna
Krishna

Reputation: 35

How to call ajax functions in sequence?

I want ajax functions to execute one after another without asynch: false. Because asynch : false puts browser in a hang mode. My code is like this I have 5 checkboxes ch1, ch2, ch3, ch4, ch5 each with a value as function name. User can select any number of check boxes but the ajax function associated with checkbox values should execute one after another only. Lets user selects ch1, ch5, ch3 so functions should execute like

f1() -> f3() - >f5();

functions are like this

function f1(){
    $.ajax({

    });
} 
function f2(){
    $.ajax({

    });
} 
function f3(){
    $.ajax({

    });
}
.
.
so on

I tried calling successive function in ajax success method but this creates a problem if user selects random checkboxes.

Upvotes: 1

Views: 1183

Answers (5)

Kishor Parida
Kishor Parida

Reputation: 293

I had a similar situation like this.
Solution
First make an array of selected checkboxes with values as array elements. Then make a function that check for that value and call its corresponding function.

 function callRequired(array) {
            var required = array[0];
            if (required === "f1") {
                f1(array);
            }
            if (required === "f2") {
                f2(array);
            }
            if (required === "f3") {
                f3(array);
            }
            if (required === "f4") {
                f4(array);
            }
            if (required === "f5") {
                f5(array);
            }
        }

We are here checking the first element as required callback. Then removing it after each success. Simply remove that element and call callRequired(array) by removing the previous element as follows

function f1(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f2(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f3(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f4(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }
function f5(array) {
        jQuery.ajax({
            url: "some/url",
            success: function (response) {
                array.splice(0, 1);
                callRequired(array);
            }
        });
    }

Hope this works. Thanks

Upvotes: 1

sixFingers
sixFingers

Reputation: 1295

Given i have no example code, i would do it this way.

  • Associate each element to a function to be called. Like, an object with keys corresponding to checkboxes ids, and values corresponding to callbacks:
  • Select via jQuery all the checkboxes, preserving order
  • Filter out unchecked ones
  • Map the obtained list of checkboxes to an array, whose elements are the values (= callback functions)

You should have now something like:

var callbacks = [callback_one, callback_three, callback_four];

where ideally "one", "three", "four" are corresponding callbacks to selected checkboxes. You then keep an integer value pointing to current callback getting called.

Finally, you launch the first callback. Upon success, you increase the integer value, and if it's less than the length of the callback list, you call the next callback.

Upvotes: 0

CarlosCarucce
CarlosCarucce

Reputation: 3569

You may use jQuery.when:

var ajax1 = $.ajax(...);
var ajax2 = $.ajax(...);

//You can pass as much arguments as needed here
$.when(ajax1, ajax2).done(function(){
    alert('All requests complete');
});

See the docs for reference: https://api.jquery.com/jquery.when/

Upvotes: 1

José M. Carnero
José M. Carnero

Reputation: 263

Call one function inside each other, like:

function f1(){
    $.ajax({
        success: function(){
            f2();
        }
    });
} 
function f2(){
    $.ajax({
        success: function(){
            f3();
        }
    });
}

Upvotes: 0

satish patel
satish patel

Reputation: 5

can you make one common function which call on checkbox change event with one common class than after you can also define some unique id in data-attributes of checkbox and fetch that using jquery attributes method according to that value you can call ajax.

Upvotes: 0

Related Questions