We Keep Coding

Using backboneJS and loading two different builds of jquery works but not one or the other

This is a bit of a dated question but still curious and I am not pulling anything up, other than it is bad practice. (BTW the code that this is on will not be going to production with two)
I have a backbone.js app that I am updating jQuery from 1.9.1 to the 3.1.1. With how it is built up right now, I can use 3.1.1 but only if I also have version 2.2.4 loaded in as well. If I remove one or the other script tag, the app breaks and I get Uncaught ReferenceError: jQuery is not defined and Uncaught TypeError: $ is not a function as the errors that range across the board.
I have added var $= jQuery; to where the jQuery is first loaded but that error still persists.
Wondering where I got off track and/or why this is happening.
How the scripts are being loaded in
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="libs/underscore-min.js"></script>
<script type="text/javascript" src="libs/backbone-min.js"></script>
<script type="text/javascript" src="libs/tooltip.js"></script>
<script type="text/javascript" src="libs/popper.js"></script>
<script type="text/javascript" src="libs/bootstrap.js"></script>
<script type="text/javascript" src="libs/tooltip.js"></script>
<script type="text/javascript" src="libs/less.min.js"></script>
<script type="text/javascript" src="libs/mobiledatepicker.jquery.js"></script>
<script type="text/javascript" src="libs/moment.min.js"></script>
<script type="text/javascript" src="libs/serialize.min.js"></script>
<script type="text/javascript" src="libs/sha256.min.js"></script>
Last thing I am on backbone 1.3.3 and bootstrap 4. The code does work up to jQuery version 2.0.3

So found out this was more to do with the window that I was loading it in. Don't and still can figure out why two version of jQuery would load and make the page responsive but a single one would not.
Issue came down to I was loading the pages and scripts into an electron app.
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> and
<script>if (window.module) module = window.module;</script>
wrapped around the code cleared up the issue with only loading one.

How to make JQuery UI work with specific parts of JQuery?

So you call on Jquery to make the three --- lines and it stacks the menu. Well is there a way to not call all of jquery.min.js. It breaks some older code of jquery UI. Which part of the code only helps break down the menu and may possibly not break the JQuery UI?
I have tried Jquery version 2.1.0 and 1.12.2 and 1.10.0, but they all break the Jquery ui.
I also tried the Jquery compatibility mode, but it makes it so that the menu doesn't work in Bootstrap.
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
I even found something that looked like a work around, but didn't seem to help:
https://github.com/frappe/jquery-ui-bootstrap
Here are the Scripts that are ran:
<script type="text/javascript" src="/style/js/jquery.form-2.47.js"></script>
<script type="text/javascript" src="../bootstrap/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.autocomplete.js"></script>
<script src="/style/js/jquery-ui-1.8.1.dialog.min.js"></script>
My menu is basically this one, but the rest of the site works with JQuery UI:
http://www.bootply.com/soljohnston777/KZXTGaVsgE#

jquery libraries conflict

I am using the following libraries in my project
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
there is a conflict between first 2 and second 2 libraries when I use first 2 then 3 and 4 stop working.
I could not fix this conflict.

Problem is you have multiple jquery files included, this should be avoided. Use the latest version and include it at top before any other library, as other plugins are dependent on jquery library, try excluding the 3rd number jquery file, otherwise include latest jquery library and then datetimepicker and autocomplete:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>

jquery library conflict

I use two jQuery Library in a single page (Tab & Gallery) for both used two different versions of jQuery libraries now it both wont work at a time. i have to remove a library to work another.
Used versions
1.7.1 jQuery.mini.js for Gallery
1.6.2 jQuery.mini.js - for tab
and
this one
--http://ajax.googleapis.com/ajax/libs/jquery-ui-1.8.16.custom.min.js
Here how i used this coding
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
<script // type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Please tell a solution for this

Only use the newest source! And place it before the jQuery UI. It is better to get your files from the same source, perferably a CDN, like Google's.
These are the newest versions, you are using out-dated ones.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Don't reference the jQuery library twice - it will attempt to override the functionality and break your script. You just need to reference it once:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>

Just don't include jQuery twice...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>

you may be polluting the name space. change $ to jQuery, use noconflict() or use self invoking anonymous function

which version of jQuery is running on a website with multiple libraries loading?

I am working on a project where there's multiple libraries loading in the head. The CMS being used is WordPress.
Through the wp_head, there's an enqueued script for the latest version 1.7.1, but just below it there's a set of script files that begins with version 1.4.
Here's a simple visual flowchart:
<head>
<script jQuery 1.7.1>
<script jQuery 1.4>
<script Colorbox>
[7 more scripts dependent on 1.4 here]
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
My understanding is that since jQuery 1.4 is below 1.7.1, that it is effectively the library being used.
Is it possible to rearrange the scripts so that those dependent on 1.4 can only be used by 1.4 then the rest by 1.7.1? For example:
<head>
<script jQuery 1.4>
<script Colorbox>
[7 more scripts dependent on 1.4 here]
<script jQuery 1.7.1>
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
See how I moved 1.7.1 down? Will 1.7.1's placement in the head below the 1.4 scripts affect the 1.4 scripts?
Is there a way to detect which version of jQuery is being used throughout the page?

please define those in "those dependent on 1.4", It is never a good idea to work back versions just for one part of a website. If it is multiple websites running the same header you might want to try and load in a php (databased) field and set the library that needs to be used in there. My advice would be that if indeed a part of your code doesn't work with the new library, update that code. And always use the latest JQuery :)

This should work as jQuery.noConflict(true) allows you to assign jQuery to any global variable and remove the original jQuery variable from the global namespace.
<head>
<script jQuery 1.4>
<script type="text/javascript">
var jq14 = jQuery.noConflict(true);
</script>
[7 more scripts dependent on 1.4 here] // do a find and replace in all these, replacing $ and jQuery by jq14
<script jQuery 1.7.1>
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
It's hardly best practice to load two jQuery's on the same page, but if your client won't pay to upgrade the above shoudl hopefully provide at least a workable compromise.