How To Post Ajax One After Another With One Submit Button?

I have created some code that call ajax post. Sometime the order of process are right, sometime aren't. I want ajax post that always have the right order, from function 1 to functi

Solution 1:

you can write separate function for each ajax request and call one from another's success function.

function callAjax3(){
var formData3 = {
            'tahun': $('input[name=tahun<?phpecho$mhs?>]').val(),
            'jurusan': $('input[name=jurusan<?phpecho$mhs?>]').val(),
            'posisi': $('input[name=posisi3<?phpecho$mhs?>]').val(),
            'tabel': $('input[name=tabel<?phpecho$mhs?>]').val()
        };
        $.ajax({
            type: 'POST',
            url: '<?=base_url()?>operator_pt/unggah/<?phpecho$proses.'_'.$CL?>',
            data: formData3,
            dataType: 'json',
            encode: true
        })    
        .done(function (data3<?phpecho$mhs?>) {
            console.log(data3<?phpecho$mhs?>);
            callAjax4()  // calling 4th function

        })

        .fail(function (data3<?phpecho$mhs?>) {
            console.log(data3<?phpecho$mhs?>);
        });

}

function callAjax2(){
//FUNCTION 2

        var formData2 = {
            'tahun': $('input[name=tahun<?phpecho$mhs?>]').val(),
            'jurusan': $('input[name=jurusan<?phpecho$mhs?>]').val(),
            'posisi': $('input[name=posisi2<?phpecho$mhs?>]').val(),
            'tabel': $('input[name=tabel<?phpecho$mhs?>]').val()
        };
        $.ajax({
            type: 'POST',
            url: '<?=base_url()?>operator_pt/unggah/<?phpecho$proses.'_'.$CL?>',
            data: formData2,
            dataType: 'json',
            encode: true
        })    
        .done(function (data2<?phpecho$mhs?>) {
            console.log(data2<?phpecho$mhs?>);    
              callAjax3();  // calling 3rd function
        })

        .fail(function (data2<?phpecho$mhs?>) {
            console.log(data2<?phpecho$mhs?>);
        });

}

Solution 2:

You can nest each ajax call in the done() function of the previous one. This way, the n+1th call will only happen once the nth call has completed (successfully).

e.g.

$.ajax({data}).done(function() {
    $.ajax({data}).done(function() {...})
})

Solution 3:

Your .done( callbacks are called after a request completes successfully.

Make your 2nd request in the .done( callback of the 1st one, you 3rd request - in the 2nd request's .done( callback, etc.

That will ensure the correct call order.

... and that's what they call Pyramid of doom

Solution 4:

If I have understood your query correctly then you are looking for a way to submit 2 forms on single submit button click.

You can achieve this by submitting second form manually using jquery .submit() method in success of first form's ajax call.

Let me know if you need updated code for this.