Joomla 1.5 Component with Jquery and Mootools

by Alexis Hope, 22 Aug 2011

I’ve been building a component for Joomla 1.5 and I really wanted to use Jquery in the admin over Mootools. Unfortunately Googling for this answer is tricky as so many people are posting examples how to remove Joomla js from their frontend template. The following is very ‘hacky’ but if you’re feed up with the Joomla API and want to throw together a component, without mootools, it’s useful. It stops the need to export jQuery into a different name space, therefore breaking 3rd party jQuery plugins.

$document = &JFactory::getDocument();
$joomlascript = $document->_scripts;
$document->_scripts = array();
$document->addScript( '/media/system/js/sample.js' );
$document->_scripts = array_merge($document->_scripts, $joomlascript);

The above code takes Mootools and all other scripts required by Joomla admin bumps the sample.js to the top of the stack. This allows for some tricky work around to work with Jquery and Mootools if need be. Personally I just left it with

$document = &JFactory::getDocument();
$document->_scripts = array();

And then added the scripts I wanted to use. Now if you do what I did and left these core Joomla admin scripts out of the component you’ll notice the main menu stops working, and so do the component buttons (config, add, edit) which appear if you use the API to add tasks. I don’t like the structure or the lack of customisation with these component buttons (you can customise but it involves subclassing some Jbutton class which is too much work to justify customising a button). So I added the following lines of Juqery.

//strip out the joomla admin menu and conflicting scripts
$('#header-box').html('');
// add custom menu options, this is a home button which returns the user to the main Joomla control panel.
var toolbar = '<td><a href="index.php"><span>
  <img src="<?php echo PathToLiveSite; ?>path/to/img.png" />
  </span>Joomla Home</a></td>';
// toolbar += more menu items here
var menu = '<div id="toolbar"><table><tbody><tr>'+toolbar+'<tr></tbody></table></div>';
menu += '<div>My Component Title</div>';
menu += '<div></div>';
$('#toolbar-box .m').html(menu);

It ain’t pretty but it allows you to have complete control over this menu area.