Another conflicting jquery issue

Question

I have found loads of answers (most concerning wordpress) but nothing that quite helps. I'm new to css/jquery so need my hand held a little. Ive tried this but unable to get it to work Can I use multiple versions of jQuery on the same page?

My code is here:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu').slicknav();
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var jQuery_1_7_2 = $.noConflict(true);
</script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')     
</script>

<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  var jQuery_1_9_1 = $.noConflict(true);
</script> 
<script src="js/owl.carousel.js"></script>

Ive used source code for two elements on my page, one calls jquery-1.7.2.min.js and the other jquery-1.9.1.min.js.

1.7.2 controls my responsive navbar while 1.9.1 is used by an image carousel. At the moment the carousel version overrules the navbar (disappears).

Any ideas how i can resolve this conflict?

You're adding those versions of jQuery, but have you edited your plugins to call those new jQuery variables? Did you read the entire answer to the question you linked to? — esqew, Aug 12 '14 at 16:43
Hi. I tried to follow it, but as i said, i'm only a beginner and it lost me pretty quick. What ever i tried didnt work. — Del22, Aug 12 '14 at 17:03
Is there a reason why you want to use three versions of jQuery on one page? Do the plugins require a specific jQuery version? I would rather update the plugins, or throw them away, rather than bloating the website. — Salman A, Aug 12 '14 at 17:56

user2864740 · Answer 1 · 2014-08-12T20:22:59.520

2

Assuming the that different versions are needed, and the plugins are written following the correct pattern, don't use noConflict, but simply position the scripts such that plugins have access to the correct window.jQuery when they are executed.

<script src="js/jquery-1.7.2.min.js"></script>
<!-- plugins that "only work with" 1.7.2: $/jQuery refer to 1.7.2 -->
<script src="js/jquery.slicknav.js"></script>

<script src="js/jquery-1.9.1.min.js"></script>
<!-- everything else: $/jQuery refer to 1.9.1 (but consider 1.11+) -->
<script src="js/owl.carousel.js"></script>

The use of giving a different name with noConflict is that so code that knows about the different name can use it - which is not the case for a standard plugin.

However, consider simply using the latest 1.x (currently 1.11.1) for all the plugins, as jQuery is very backwards-compatible with few surprising changes (the deprecation roadmap is long). In cases where legacy features are used, there is jquery-migrate.js to shim changes for older code which can eliminate many such migration issues.

[jQuery-migrate] can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9.

edited Aug 12 '14 at 20:22

answered Aug 12 '14 at 16:47

user2864740

60,010
15
145
220

i did attempt to swap all the older version numbers to 1.9.1 but it failed. I'll try and work out your migrate solution. Thanks. – Del22 Aug 12 '14 at 17:05
when i move the owl.carousel above jquery-1.9.1, the carousel fails. – Del22 Aug 12 '14 at 17:12
As you've indicated in your question, `owl.carousel.js` is dependent on 1.9.1. Move it below the 1.9.1 inclusion. – esqew Aug 12 '14 at 17:17
Ok, i've pretty much entered the realm of the utterly confused. I found an additional referenced script which ive added to the original post (sorry). Unsure if this has any bearing? Ive also attempted to migrate by using the following code after every 1.7.2 reference: but it fails. I really cant get my head around this..... – Del22 Aug 12 '14 at 17:51
@Del22 Whatever the original script mess is, it is doing it poorly: follow the format above and place the version-specific plugins immediately following the relevant jQuery include. *Read* the upgrade documentation for jq-migrate; the point is to *not* use an older jQuery version when it is used and all non-1.9 (or really, all non-1.11) jQuery includes should be eliminated. There is *no* need for noConflict here at all - except if the plugins are written incorrectly and need to be modified to refer to a specific version by established name, in which case the pattern used could be fixed anyway! – user2864740 Aug 12 '14 at 18:04
@user2864740 and 'Salman A' I think i've figured it out from your pointers, I removed two of the jquery calls and lined the plugin scripts below a single 1.9.1 call. Seems to be working now :) Thanks for the guidance, this is all new and a very steep learning curve. – Del22 Aug 13 '14 at 08:59
@Del22: What will I do if the same issue exist with 1.9 and 1.10 or 1.11 ? – Muneer Muhammed Nov 04 '16 at 07:34

score 0 · Answer 2 · answered Aug 13 '14 at 09:03

Working code using 1.9.1. Will experiment with 1.11

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $('#menu').slicknav();
   });
</script>
<script src="js/owl.carousel.js"></script>

Another conflicting jquery issue

2 Answers2