JQUERY – getJSON with failure callback

If you have used the JQUERY function $.getJSON, you will soon realize that there is no way to assign a function to be called on a failure.

Instead one needs to use the $.ajax method (which is what $.getJSON uses under the covers). And here is what the function would look like

function makeAjaxCall(ajaxUrl, functionSuccess, functionFailure){
        $.ajax(
        {
            type: "GET",
            url: ajaxUrl,
            contentType: "application/json; charset=utf-8",
            data: {},
            dataType: "json",
            success: functionSuccess,
            error: functionFailure
        });
    }

The above function would be called like so:

makeAjaxCall("http://api.twitter.com/1/rockyMtnRajah/lists/ccd-twitters/statuses.json?callback=?", loadTwitterListFeed, loadTwitterListFeedFailed);

loadTwitterListFeed would be implemented like so: (Where parseTwitterJSON would be responsible for loading the JSON data (per element) into the page)

function loadTwitterListFeed(data)
{
    $.each(data, parseTwitterJSON);
}

loadTwitterListFeedFailed is the method that is called when an error is encountered while making the AJAX call to the provided URL.

Important Cross-Site Ajax information when using Twitter API.

If you use the Twitter API to extract your feed as a JSON request, you will find that if you use the Twitter specified url (which will look like this: “http://api.twitter.com/1/rockyMtnRajah/lists/ccd-twitters/statuses.json”) with the makeAjaxCall method, you will get data back in Internet Explorer but not in FireFox and Chrome. The reason is that FireFox and Chrome will not allow you to make cross-site AJAX calls. To get around this issue, Twitter provides you with a way to specify the call-back method. You do this appending “?callback=?” to the URL. Once you do this – your code should work in all 3 of the browsers. (JQuery takes care of setting the correct callback name – for some reason I could not get “callback=loadTwitterListFeed” to work)