Monday, May 28, 2012

JQuery and Joomla

Out of the box, Joomla supports the Mootools Javascript framework.
You can, however, very simply add jQuery.
N.B. The following is for Joomla 1.7.
For this particular application i need both the 'core' framework and jQueryUI.
I downloaded the libraries and put them into 'JOOMLA_HOME/media/system/js'.
Then, in the my custom component's Admin views I referenced them and initialised them like this:
  1. $document = &JFactory::getDocument();
  2. $document->addScript( '../media/system/js/jquery-1.7.1.js' );
  3. $document->addScript( '../media/system/js/jquery-ui-1.8.17.custom.min.js' );
  4. $document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

Then, when ever you need to execute any jQuery functions (e.g. in document.ready) use the following syntax:
  1. <script type="text/javascript">
  2.     jQuery(document).ready(function() {
  3.         ...
  4.     });
  5. </script>

Note, the '$' is replaced with an explicit 'jQuery' reference (to avoid conflict wit Mootools.
For the non-admin screens, its exactly same but the path to the jQuery files in the 'addScript' doesn't have a leading '../'.

No comments: