I was adding the JQuery libraries with javascript and this was not working. I was creating an element and appending it to the element with the tag head. The code executed right, but JQuery was not loading.
Apparently, in Joomla 1.6, to add files to the head we need write to the document via Joomla.
So I wrote the following php file. After the head element, I test for JQuery="undefined" and I got negative. So this worked for me.
The little PHP file I wrote init.jQuery.php
- <?php
- // No direct access.
- defined('_JEXEC') or die;
- $jsLoc = JURI::root(true)."/templates/myTemplate/js/";
- $jQueryPath = $jsLoc.'jquery-1.5.1.js';
- $jQueryNoConflict = $jsLoc.'jQuery-noConflict.js';
- $jQueryUICore = $jsLoc.'jquery.ui.core.js';
- $jQueryUIWidget = $jsLoc.'jquery.ui.widget.js';
- $jQueryUITabs = $jsLoc.'jquery.ui.tabs.js';
-
- $document = &JFactory::getDocument();
- $document->addScript($jQueryPath);
- $document->addScript($jQueryNoConflict);
- $document->addScript($jQueryUICore);
- $document->addScript($jQueryUIWidget);
- $document->addScript($jQueryUITabs);
- ?>
So here I am appending the script using joomla's code, rather than the javascript create element and append script to head.
The second addScript($JQueryNoConflict) takes care of the conflict with Mootools.
The file of no conflict only contains the line: jQuery.noConflict(); So instead of $ I use JQuery
In index.php, I added the following script (currently I am working with XAMPP and it works. I don't know what will happen once in public server)
- <script type="text/javascript">
- if (typeof jQuery == 'undefined') {
- <?php require_once("templates/myTemplaten/js/init.jQuery.php"); ?>;
- }
- </script>
I wan't to have this script pulled through a file link, but right now this is how it is.
In this script, I am testing to see if JQuery has been defined. If not, pull in the libraries.
This script is position right after <jdoc:include type="head" />
I tested to see if the declaration of PHP inserted in the javascript would work, and as I said a few lines before, right now it works. I tested with calling the file init.jQuery.php file right at the beginning of index.php, and then having this script after Joomla calls head. When testing, I added an alert for JQuery undefined and defined and I got response that JQuery was loaded. Meaning, the script, with the PHP statement in the middle is working; if JQuery has been called before, the script will not call the file.
Before </head> I added the tabs function (for reference look at the download demos page source for tabs):
- <script>
- jQuery(function() {
- jQuery( "#tabs" ).tabs({ collapsible: true });
- });
- </script>
Now my tabs are working as they should
(FYI super important to add the css files of the package for the tabs to work as they should)
-----------------------------------