Nav & Search

Googles Ajax APIs and jQuery Plugins

Projects

I’m working on a new version of the Lumebox that utilizes Googles AJAX Feed API instead of relying on a local proxy to fetch RSS-data. Only problem was that the Google AJAX APIs uses dynamic loading in the same way as jQuery does but there’s no obvious way to sync them, which means that you can’t use external jQuery plugins out of the box. The best (and only working) solution I found online used three separate functions and a manual timeout to let the DOM’s keep up with another, this doesn’t cut it for me so set out to find a better solution.

The Google Feed APIs work by loading a JavaScript snippet using a key provided for each website (which is free).

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABC"></script>

After this snippet is loaded additional Google APIs and popular free frameworks (such as jQuery, Prototype etc) can be loaded asynchronously using, for example

google.load("feeds", "1");

to load the Feed API. Multiple calls can be stacked after another and a callback is used to execute js-code after the load is completed.

google.load("feeds", "1");
google.load("jquery", "1.4.2");
function init(){
  // Do some fancy jQuery here
}
google.setOnLoadCallback(init);

To load JavaScript after the page has been loaded there’s a handy jQuery function names getScript that loads the script using AJAX, inserts it into the DOM and then provides a callback function for when it’s ready. This can be used for loading jQuery plugins on the fly, for example

$.getScript("js/script.js", function() {
  // Do something with the new functions here
});

The first problem is that I want to load the Feed API (and the Google loader with a provided key) when there’s a link to a RSS on the page but not when there’s only images, the second is that I need to load the Feed API after the jQuery plugin. Thankfully there’s a way to dynamically load AJAX APIs using callbacks

google.load("feeds", "1", {"nocss" : true, "callback" :
  function() {$.lumebox.init(options);}
});

but there’s still the issue of synching them and making it work like a slick plugin. I found that I had to add one more function to orchestrate the loading and I now use jQuery as the “base” and making the Google loader adapt to it rather than the opposite. So, we load the lumebox script, wait for the DOM to finish and then provide a loader-function with the API key if we want to use the Feed API. If a key is provided, the JSAPI is loaded and then the Feed API using anonymous callback functions.

In the HTML page:

<script type="text/javascript" src="js/jquery.lumebox.js"></script>
<script type="text/javascript">
(function($) {
  $.lumebox.loader({showAsList: false, feedApiKey: "ABC"});
})(jQuery);
</scipt>

And then in the plugin-file (js/jquery.lumebox.js), all code in this file is also wrapped in (function($){…})(jQuery);.

$.lumebox = {
loader: function(options) {
  if (options.feedApiKey != (null || undefined) {
    $.getScript("http://www.google.com/jsapi?key" + options.feedApiKey, function() {
      google.load("feeds", "1", {"nocss" : true, "callback" : function() {
        $.lumebox.init(options);
      }});
    });
  } else {
    $.lumebox.init(options);
  }
}, ...

Have you found a better solution? Please let me know!



Leave a comment

Your email will not be published.

*