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 time.

The site is http://www.fbcsheffield.org/2.0

Any help would be much appreciated!

Answer 1

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 2

use the jQuery NO CONFLICT MODE

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

Answer 4

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 [email protected]
 * @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 [email protected]
 */
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);
    }

}

?>

Answer 5

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

Answer 6

Here is the explanation on how to use no conflict when use with another libraries. http://praveenbattula.blogspot.com/2010/02/jquery-conflict-when-using-different.html