How to resolve jQuery conflicts

Francys · July 19, 2010

Hello,

It's a fact jquerys have plenty advantages, and more and more contributions use them, the problem appears when you have more then one jquery in the same page and they start conflicting, since they are triggered concurrently.

I have scrutinized the problem i had in my shopping cart, and i'm most certain the Error! Unable to determine page link is due to jQuery conflicts.

I would like to know the solution for this... i have found a somewhat generall remedy, in here http://addons.oscommerce.com/info/7230 and i quote:

steps to sort severall jquerys breaking your eshopping:

A - change document definition

find this

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

replace with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

B - If you have another js framefork such us jQuery and conflicted that module please read following

write this code to every page before </head> tag

<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
});
</script>

and change all jQuery's $ to $j , this should work now.

Example: AJAX shopping cart contrib

jQuery API: jquery-1.4.2.min.js <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

jQuery contribution: jquery-oscart.js <script type="text/javascript" src="js/jquery-oscart.js"></script>

Observation:

order of code must be

<head>
<metatags>
<css>
<jquery>
<js>
</head>

I will test this in my site, and i thought i should post this, since someone can encounter the same problems i did and this helps.

If you think you can add something to this please do thanks.

skydive74 · August 11, 2010

Will this work in product_info.php? I did encounter the same problem on the product page after I install fancybox. My reviews page opens up in the fancybox popup window. I appreciate any help I can get.

Francys · September 11, 2010

Will this work in product_info.php? I did encounter the same problem on the product page after I install fancybox. My reviews page opens up in the fancybox popup window. I appreciate any help I can get.

Yes, if you use jquery like this you won't have issues. There is a discussion of using many java scripts frameworks like mootools, jquery, etc in same page, actually coders who master java script can most times condense everything in one library. But it actually doesn't make difference since all you want is your site running smoothly, and the speed is still very good. So all youhave to do is change the jquery as stated before.

npn2531 · September 11, 2010

It is really quite common to have multiple jquery applications on a single page. If there is a conflict it would be a result of a poorly written program, or a badly set up page.

Typically a jquery, or javascript program is written to respond not only to a specific action, but to a specific action on a specific id . For example, it may do something when you hover over a div tag with an id of 'thisid'. Another jquery program can be on the same page that does something when you hover over an id or 'thatid'. Unless you do something like write in the same id on both jqueries, no problem. The two programs ignore each other. You don't need to use anything special.

Francys · September 11, 2010

Well my experience isn't quite like that, i had to use this solution, otherwise after installing ajax shopping cart contribution, the osc socializer contrib wasn't working, had to do it to fix... and i think both contribs aren't that badly written.

Although i noticed some forums where the more purist programmers had some divergence in opinion with the webdevelopers (the first choose cleaner codes and the second chooses eficiency and time do deliever the solution to client instead of loosing much time to fully integrate the scripts), well bottom line is that it works for me and hopefullty can work for someone else also.

broadstreetbully · December 1, 2010

this didn't work...i changes all the $ to $j and the different scripts still knocked each other out.....I tried a few things but no luck.:blink:

rabon33 · June 12, 2011

i have multiimages fancibox, but does not work with superfish menu... 2 jquery... how can i make it work?.

this is the code on product.info.php

<!-- Simple multi image addon -->
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.fancybox.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easydrag.handler.beta2.js"></script>
<link rel="stylesheet" href="<?php echo DIR_WS_IMAGES ?>js/fancybox.css" type="text/css" media="screen">   
<script type="text/javascript">
       $(document).ready(function() {
           $("div#fancy a").fancybox({
       'zoomSpeedIn':    800, 
       'zoomSpeedOut':    700, 
       'imageScale' : true,
       'centerOnScroll':     true,
       'overlayShow':    <?php echo (DIM_BACKGROUND == 'true' ? 'true' : 'false'); ?>,
       'overlayOpacity': <?php echo (BKG_LUMA/10); ?>,
       'zoomOpacity':     true,
       <?php if (SWING_POPUP == 'true') echo "'easingIn' : 'easeOutBack',"; ?>
       'hideOnContentClick': true,
       'hideOnOverlayClick': false

   });
   <?php if (DRAG_POPUP == 'true') echo '$("#fancy_outer").easydrag();'; ?>
});

</script>
<style type="text/css">
<?php if (SHOW_NAV == 'true') echo 'span#fancy_left_ico {left: 20px;}  span#fancy_right_ico {right: 20px;}';
                switch (POS_NAV) {
                                case 'top':
                                   echo 'span.fancy_ico { top: 38px; }';
                                   break;
                               case 'bottom':
                                   echo 'span.fancy_ico { bottom: 20px; }';
                                   break;
                               default:
                                   echo 'span.fancy_ico { top: 50%; }';
                                   break;
                                   }        
                                   ?>

</style>
<!-- EOF Simple multi image addon -->

<link rel="stylesheet" href="css/superfish.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/superfish.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

</head>

rabon33 · June 13, 2011

ok fixed... the issue is because you are calling 2 times the same library... so only calL that library once.

eje only call

also as a tip.... i will use the library from google, so they optimize the code, compact that, and cache it for faster loads.

REMEMBER ONLY ONE INSTANCE OF THIS LIBRARY

this is my code fixed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php echo HTML_PARAMS; ?>>       
<head>
<!-- Simple multi image addon -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- EOF Simple multi image addon     -->
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 

<!-- Superfish menu -->
<link rel="stylesheet" href="css/superfish.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/superfish.js"></script> 
<script type="text/javascript">  
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

<!-- End Superfish menu -->

<!-- Simple multi image addon -->

