Jump to content


Corporate Sponsors


Latest News: (loading..)

- - - - -

How to resolve jQuery conflicts

Started by Francys, Jul 19 2010, 05:52

11 replies to this topic

#1 Francys

  • Community Member
  • 124 posts
  • Real Name:Francis
  • Gender:Male

Posted 19 July 2010, 05:52

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.

Edited by Francys, 19 July 2010, 05:56.

#2 skydive74

  • Community Member
  • 7 posts
  • Real Name:Tommy Lin

Posted 11 August 2010, 05:00

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.

#3 Francys

  • Community Member
  • 124 posts
  • Real Name:Francis
  • Gender:Male

Posted 11 September 2010, 00:19

View Postskydive74, on 11 August 2010, 05:00, said:

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.

#4 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 11 September 2010, 03:39

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.
Oscommerce site:


OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

#5 Francys

  • Community Member
  • 124 posts
  • Real Name:Francis
  • Gender:Male

Posted 11 September 2010, 20:03

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.

#6 broadstreetbully

  • Community Member
  • 69 posts
  • Real Name:jason

Posted 01 December 2010, 02:21

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:

#7 rabon33

  • Community Member
  • 51 posts
  • Real Name:jason ravone

Posted 12 June 2011, 16:17

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>

Edited by rabon33, 12 June 2011, 16:22.

#8 rabon33

  • Community Member
  • 51 posts
  • Real Name:jason ravone

Posted 13 June 2011, 17:01

ok fixed... the issue is because you are calling 2 times the same library... so only calL that library once.
eje only call
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.js"></script>
also as a tip.... i will use the library from google, so they optimize the code, compact that, and cache it for faster loads.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

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>

Edited by rabon33, 13 June 2011, 17:04.

#9 rabon33

  • Community Member
  • 51 posts
  • Real Name:jason ravone

Posted 13 June 2011, 17:10

View Postrabon33, on 12 June 2011, 16:17, said:

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

Edited by rabon33, 13 June 2011, 17:13.

#10 Peper

  • Community Member
  • 343 posts
  • Real Name:Pierre
  • Gender:Male
  • Location:South Africa

Posted 04 July 2011, 21:28

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>

Contributions successfully installed : Header tags SEO, Scrolling new products, Customer testimonials, Support tickets, Polls, Link exchange, SPPC, X-sell, Master products, Dhtml menu, Image cache, Slide show, Product videos, Product custom sort, Product notes, Discount coupons, Ask question(review style + admin), CP builder, Customers also purchased, price list, // SEO URLS 5, and forgot the others and then a real admin setup.

#11 rabon33

  • Community Member
  • 51 posts
  • Real Name:jason ravone

Posted 05 July 2011, 03:05

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

#12 Peper

  • Community Member
  • 343 posts
  • Real Name:Pierre
  • Gender:Male
  • Location:South Africa

Posted 05 July 2011, 15:42

View Postrabon33, on 05 July 2011, 03:05, said:

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?
Contributions successfully installed : Header tags SEO, Scrolling new products, Customer testimonials, Support tickets, Polls, Link exchange, SPPC, X-sell, Master products, Dhtml menu, Image cache, Slide show, Product videos, Product custom sort, Product notes, Discount coupons, Ask question(review style + admin), CP builder, Customers also purchased, price list, // SEO URLS 5, and forgot the others and then a real admin setup.
Back to Tips and Tricks · Next Unread Topic →


  1. osCommerce Support Forum
  2. → osCommerce Online Merchant v2.x
  3. → Tips and Tricks
  4. Forum Rules