Issue with multiple ajax calls simultaneously using jquery

Question

I am using jquery for ajax calls

All the calls are called immmediately on page load and we are getting the responses at almost the same time.

the issue is, the 3 calls are fired and I am getting the data, but the callback function is fired for the first call only.

the other two callbacks are not called, the callback is defined as a separate function,

If I just write an alert instead of calling the callback method, all the 3 alert message are coming

So the issue is when we write the callback method, do any one have any idea of the strange behaviour?

We tried to reorder the calls, the behaviour is similar, which ever is called first, its callback will be called, for the rest, it will not be called

var url = "/test1";
    ajaxCall(url, testMethod1, false);   



var url = "test2";
        ajaxCall(url, testMethod2, false); 

var url = "test3";
            ajaxCall(url, testMethod3, false); 

testMethod1:function(data){
    console.log("first"+data);
},
testMethod2:function(data){
    console.log("second"+data);
},
testMethod3:function(data){
    console.log("thrid"+data);
}

ajaxCall is defined as jquery ajax, the issue is only the testMethod1 is called, the rest 2 are not called

Regards Hari

Answer 1

Well the thing that immediately caught my eye is that the URL for test1 has a forward slash preceding test1. This means that you are using a valid link in only test1. The alerts will trigger because you are probably not trying to access the data returned (which would still work even though the ajax request fails), where as you are trying to access the data in the coded call back functions you have provided, which will obviously throw a NullPointerException or whatever the equivalent as the ajax call fails due to an incorrect URL. Therefore data never gets set and the code doesn't work.