Joomla, jQuery modules conflicting

Question

I have a custom jQuery accordion menu on my site in a module, when the mod is enabled it breaks my RokSlideshow module.

I can\'t get them both to work at the same t

Answer 1

use the jQuery NO CONFLICT MODE

Answer 2

Try this http://extensions.joomla.org/extensions/core-enhancements/scripts/7230

Answer 3

You have to force MooTools to load first, then load jQuery and tell it to go into No Conflict mode before any jQuery code or plugins are executed. Check page 183 of this: http://www.packtpub.com/files/learning-joomla-1-5-extension-development-sample-chapter-8-using-javascript-effects.pdf or this thread on the Joomla forum: http://forum.joomla.org/viewtopic.php?f=231&t=283215

Edit: you actually don't have to load MooTools first, you just have to make sure that jQuery.noConflict() is called immediately after jQuery is loaded: http://www.designvsdevelop.com/jquery-in-joomla-i-was-wrong

Answer 4

You've got moo-tools and jquery conflicting. I'd suggest using a jquery slideshow module - that would be the easiest way.

edit: the conflict looks like they're using the same namespace, but I don't have much time to go in deeper details

Answer 5

Joomla buffers all content with ob_start(). You can get the current buffer with:

$body = JResponse::getBody();

You can then find the JQuery and MooTools script declarations and restructure them in a system plugin using the "onAfterRender" event.

You can use preg_replace() to take the JQuery and put in after MooTools. You can then enable the no conflict mode in JQuery.

 jQuery.noConflict();

Here is an example plugin that changes the MooTools from 1.1 to 1.2. You can do something slimilar for JQuery's no conflict mode.

<?php
/**
 * MooTools1.2 w/ 1.1 compat for AjaxChat
 * @copyright www.fijiwebdesign.com
 * @author gabe@fijiwebdesign.com
 * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
 */

// included only
defined( '_JEXEC' ) or die( 'Direct Access to this location is not allowed!' );

jimport( 'joomla.plugin.plugin' );

/**
 * Joomla PHP Speedy Integration
 *
 * @author gabe@fijiwebdesign.com
 */
class  plgSystemAjaxchat extends JPlugin
{
    /**
     * Constructor
     *
     * For php4 compatability we must not use the __constructor as a constructor for plugins
     * because func_get_args ( void ) returns a copy of all passed arguments NOT references.
     * This causes problems with cross-referencing necessary for the observer design pattern.
     *
     * @access  protected
     * @param   object $subject The object to observe
     * @param   array  $config  An array that holds the plugin configuration
     * @since   1.0
     */
    function plgSystemAjaxchat(& $subject, $config)
    {
        parent::__construct($subject, $config);

        $mainframe =& JFactory::getApplication();
        $document   =& JFactory::getDocument();
        $doctype    = $document->getType();

        // deactivate for backend
        if ($mainframe->isAdmin()) {
            return false;
        }

        // add mootools 1.2
        if ( $doctype == 'html' ) {
            $document->addScript('components/com_ajaxchat/js/mootools-1.2-core.js');
            $document->addScript('components/com_ajaxchat/js/mootools-1.2-more.js');
            $document->addScript('components/com_ajaxchat/js/mootools-1.2-core-compat.js');
            $document->addScript('components/com_ajaxchat/js/mootools-1.2-more-compat.js');
        }

    }

    /**
     * After Templte output is in buffer
     */
    function onAfterRender() {

        $mainframe =& JFactory::getApplication();
        $document   =& JFactory::getDocument();
        $doctype    = $document->getType();

        // deactivate for backend
        if ($mainframe->isAdmin()) {
            return false;
        }

        // Only render for HTML output
        if ( $doctype !== 'html' ) { 
            return; 
        }

        // get the output buffer
        $body = JResponse::getBody();

        // remove mootools if not needed
        if (stristr($body, 'mootools.js') || stristr($body, 'mootools-uncompressed.js')) {
            $body = preg_replace("/<script.*?mootools(-uncompressed)?\.js.*?<\/script>/i", '', $body);
        } else {
            $body = preg_replace("/<script.*?mootools-1\.2\-.*?\.js.*?<\/script>[\s\t\r\n]*/i", "\n", $body);
        }

        JResponse::setBody($body);
    }

}

?>