We Keep Coding

How to resolve JQuery Conflicts between 3 or more dependent versions of JQuery using .noConflict?

I've found many other similar questions but this particular scenario is somewhat unique to the more typical ones to which the prior questions are applicable.
My understanding and the normal approach I use to resolve conflicts between 2 versions of JQuery are as follows in this example:
<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
var JQuery_1_12_1 = $.noConflict(true);
$JQuery_1_12_1(document).ready(function () {
// Code dependent on JQuery 1.12.1 can safely execute here without
// conflicting with version 1.3.2
});
</script>
<script type="text/javascript">
// Code executed within this block will use 1.3.2
</script>
Alternatively, I could have duplicated the approach implemented to define the noConflict variable for 1.12.1 for 1.3.2 and the result would have been the same.
The problem I'm having difficulty in resolving is that I'm confronted with a situation I previously haven't had to deal with where there are linked library dependencies that need to be combined together in a noConflict manner.
Here is the current situation:
<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
var JQuery_1_12_1 = $.noConflict(true);
$JQuery_1_12_1(document).ready(function () {
// Code dependent on JQuery 1.12.1 can safely execute here without
// conflicting with version 1.3.2 but do to the lack of the dependent version this code will always break
});
</script>
<script type="text/javascript">
// Code executed within this block will use 1.3.2
</script>
As you can note, there is an inter-dependency between jquery-ui.js and jquery.js and due to this inter-dependency the $JQuery_1_12_1 variable cannot be applicable to both.
Alternatively, creating a separate noConflict variable for the jquery-ui.js library would require it to be placed within the context of a separate script tag which would essentially break the dependency and the code won't function correctly.
How can this problem be resolved?
I have also tried using the same versions of one of the JQuery libraries to alleviate the conflicts but they each have a unique set of features that don't crossover. So only one version will work per required application within the code.

First: Don't use multiple versions of jQuery. It bloats and complicates your page. Use an up-to-date version of jQuery and, if you have plugins that don't work with that up-to-date version, update them so they do (and ideally send a pull-request back to the plugin's repo if it has one), or use something that's actively maintained instead.
Now, if for some reason you can't do that:
Any half-decent jQuery plugin uses the jQuery variable's value as of when the plugin is loaded, by doing something like this:
(function($) {
// Plugin code
})(jQuery);
If you load a different version of jQuery afterward, the plugin still uses the earlier one because it captured the value of jQuery as of when it loaded.
So load your plugins for a given jQuery version immediately after loading that version of jQuery.
Then: Do the same for your own code.
<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
...where your script code does the same thing a well-behaved plugin does:
(function($) {
// Use $ here
})(jQuery);
If you have code that (shudders) needs to use both versions of jQuery, capture each version in a variable:
<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script>
var jQuery_v132 = jQuery;
</script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
var jQuery_whatever = jQuery;
</script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
<script src="../your/code/using/both.js"></script>
...where your code using both uses jQuery_v132 or jQuery_whatever as appropriate.
(I've used "whatever" because I have no idea what version of jQuery your jquery-ui 1.12.1.custom/jquery.js file is, but it's unlikely to be jQuery 1.12.1.)

jSignature is not a function

I'm trying to use jSignature in my website, but it keeps showing me this error:
Uncaught TypeError: $(...).jSignature is not a function
My code is:
<div id="signature"></div>
$("#signature").jSignature();
I have Jquery 1.11.1:
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
The Jquery is called before the JS of the function.
I have also tried to call Jquery Mobile, calls like $('#signature').jSignature({'UndoButton':false,color:"#000000",lineWidth:5});, etc but it never works.
Can anyone help ?

Well, i fixed the problem.
The problem was: I had the Jquery 1.12.4 in my plugins file. It would work normal in any page, but with the jSignature it made the JS throw an error.
I removed the Jquery from the Plugins ( but keeped the CDN one ) and now it works fine.
I already found many questions about this but never an answer.
Hope this helps anyone out there.
Many Thanks

i use jQuery 3.4, had the same issue. Im not quite sure where the problem came from but it was the phantom.
First i added all recommended libs to my project and accessed the element as used to:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
...
$(`#id`).jSignature();
I received the same jSignature is not a function
Afterwards i assumed the problem might be in jQuery version compatability, so added few lines:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
var jq_1_12 = $.noConflict(true)
</script>
...
jq_1_12(`#id`).jSignature();
it was keeping throw the same error jSignature is not a function.
Finally
I removed the last changes and jquery 1.12 import. The problem solved it-self, have no idea what have happened. But the plugin works now without any explicable reason

jQuery plugins conflict and script declaration order

I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!

The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events

Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.

Boostrap lightbox not working as expected

I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.

you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.

$('body').layout is not a function

I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.

You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
 or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>

Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.