CODEWITHSUNDEEP
javascriptjquerymysqlframeworksmootools
Suhrob Samiev
Suhrob Samiev

Reputation: 1547

JQuery is not working because Mootools is already loaded in joomla

I tried to include the JQuery lib into joomla but it's not working. Many comps and modules use mootools inside my CMS. I think the problem is a conflict between the two frameworks.

I have searched the internet and found some articles but the following code is still not working as expected.

<?php
JHTML::stylesheet('demo_page.css', 'media/system/css/');
JHTML::stylesheet('ftab.css', 'media/system/css/');
JHTML::stylesheet('demo_table.css', 'media/system/css/');
$option="com_mycomp";
$base=JUri::root().'components/'.$option.'/js/';
$document=&JFactory::getDocument();
$noConflict="jQuery.noConflict();";
//$document->addScriptDeclaration($noConflict);
$document->addScriptDeclaration("jQuery(document).ready(function($){jQuery('#example').dataTable();});");
JHTML::script('jquery.js',$base,true);
$document->addScript($base,'jquery.js');
$document->addScript($base,'jquery.dataTables.js');
?>

This should sort my table using JQuery but it does not.

How do I use mootools and jQuery concurrently in joomla ?

Thank you in advance for your help!

Upvotes: 5

Views: 2404

Answers (1)

jcolebrand
jcolebrand

Reputation: 16035

Reading your code, I see this:

$noConflict="jQuery.noConflict();";
//$document->addScriptDeclaration($noConflict);
$document->addScriptDeclaration("jQuery(document).ready(function($){jQuery('#example').dataTable();});");
JHTML::script('jquery.js',$base,true);
$document->addScript($base,'jquery.js');
$document->addScript($base,'jquery.dataTables.js');

but it should look like this:

JHTML::script('jquery.js',$base,true);
$document->addScript($base,'jquery.js');
$document->addScript($base,'jquery.dataTables.js');
$noConflict="jQuery.noConflict();";
//$document->addScriptDeclaration($noConflict);
$document->addScriptDeclaration("jQuery(document).ready(function($){jQuery('#example').dataTable();});");

Now, here's why:

Javascript is interpreted in the order it comes to the page. The page is being told to use jQuery.noConflict() and the jQuery datatable, before it knows what those things are.

Upvotes: 3

Related Questions