How to include jquery-1.10.2.js and jQuery-2.1.4.min.js together

Question

Hello I am including jQuery-2.1.4.min.js and jquery-1.10.2.js together but I am getting error:

custom.js:375 Uncaught TypeError: $(...).autocomplete is not a function

If i remove jQuery-2.1.4.min.js then i m getting error in one price ranger. So i can not remove any one JS.

So how to use both so that my price ranger and autocomplete functionality works ?

Script:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="mydirectorypath/js/jQuery-2.1.4.min.js"></script>

By Above code I am getting error $(...).autocomplete is not a function

use [jquery.noconflict](https://api.jquery.com/jquery.noconflict/) and see [this](http://stackoverflow.com/questions/13331193/multiple-versions-of-jquery-on-the-same-page) SO post. — Kartikeya Khosla, Apr 16 '16 at 10:39
You shouldn't need both. That error is a result of order you include scripts that depend on jQuery. Use one version and make sure it precedes all dependent plugins and code — charlietfl, Apr 16 '16 at 11:07
But if I remove one of them my some functionality stop working. Even i changed the order but no result. — David Coder, Apr 16 '16 at 11:09
It lookslike that either one of the plugins need a code update. You probably will have no success in having multiple jQuery versions working. — Hans Meiser, Apr 16 '16 at 11:20
Really doesn't make sense. If you are supporting older browsers everything should work fine with the `1.10.2` version as long as it is included before anything that uses jQuery and no other version of jQuery is included after any plugins are registered. Be more specific about actual errors not just saying *"not working"* — charlietfl, Apr 16 '16 at 11:29

score 3 · Answer 1 · answered Apr 16 '16 at 11:37

3

It is possible to use two jQuery in the same page. Like below

<!-- load jQuery 2.1.4 -->
<script type="text/javascript" src="mydirectorypath/js/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
var jQuery_2_1_4 = $.noConflict(true);
</script>

Now you can use jQuery_2_1_4 than the $

<!-- load jQuery 1.10.2 -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>

Now you can use jQuery_1_10_2 than the $

answered Apr 16 '16 at 11:37

Rav's Patel

743
6
22

Yes you must have to do that. Because some functionality jQuery 2.1.4 is not working on the jQuery 1.10.2. So you must have to differentiate the functionality of both the jQuery. – Rav's Patel Apr 16 '16 at 11:43
May i remove one of them ? – David Coder Apr 16 '16 at 11:44
Yes it's better option than the use noConflict() – Rav's Patel Apr 16 '16 at 11:47
but if i remove one of them my price ranger or autocomplete not working – David Coder Apr 16 '16 at 11:54
Find the replacement function for that in a different version. – Rav's Patel Apr 16 '16 at 12:15

score 3 · Answer 2 · edited May 23 '17 at 10:28

In order to use jQuery and jQuery UI you will need three things in this sequence:

The jQuery UI CSS, along with any customization/theme
jQuery library; usually minimized for space
The jQuery UI code library, also minimized.

For simplicity, here is an example of all three, in a CDN:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

This is the normal sequence that they are included, usually in your <head> tag so that if it is used within (later) head inclusions, it works.

Given all that, here is the code and sequence that would work if I used the sample from the Autocomplete page here: https://jqueryui.com/autocomplete/

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
  $(function() {
    var availableTags = [
      "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure",
      "COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java",
      "JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
    ];
    $( "#myinput" ).autocomplete({
      source: availableTags
    });
  });
  </script>

Then, in the body my input tag:

<input id="myinput" type="text"/>

Unless you need to support older browsers, then you ONLY need the 2.X version (2.2.2 demonstrated here) If you DO need to support older browsers, you should only need the 1.X version. To show it working I created this: https://jsfiddle.net/MarkSchultheiss/op7Lq06g/

EDIT:

What about that missing HTTPS in your question: To match your site, you exclude that from the linked tags, and it automatically per the HTML specification puts that in to match the page source from your site. Example:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

For a detailed explanation including a link to the specification for that see this question: https://stackoverflow.com/a/36638189/125981

I don't understand your comment. Please clarify. Note that jQuery UI Autocomplete will work with either version. I can only assume that IS the autocomplete you refer to since you do not indicate otherwise. Keep in mind that with your question we have to make assumptions since you do NOT include the code where you actually USE either of the things you refer to. Nor do you indicate the code segment where you include the jQuery UI which must come AFTER the jQuery inclusion. — Mark Schultheiss, Apr 16 '16 at 13:55

How to include jquery-1.10.2.js and jQuery-2.1.4.min.js together

2 Answers2