CODEWITHSUNDEEP
javascriptjqueryjoomla
Amir Keshavarz
Amir Keshavarz

Reputation: 2644

Joomla Modules jQuery conflict

I have a jQuery conflict in two Joomla modules. I found the below code in each of the modules. Could anyone please help me to resolve the conflict?

Code in first module:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

//...

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery('#jeYW<?php echo $module->id ?>').weatherfeed([<?php echo "'".$cityCode[0]."'"; for ($i=1; $i<count($cityCode); $i++){echo ",'".$cityCode[$i]."'";}?>],{
      unit: '<?php echo $unit ?>',
      image: <?php echo $image ?>,
      country: <?php echo $country ?>,
      highlow: <?php echo $highlow ?>,
      wind: <?php echo $wind ?>,
      humidity: <?php echo $humidity ?>,
      visibility: <?php echo $visibility ?>,
      sunrise: <?php echo $sunrise ?>,
      sunset: <?php echo $sunset ?>,
      forecast: <?php echo $forecast ?>,
      link: <?php echo $forecastlink ?>,
      showerror: true,
      linktarget: '_blank',
      woeid: <?php echo $woeid ?>
    });
  });
</script>

Code in second module:

$document->addScript(JURI::base(true).'/modules/mod_muscol_featured_albums/tmpl/jcarousel/lib/jquery-1.2.3.pack.js');

$document->addScript(JURI::base(true).'/modules/mod_muscol_featured_albums/tmpl/jcarousel/lib/jquery.jcarousel.pack.js');

$document->addStyleSheet(JURI::base(true).'/modules/mod_muscol_featured_albums/tmpl/jcarousel/lib/jquery.jcarousel.css');

//...

$document->addScriptDeclaration("
  console.dir(jQuery.fn.init.prototype);
  jQuery(document).ready(function() {
    jQuery('#random_album_".$random_id."').jcarousel({
      // Configuration goes here
      scroll: ".$scroll."
      ".$auto."
      ".$animation."
      ".$circular."
      ".$vertical."
    });
});
");

Upvotes: 1

Views: 3743

Answers (3)

Django
Django

Reputation: 84

jquery easy should handle that problem, alternativly you can add this to the head of your template index.php :

JHtml::_('jquery.framework');

that'll load jquery 1.8.1 (or whatever 1.8 version which is joomla stable)

in my case in using both, where jquery easy is just disabling mootools and adding jquery ui for me, had some conflicts and this setup seemed to solve it...

Upvotes: 0

Lodder
Lodder

Reputation: 19743

Ensure you only have 1 copy of jQuery being imported. To do so, use this instead:

if(!JFactory::getApplication()->get('jquery')){
     JFactory::getApplication()->set('jquery',true);
     $document = JFactory::getDocument();
     $document->addScript("http://code.jquery.com/jquery-latest.pack.js");
}

Update:

Try adding this above the if statement for noConflict

$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

Hope this helps

Upvotes: 0

Techie
Techie

Reputation: 45134

You can try jQuery Easy. Read the reviews you will understand how great this component is. I have been using it for a long time now.

Features:

  • jQuery and jQuery UI libraries can be hosted in Joomla! or called from the Google API libraries in HTTP or HTTPS (set explicit versions for proper caching),
  • no coding is necessary in front or back end (no need to add code into template or mess with Joomla! core),
  • places jQuery calls AFTER MooTools calls for perfect compatibility,
  • adds the noConflict code,
  • sets up the 'jQuery' variable to 'true' at the application level,
  • strips out all other jQuery, jQuery UI library calls, including the noConflict calls added by other modules or plugins,
  • choose jQuery UI basic styling or custom theme.
  • NEW: possible expert tweaks
  • NEW: the plugin can be enabled or disabled in specific portions of your site
  • NEW since v1.2.0: MooTools libraries can be tentatively disabled in the front end
  • NEW since v1.3.0: reporting and more options to help in solving more advanced cases
  • NEW: Joomla! 3.0 specific version release

Upvotes: 1

Related Questions