2

I'm using Joomla 1.5 and I would like to add the jQuery library in the backend of joomla to help me add interaction in the design of my component views.

I would like jQuery to be added in the HEAD section of certain pages of the administration and of course without conflicting with the MooTools library that is already included in Joomla.

Does anyone knows how to do that?

Ben
  • 674
  • 9
  • 21

2 Answers2

3

Do you want to know the really bad news? Components made for the admin side of Joomla often depend heavily on MooTools (up to recently, a very ancient version of MooTools). Want to know the good news? If you insert the jQuery script before the MooTools script, MooTools will override the $ variable, but you will still have access to the jQuery variable. Doing it the other way around, jQuery will own the $, and some plugins and templates will probably yell at you.

So how you say? The easiest way is to follow this path:

/libraries/joomla/document/html/renderer/head.php

Go in that file right around line 129 where it says "Generate script file links". Before it runs the foreach over that $document->_scripts... array, insert this:

if ($mainframe->isAdmin) {
    $strHtml .= $tab.'<script type="text/javascript" src="/media/system/js/jquery.js"></script>'.$lnEnd;
}

And just replace that src with the path to your jquery script. Now in your admin tool, you will be able to reference the jQuery object with the global jQuery var like this:

jQuery('#myElement').hide();

And this is why Joomla tends to drive me insane. But hey..it wasn't really built for developers, it was built for users.

treeface
  • 13,270
  • 4
  • 51
  • 57
  • Thanks for this great answer. I just needed to change a bit the code you given me to check if we're part of the admin or not. it goes like this: global $mainframe; if ($mainframe instanceof JAdministrator) { $strHtml .= $tab.''.$lnEnd; } – Ben Nov 05 '10 at 01:37
1

A better way, IMHO, is to do your document ready function like this:

var $jq = jQuery.noConflict();

jQuery(document).ready(function($){
  // your doc ready code...
});

So the first thing it does is put jQuery into noConflict mode which essentially reassigns "$" to "$jq". So instead of calling jQuery like this: $(x).y() you must do this: $jq(x).y(). That's all fine and dandy. In fact, you don't even have to do that, you can use "jQuery" as well (i.e. jQuery(x).y() ). "$" is just an alias.

Secondly, the doc ready construct above passes in '$' as an argument which again, alias for jQuery, and allows you to use '$' within the doc ready callback.

Hope this helps. I would have posted as a comment but I don't have enough points or whatever it is to comment.

lucifurious
  • 630
  • 5
  • 11