This article explains about Jquery and the usage of Multiple version of jquery in a single page.
This article has some screen shots of page and using Jquery 1.3.2 and Jquery 1.2.6 versions.
Using 2 versions of jquery in a single page.
It explains the usage of $.noConflict(true);
To download jquery and different version check here : www.Jquery.com
Let us consider 2 versions of Jquery a.) Jquery1.2.6 and b) Jquery.1.3.2
I specially selected one plugin which will work for jquery1.3.2 version and which will not work for jquery 1.2.6.
the plugin is "TimePicker"
which is
Note: When you change the jquery from 1.3.2 to 1.2.6.. you will not be able to see the same.
Now suppose you have an another plugin
Eg: Rounded corner which will work only for Jquery1.2.6 version but not jquery 1.3.2. (which i have) jquery.corner.js
which is Curvy corners Demo
So here comes the problem:
How to use the multiple versions of Jquery in a single page?
here which is jquery.1.2.6.js and Jquery.1.3.2.js
$.noConflict(true);
will come to rescue us from this problem.
It is very simple.
What we need is to give the souce of both jquery. and to avoid any conflict between the version we need to put
<script
src="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jQuery_1_3_2 = $.noConflict(true);
</script>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"
type="text/javascript"></script>
Source code (pure html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Timepicker Example Page</title>
<link type="text/css"
href="http://milesich.com/tpdemo/css/ui-lightness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<style type="text/css">
.round
{
background-color:#f6f6f6;
width:100%;
height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="http://milesich.com/tpdemo/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript"
src="http://milesich.com/tpdemo/js/timepicker.js"></script>
<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jQuery_1_3_2 = $.noConflict(true);
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript"
src="http://jquery.malsup.com/corner/jquery.corner.js"></script>
<script type="text/javascript">
// for version Jquery 1.3.2
jQuery_1_3_2(function() {
jQuery_1_3_2('#datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
// By default it is set to version 1.2.6 here
$(function() {
$('#username_warning').blur(function() {
$("#username_warning").val("this is from
later query version here : Jquery 1.2.6");
});
});
$(function() { $("#div").corner(); });
</script>
<style type="text/css">
body{ font: 80% Calibri,"Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>
<div id="div" class="round" style="background-color:#661111;
color:White;" >
This round corner will work only on the jquery 1.2.6 but not on jquery 1.3.2
<br /><br /><br /><br />
By using $.noConflict(true); we are able to use multiple jquery versions.
</div>
<p><input type="text" name="datetime" id="datetime"
value=""/>This timepicker works for jquery 1.3.2</p>
<input type="text" id="username_warning" value=""/>
</body>
</html>
So this solves issue of using multiple versions in the single page.
