Inconsistency in JQuery callback methods

Question

Here I am trying to request data from REST API data and present in a webpage using JQuery.

I am making 3 different request which approximately takes 200ms, 300 ms, 7000 ms times for the response. Here two call methods are being called out of 3, I don't understand why 3rd one is not being called. When debug using Firebug tool, response is getting from server.

When the order of below function changes the behavior is also getting changed. any of one or two callback methods are being called.

Please help me in solve this issue.

$.getJSON(
    "http://115.111.168.221:8080/AnalysisWebService/getDataFromSocialMedia?searchString=wellpoint&startDate=2012-08-01&endDate=2012-08-04&method=getAnalysisRange",
    function(json) {

        }

$(function () {
$.getJSON(
"http://115.111.168.221:8080/AnalysisWebService/getDataFromSocialMedia?searchString=wellpoint&source=facebook,twitter&searchFrom=socialmention&method=getTodayAnalysis",        

function(json) {

}
}
);
);

$(function () {
$.getJSON(
"http://115.111.168.221:8080/AnalysisWebService/getDataFromSocialMedia?searchString=wellpoint&source=facebook,twitter&searchFrom=socialmention&method=getCurrentAnalysis",      

function(json) {

}
}
);
);

Answer 1

Try this:

var url = 'http://115.111.168.221:8080/AnalysisWebService/getDataFromSocialMedia?searchString=wellpoint';

$.getJSON(url + '&startDate=2012-08-01&endDate=2012-08-04&method=getAnalysisRange', function (json) {
    // do something
});

$.getJSON(url + '&source=facebook,twitter&searchFrom=socialmention&method=getTodayAnalysis', function (json) {
    // do something
});

$.getJSON(url + '&source=facebook,twitter&searchFrom=socialmention&method=getCurrentAnalysis', function (json) {
    // do something
});

You don't need to wrap them in anything else as the DOM doesn't have to be ready in order for you to fire off some requests.

Better yet, do something like this for more readability:

var url = 'http://115.111.168.221:8080/AnalysisWebService/getDataFromSocialMedia';

$.getJSON(url, {
    searchString: 'wellpoint',
    startDate: '2012-08-01',
    endDate: '2012-08-04',
    method: 'getAnalysisRange'
}).success(function(json) {
    console.log(json);
}).error(function() {
    console.log('error!');
});

$.getJSON(url, {
    searchString: 'wellpoint',
    source: 'facebook,twitter',
    searchFrom: 'socialmention',
    method: 'getTodayAnalysis'
}).success(function(json) {
    console.log(json);
}).error(function() {
    console.log('error!');
});

$.getJSON(url, {
    searchString: 'wellpoint',
    source: 'facebook,twitter',
    searchFrom: 'socialmention',
    method: 'getCurrentAnalysis'

}).success(function(json) {
    console.log(json);
}).error(function() {
    console.log('error!');
});

edit: I've attached error handlers as well, and removed the ? from the url.

Answer 2

Your syntax appears to be off, the brackets and parens do not line up properly. You should be receiving an error on the page, if you check through Firebug.

Update: I believe your code should be formatted as such:

$.getJSON(
    url,
    function(json) {

    }
)

$(function () {
    $.getJSON(
    url,      

        function(json) {

        }
    )
}
);

$(function () {
    $.getJSON(
        url,      

        function(json) {

        } 
    )
}
);

Furthermore, you should considering moving duplicate code into a function, and using only one of the document.ready calls. This will make your code more robust and easier to read.