Question

I am getting data dynamically using jQuery AJAX requests. The Ajax calls are nested, they are called in the success function of each previous request. I am doing this to not put too much load on the server. The next request should only be sent if the previous one is completed or successful.

Here is the ajax code

function showforLanguagetra(option, catid, meta)
{
    $.ajax({       ///execute only if catid = 1,3,6,8
        type:"GET",
        url: "/Ajax1111",
        data: {
            opt: option,
            cid: catid,
            mta: meta
        },
        success: function(data){
            $("#1111").html(data);

            $.ajax({           ///execute only if catid = 5,7,9
                type:"GET",
                url: "/Ajax2222",
                data: {
                    opt: option,
                    cid: catid,
                    mta: meta
                },
                success: function(data){
                    $("#2222").html(data);


                    $.ajax({            ///execute only if catid = 2,5,4,8
                        type:"GET",
                        url: "/Ajax3333",
                        data: {
                            opt: option,
                            cid: catid,
                            mta: meta
                        },
                        success: function(data){
                            $("#3333").html(data);


                            $.ajax({               ///execute only if catid = 6,4,8,9,0
                                type:"GET",
                                url: "/Ajax4444",
                                data: {
                                    opt: option,
                                    cid: catid,
                                    mta: meta
                                },
                                success: function(data){
                                    $("#4444").html(data);


                                    $.ajax({              ///execute only if catid = 2,3,5,7,4
                                        type:"GET",
                                        url: "/Ajax5555",
                                        data: {
                                            opt: option,
                                            cid: catid,
                                            mta: meta
                                        },
                                        success: function(data){
                                            $("#5555").html(data);
                                        }
                                    });        
                                }
                            });      
                        }
                    });        
                }
            });     
        }
    }); 
}    ​

This code is Working Fine !

But what here required is , I want to execute ajax request based on value in catid as shown in comments in ajax code.
I know it lags in if condition but am new to jQuery AJAX so don’t know where and how to use it

Answer 1

I think perhaps what you really want is simply the async: false part – this makes the ajax call complete before proceeding throught the code.

I have updated this answer as I don’t believe you want all following calls to not fire, rather they should all fire in order and dependent on catid

---

To do this you will need to put if or switch blocks round your ajax calls. This will lead to even deeper nesting than you already have.

I would strongly recommened breaking this logic out into separate routines. Have one function which calls the ajax routine rather than this deep nesting.

Set async to false to make the ajax routine wait for success before continuing.

function callAjax( service , option catid , meta ) {
   var ret = {data:false};

    $.ajax({       
        type:"GET",
        url: service,
        async: false,
        data: {
            opt: option,
            cid: catid,
            mta: meta
        },
        success: function(data){
            ret.data = data;
        });

    return ret;
}


function showforLanguagetra(option, catid, meta) {
    var successData;

    if ( catid == 1 || catid == 3 || catid == 6 || catid == 8) {
        successData = callAjax( '\Ajax1111' , option , catid, meta ).data
        if ( successData )
            $("#1111").html(successData);
    }

    if ( catid == 5 || catid == 7 || catid == 9) {
        successData = callAjax( '\Ajax2222' , option , catid, meta ).data
        if ( successData )
            $("#2222").html(successData);
    }

    if ( catid == 2 || catid == 5 || catid == 4 || catid == 8) {
        successData = callAjax( '\Ajax3333' , option , catid, meta ).data
        if ( successData )
            $("#3333").html(successData);
    }

    // etc etc

}

Note that your code doesn’t really make sense as if catid does not equal 1, 3, 6 or 8 then the later ajax calls will never be hit anyway…