We Keep Coding

JQuery - multiple versions on the same page - breaking functionality

Have a requirement to load custom Javascript on a page after it has finished loading i.e. using a third party tool we get to execute on live pages on the website after the page loads.
Coming to the issue now, the page has a lot of Javascript dependent elements which have been coded using jquery version 1.6.2. The runtime script that I need to execute needs jquery version 1.10.x. See code below.
$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
As soon as the first line of code is applied, the original functionality on the page breaks because of some conflict of the existing code with Jquery version 1.10.x.
So, I tried using noConflict as suggested on other questions like this :
$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
var $j = jQuery.noConflict(true);
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
In addition, I changed the file 'mycustom.js' to use $j instead of $ for jquery. But I still have the same problem. How do I prevent the JQuery 1.10.x from breaking the existing page.
Thanks in advance.
[EDIT]
Using Austin's suggestion, was able to tweak the timing of the libraries getting loaded. Below code works now.
var $jQuery1_6_2 = jQuery.noConflict(true);
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
setTimeout(function(){
$jQuery1_10_2 = jQuery.noConflict(true);
$ = $jQuery1_6_2;
jQuery = $jQuery1_6_2;
//Logic to use Jquery 1.10 using '$jQuery1_10_2'
}, 1000);

Try no conflicting the 1.6.2 then loading up the new version, then reseting the reference to $ to 1.6.2
var $jQuery1_6_2 = jQuery.noConflict(true);
(function($) {
$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$jQuery1_10_2 = jQuery.noConflict(true);
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
})($jQuery1_6_2);
$ = $jQuery1_6_2;
then in your script file
(function($){
})($jQuery1_10_2);

Don't know which JQuery plug-in to use

I have this piece of JS:
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
But it doesn't seem to work on my website even though it works fine on JSFiddle
I used "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"
But didn't work.
I don't have any other Script on my website as I've just started it.
Is it just a case of using the wrong plug-in?
UPDATE
This is my full code:
http://jsfiddle.net/WeQwc/9/

You need jQuery, not jQueryUI.
http://code.jquery.com/jquery-latest.min.js
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
});
</script>
Just to clarify why this works, surrounding your jQuery code with the $(function(){...}); means that it will only be run once the page has finished loading. So if you are acting on html elements, this is kinda useful. You will notice that your jFiddle JavaScript is run "onLoad", the reason it worked :)

Currently you are using only the jQuery UI js file
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
You need to use the core jQuery min js file first and then the jQuery UI js file.
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js

Jquery to find and replace script line in header?

I have a script src for a deprecated version of JQuery which I cannot control (controlled externally via a CMS, not cross-domain, just no access to changing it) and I'd like to change the script src to a newer version of Jquery.
Old code:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
Replace with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Once an external script has loaded, it can't be removed as it's already loaded into memory, so changing the source would just load another version of jQuery without removing the first version, so you'd have two versions of jQuery, creating a conflict, and in many cases nothing will work.
There is a workaround if you absolutely have to:
$(function() {
$j_142 = $.noConflict(true);
$j_142.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
$j_191 = $.noConflict(true);
});
});
FIDDLE
now you have two versions of jQuery mapped, and to use them you'd do:
$j_191('#selector')
of course, this would cause issues with code already written, but you could probably get away with just mapping the second script to a new variable or something ?
EDIT:
You could use a closure to map one of those values back to the dollarsign within the closure:
(function($) { //anonymous self invoking function
// now you could use the dollarsign as normal
$(function() { // document ready function
});
})($j_191);

You can use
var oldJquery = document.querySelectorAll('script[src="js/jquery-1.4.2.min.js"]');
oldJquery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
Once you do this, it will automotically will download coz it is live dom element. All changes should be reflected immediately.
But I would suggest that long term this is not good idea. what if CDN from google is down.
You might be in trouble. Just take precaution while doing this changes.

That easy, this is your code:
$("script[src='js/jquery-1.4.2.min.js']").attr('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js');
This is example http://jsfiddle.net/rebeen/KwLM3/

TypeError: $.datepicker is undefined

