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

  • Joomla by default comes with Bootstrap library. However since it is on a previous version of the library, most developers tend to use latest version from Bootstrap website. The basic point most developer miss is they are going to provide it to the users who may also uses other extensions and templates. So this will result in conflict from multiple extensions.
  • Another one is Joomla comes by default with Mootools library. Though Joomla switched to jQuery long time ago, many scripts of Joomla are still dependent on Mootools. And some template developers are still using Mootools as their library. So when jQuery and Mootools are loaded on the same page, there could be some issues occur results in broken pages.

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.