Javascript / jquery files conflicting with each other

Question

I am using a theme which references 4 javascript/jquery files and I am using a slider image which is referencing 3 javascript/jquery files. However, they are conflicting with each other.

What files are conflicting with each other and how can I fix this issue?

Thanks

<!-- Code for theme -->
<script src="js/libs/modernizr-2.6.2.min.js"></script>

<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

<!-- Code for theme -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script src="js/main.js"></script>

take a look at this question: http://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict — Holybreath, Jun 09 '14 at 08:54
I'm not adding jquery again and again. It's what came with two scripts that I've added on the same page, so they added them, not me. I'm just trying to work out what's not needed. — Darren Riches, Jun 09 '14 at 12:04

score 2 · Answer 1 · answered Jun 09 '14 at 08:55

You don't need to add these:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>

Because you are loading jQuery1.10+ above all other scripts, so why do you need to add jQuery.min.js and jQuery.1.9.0.

As this code comment says:

<!-- Code for theme -->

For a theme you don't need multiple jQuery libs to be loaded in a single page.

Thanks. Not sure why the original author of the script I'm using did that. — Darren Riches, Jun 09 '14 at 12:05

score 2 · Answer 2 · answered Jun 09 '14 at 08:56

2

I'm not sure but have you tried $.noConflict() ?

answered Jun 09 '14 at 08:56

Xeijp

853
1
7
18

score 2 · Accepted Answer · edited Dec 16 '15 at 14:37

1) .min is just minified version of file.
2) don't use both.
3) either use .min or normal jquery library.

<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

<!-- Code for theme -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/libs/modernizr-2.6.2.min.js"></script>

Javascript / jquery files conflicting with each other

3 Answers3