Print

The most common issue faced by many Joomla webmasters is the conflicting script libraries from multiple extensions they install. For example,

Getting things done from such developers is most time consuming and painful process. However if you know little bit of Joomla and PHP stuff, you can fix it yourself. See the examples below.

You can fetch all scripts queued in your web page, before rendering to the browser, using the JDocument. Usually you will do all the below stuff in the component's entry file such as components/com_mycomponent/com_mycomponent.php just before/after the controller is executed Or in the main controller file such as components/com_mycomponent/controller.php however it is not necessary. You could do it in any of the component file for example view file.

$document = JFactory::getDocument();
$headData = $document->getHeadData();
$scripts = $headData['scripts'];

So now we have the scripts that are added to the document by all your extensions. We need to reorder some scripts like Mootools and jQuery. Mootools should always be loaded first on the page and then the jQuery. If this is the issue on your page, you can reorder the as following:

// First create a temporary array to hold reordered scripts
$scripts2 = array();

// if the mootools loaded, add it to the top of the temporary array
if(isset($scripts['/media/system/js/mootools-core.js']))
{
$scripts2['/media/system/js/mootools-core.js'] = $scripts['/media/system/js/mootools-core.js'];

// unset the Mootools script from the original array
unset($scripts['/media/system/js/mootools-core.js']);
}

// now add all jQuery libraries after Mootools in the temporary array
if(isset($scripts['/media/jui/js/jquery.min.js']))
{
$scripts2['/media/jui/js/jquery.min.js'] = $scripts['/media/jui/js/jquery.min.js'];

// unset the jQuery script from original array
unset($scripts['/media/jui/js/jquery.min.js']);
}

// do the same for noConflict script and jQuery Migrate script
if(isset($scripts['/media/jui/js/jquery-noconflict.js']))
{
$scripts2['/media/jui/js/jquery-noconflict.js'] = $scripts['/media/jui/js/jquery-noconflict.js'];
unset($scripts['/media/jui/js/jquery-noconflict.js']);
}
if(isset($scripts['/media/jui/js/jquery-migrate.min.js']))
{
$scripts2['/media/jui/js/jquery-migrate.min.js'] = $scripts['/media/jui/js/jquery-migrate.min.js'];
unset($scripts['/media/jui/js/jquery-migrate.min.js']);
}

// Now we have two separate arrays of all our scripts,
// merge both so that we have Mootools first, jQuery next
// all other scripts follows
$scripts = array_merge($scripts2, $scripts);

// Now we need to set the scripts to the Joomla Document so that they can be rendered to page
$headData['scripts'] = $scripts;
$document->setHeadData($headData);

We are done. Hope you enjoyed this tutorial.