After defining the YQL tables for the RTM API (now a part of the main yql-tables on github : http://github.com/spullara/yql-tables/tree/master), I set out to build an example to show how they could be used. The YUI example is at : http://www.vipulb.com/yql/rtm1.html and the jQuery example is at : http://www.vipulb.com/yql/rtm.html

Having been used both YUI and jQuery in big projects before, I thought I would build an example using each library’s ‘Connection Manager’ to fetch data through YQL. YQL data can be fetched using Javascript even though it’s a cross-domain HTTP request since YQL supports the jsonp method (http://ajaxian.com/archives/jsonp-json-with-padding) of getting data.

Since the RTM API uses 3-legged-oAuth, multiple crossdomain requests had to be made with different callbacks for different requests. jQuery supports jsonp inherently so it was fairly straightforward to make that happen :


$.ajax({
url:query,
dataType:'jsonp',
success: successFn,
error: function(){}
});

The YUI library doesn’t differentiate between normal requests and jsonp requests so the developer has to append a “callback=func” to the URL manually in order to use the jsonp method of calling back a function on a successful HTTP return :


var yuiQuery = query + "&callback=func";


Also,  in this case, the callback function (’func’ here) must exist in the global namespace. In most simple cases, this is not a problem since all json requests are handled by one global function. However, in cases where different callbacks need to be called for different requests, extra code must be written.

Consider, for example, this case where the application needs the user to authenticate itself at the RTM website and grant authorization to the application, and then display the user’s to-do list. There are two YQL calls, one to obtain the authentication URL, and the other to obtain the to-do list once the user has finished the authentication process. A single function couldn’t handle the successful return of both the requests since different actions need to be taken in each case.

One way of solving this problem – which is how the jQuery library does this as well – is to create a new temporary callback in the global namespace for each request. Once a successful return for that request has been handled, the callback is removed from the global namespace. Here is the code to achieve that :


globalAjaxCallback = function(callbackFn) {

if( (typeof globalAjaxCallback.count).toLowerCase() == "undefined") {
globalAjaxCallback.count = 0;
}

var newCbName = "callbackFunc" + (++globalAjaxCallback.count);
window[newCbName] = function(jsonData) {
callbackFn(jsonData);
window[newCbName] = null;
delete window[newCbName];
}

return newCbName;
};

The ‘globalAjaxCallback’ function generates, and returns the name of, a temporary function in the global namespace ( ‘callbackFunc’ suffixed with a count ) for a particular request. The generated function, when called (on a successful return), calls the callback function specified by the user for that request, and then deletes itself from the global namespace. The error function should also clean up this temporary function from the global namespace, but for the sake of brevity (and laziness), it has been omitted for now.