Search jQuery

jQuery Forum

Using jQuery UI

iberomedia

[SOLVED] Integrating JQuery into Joomla

in Using jQuery UI • 2 years ago

Hello,

I am trying to integrate JQuery UI into Joomla. I want to implement the collapsible tabs.

I downloaded, saved, and added path inside head to template (folder: website/templates/myTemplate/js )

<script src="templates/myTemplate/js/jquery-1.5.1.js"></script>
<script src="templates/myTemplate/js/jquery.ui.core.js"></script>
<script src="templates/myTemplate/js/jquery.ui.widget.js"></script>
<script src="templates/myTemplate/js/jquery.ui.tabs.js"></script>

below these paths, I added the JQuery.noConflict() (Joomla uses mootols library which conflicts with JQuery) and the tabs function which appears in the demo pages included in the download package:

<script>
jQuery.noConlfict();
jQuery(function() {
jQuery( "#tabs" ).tabs({ collapsible: true });
});
</script>

However, it is not working.

I know the JQuery libraries and files are loading b/c I added an alert to the beginning of the page to insure that the four files where loading. I am new to JQuery and JQuery UI; and an ideal candidate to use these tools. But at this point I can only imitate what the demos present, and since that is not working I am stuck.

Please, somebody answer this post (I see most posts unanswered).

I have looked for posts where there is an explicit process of how to implement JQuery into Joomla, but I found none.

I am amazed that there is no more complete information about how to incorporate JQuery into Joomla, either here in these forums or in the web at large.

This website does a bit of an introduction: http://www.sanjeevshrestha.com.np/2009/05/using-jquery-with-joomla/

But, as I said, adding the file paths, the noConflict, and the tabs function presented in the demo example is not working

Thanx,

Replies(2)

iberomedia

[SOLVED] Re: Integrating JQuery into Joomla

2 years ago

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)

-----------------------------------

small business web design

yannisdran

[SOLVED] Re: Integrating JQuery into Joomla

3 months ago

Thank you for going the extra mile and answering your own post. It is really useful information.
When I find time, I will try this. I wonder if anything has changed since you posted it.

hailton.c..

Re: [SOLVED] Integrating JQuery into Joomla

2 months ago

Thank you a lot. I was having problem while integrating Jquery to one of my template and this post helped me a lot. The solution was change the "$" to "Jquery" like you have here:

<script>
jQuery(function() {
jQuery( "#tabs" ).tabs({ collapsible: true });
});
</script>

Top Reply

Response title

Attachments

jQuery Forum

[SOLVED] Integrating JQuery into Joomla

Replies(2)

[SOLVED] Re: Integrating JQuery into Joomla

[SOLVED] Re: Integrating JQuery into Joomla

Re: [SOLVED] Integrating JQuery into Joomla

Statistics

Tags

Actions

Related Posts