my javascript has code, for one of the pages on my website:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...
this runs fine, when the page on which id="nmdt1" is loaded.
And I load the related datetimepicker js library (module) only on when i load that page.
so far so good.
but when i load any other pages on my websit i get this error: from the line number where dateformat is defined.
EDIT: here is the correct error for firebug log:
TypeError: $.datepicker is undefined
http://myswbsite/jscript/myjsscript.js
Line 569
line 569 is:
dateFormat: $.datepicker.ATOM,
and yes, this error only comes on page where I am not loading the related js code (jquery-ui-timepicker-addon.js). The reason I am not loading this js on every page is, i need it on only one page.
MORE DETAILS:
in HTML header following lib loads (in seq)
<head>
<script src="/jscript/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jscript/myjsscript.js" type="text/javascript"></script>
...
...
<script type="text/javascript">
jQuery(document).ready(function(){
var mid = "[% mid %]";
alert('mid='+mid);
$(".bvmainmenu #"+mid).css({"background":"url(/images/current-bg.gif) top left repeat-x", "color":"#ffffff"});
});
</script>
</head>
this last javascript code you see above (bottom of header) does not run each time when the jquery-ui-timepicker-addon.js lib is not loaded (and you see that err in firebug - i can live with error, but why this last code is not running, i am not sure). I am not able to understand why this routine wont run just because i did not load one 'add-on' library
the page which runs everything correctly loads following js scripts in BODY
<script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
on this page the last javascript code you see in header also loads and displays the alert!
I am having tough time to figure this.

Have you included jQuery UI in your application.
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>

Make sure that $ is your jquery shortcut identifier. Check the usage of
var $J = jQuery.noConflict();
In that case try to use $J.datepicker

You seem to be saying that this code:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...is within your common myjsscript.js script that is loaded on every page. If so, that means it runs on every page and thus you get an error on pages that don't also include the extra plugin scripts.
The code I've quoted above does not mean "If an element with that id exists call the datetimepicker() method", it means "Create a jQuery object that may or may not have any elements in it and then call the datetimepicker() method, passing an object with a property set to $.datepicker.ATOM." That is, even if there is no nmdtd1 element on the page it will still call datetimepicker and still reference $.datepicker.ATOM.
There are at least three ways you can fix this:
Move that code out of the common myjsscript.js and just put it on the one page that needs it.
Go ahead and include the plugin JS files on all the pages on your site - they'll be be cached by the browser, so it's not really a performance hit assuming your users visit several of your pages anyway.
Move that code within a conditional so the .datetimerpicker() part is not executed unless needed.
For option 3:
var $nmdt1 = $('#nmdt1');
if ($nmdt1.length > 0) {
$nmdt1.datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
});
}

JQuery: different versions clashing - is there a way I can isolate the versions?

on my site I am using a few of the newish JQuery UI controls like the datepicker and dialog.
I recently found a cool project online showing how to make the google dashboard, which is also used on the bbc.co.uk website.
This allows the user to have widgets that move around nicely when selected.
I created a test solution, it worked.
When I integrated it into my exisitng solution with currect Jquery controls and versions it causes a number of errors shown in firebug.
These are:
$("#menu").mouseleave is not a function
$('#menu').mouseleave(function() {
for this piece of code:
$('#menu').mouseleave(function() {
setSubItemVisibility();
});
for the datepicker JQuery ui control:
$(".startdate").datepicker is not a function
$(".startdate").datepicker({ dateFormat: 'dd/mm/yy' });
for the dialog:
$("#inputupdatecontrol").dialog is not a function
position: 'top center'
These all work fine until I put in the inettuts with cookies dashobard solution in found here: http://james.padolsey.com/javascript/inettuts-with-cookies/
This includes the following JQuery versions and files:
jquery-1.2.6.min.js
jquery-ui-personalized-1.6rc2.min.js
cookie.jquery.js
inettuts.js
Is there any way I can seperate the functionality that comes with these files from my existing JQuery versions?
I am currently using the latest Jquery version out and have no problems, its only when i add this functionality from the old versions that I face problems.
I am only using this old version of Jquery on one page, but ofcourse the new versions are needed to.
Cheers

Okay here is the full pattern, put the following in:
<script src="jQuery1.3.js"></script>
<script>
jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
jq131 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
The variables jq13 and jq131 would
each be used for the version-specific
features you require.
Jquery in the command above returns a reference to its self essentially 'boxing' it in another variable.
So to call a function on 1.3 you would call
jq13('#'+ myId).bind('onclick',function(){});
NOTE : You must load the first version of javascript that was developed last.

Yes you can use jQuery.noConflict.