Using Gaia with jQuery

As mentioned in the previous article "Random Rotating Images with Gaia", The Gaia Ajax Widgets Framework uses the well known and very widely used Prototype.js library. As such certain compatibility issues can arise when using Gaia with other javascript libraries. When using Gaia with jQuery, existing items or applications driven by jQuery will not work.

The jQuery library and allof the available plugins for jQuery are contained within the jQuery namespace, so there should not be a clash between jQuery and Prototype. However jQuery uses the $ symbol as a shortcut for "jQuery". To get Gaia (and thus Prototype) to play nicely with jQuery you need to use the following code:

     var $j = jQuery.noConflict();
     // Use jQuery via $j(...)
    $j(document).ready(function(){ //rest of jQuery code goes here

Prototype by default uses the $ sign, and what this does is revert the $ sign back to Prototype. Then in your jQuery scripts, all you need to do is a find and replace - replacing $ with $j. also the you do not have to use $j. You can call it anything you wish such as the name of your dog, cat or even horse.

Once you have done this, your existing jQuery code will work when using Gaia on the same page.