<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.fancybox.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easydrag.handler.beta2.js"></script>
<link rel="stylesheet" href="<?php echo DIR_WS_IMAGES ?>js/fancybox.css" type="text/css" media="screen">   
<script type="text/javascript">
       $(document).ready(function() {
           $("div#fancy a").fancybox({
       'zoomSpeedIn':    800, 
       'zoomSpeedOut':    700, 
       'imageScale' : true,
       'centerOnScroll':     true,
       'overlayShow':    <?php echo (DIM_BACKGROUND == 'true' ? 'true' : 'false'); ?>,
       'overlayOpacity': <?php echo (BKG_LUMA/10); ?>,
       'zoomOpacity':     true,
       <?php if (SWING_POPUP == 'true') echo "'easingIn' : 'easeOutBack',"; ?>
       'hideOnContentClick': true,
       'hideOnOverlayClick': false

   });
   <?php if (DRAG_POPUP == 'true') echo '$("#fancy_outer").easydrag();'; ?>
});

</script>
<style type="text/css">
<?php if (SHOW_NAV == 'true') echo 'span#fancy_left_ico {left: 20px;}  span#fancy_right_ico {right: 20px;}';
                switch (POS_NAV) {
                                case 'top':
                                   echo 'span.fancy_ico { top: 38px; }';
                                   break;
                               case 'bottom':
                                   echo 'span.fancy_ico { bottom: 20px; }';
                                   break;
                               default:
                                   echo 'span.fancy_ico { top: 50%; }';
                                   break;
                                   }        
                                   ?>
</style>
<!-- EOF Simple multi image addon -->

</head>

rabon33 · June 13, 2011

i have multiimages fancibox, but does not work with superfish menu... 2 jquery... how can i make it work?.

JQUERY CONFLICT

this is the code on product.info.php

<!-- Simple multi image addon -->
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.fancybox.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easydrag.handler.beta2.js"></script>
<link rel="stylesheet" href="<?php echo DIR_WS_IMAGES ?>js/fancybox.css" type="text/css" media="screen">   
<script type="text/javascript">
       $(document).ready(function() {
           $("div#fancy a").fancybox({
       'zoomSpeedIn':    800, 
       'zoomSpeedOut':    700, 
       'imageScale' : true,
       'centerOnScroll':     true,
       'overlayShow':    <?php echo (DIM_BACKGROUND == 'true' ? 'true' : 'false'); ?>,
       'overlayOpacity': <?php echo (BKG_LUMA/10); ?>,
       'zoomOpacity':     true,
       <?php if (SWING_POPUP == 'true') echo "'easingIn' : 'easeOutBack',"; ?>
       'hideOnContentClick': true,
       'hideOnOverlayClick': false

   });
   <?php if (DRAG_POPUP == 'true') echo '$("#fancy_outer").easydrag();'; ?>
});

</script>
<style type="text/css">
<?php if (SHOW_NAV == 'true') echo 'span#fancy_left_ico {left: 20px;}  span#fancy_right_ico {right: 20px;}';
                switch (POS_NAV) {
                                case 'top':
                                   echo 'span.fancy_ico { top: 38px; }';
                                   break;
                               case 'bottom':
                                   echo 'span.fancy_ico { bottom: 20px; }';
                                   break;
                               default:
                                   echo 'span.fancy_ico { top: 50%; }';
                                   break;
                                   }        
                                   ?>

</style>
<!-- EOF Simple multi image addon -->

<link rel="stylesheet" href="css/superfish.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/superfish.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

</head>

FIXED

Peper · July 4, 2011

I've got similar problem - second post

The loading of <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> makes the slideshow and popup images not to work

This is part of asynchronous loading of google plus one button and tracking code

The jqueries, js and css has been moved around but no luck

If anyone see an error, please help

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" >
<link rel="alternate" type="application/rss+xml" title="Products" href="<?php echo FILENAME_RSS_FEED; ?>" >
<link rel="alternate" type="application/rss+xml" title="Categories" href="<?php echo FILENAME_RSS_CATFEED; ?>" >
<?php 
         if (ae_detect_ie())
         {
           echo '<link rel="stylesheet" type="text/css" href="stylesheet_cat_ie.css">';                        
        }
        else {
           echo '<link rel="stylesheet" type="text/css" href="stylesheet_cat.css">'; 
        }
?>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
       var sfEls = document.getElementById("nav").getElementsByTagName("LI");
       for (var i=0; i<sfEls.length; i++) {
               sfEls[i].onmouseover=function() {
                       this.className+=" sfhover";
               }
               sfEls[i].onmouseout=function() {
                       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
               }
       }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
<?php if (DISPLAY_SLIDESHOW == 'True'){ ?>
<script type="text/javascript" src="js/slideshow/mootools-release-1.11.js"></script>
<script type="text/javascript" src="js/slideshow/rokslideshow.js"></script>
<?php } ?>

 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-xxxxxx-x']);
   _gaq.push(['_trackPageview']);
 </script>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script type="text/javascript">
     $(document).ready(function() {
       $.getScript('https://apis.google.com/js/plusone.js');
       $('.sharebox').append('<div class="widget"><div class="g-plusone" data-count="true"></div></div>');
     });
   </script>
</head>

rabon33 · July 5, 2011

not sure how good jquery interacts with mootols... i thought that there are conficts

Peper · July 5, 2011

not sure how good jquery interacts with mootols... i thought that there are conficts

Only Google is giving me problems when fetching it in a asynchronous way from google site

Else page loads can be sometimes long and so products gets loaded after google scrips

If I use standard google code all the other queries working just fine

What about using jQuery.noConflict(); or how to implement it?

Archived

How to resolve jQuery conflicts

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites