Introduction:
In this article, I will explain how to add multiple version of jquery on
the same page.
If you are working on a website that already used an older version of
jquery and now you want to use newer version. This time upgrading is not an
option here. For this scenario use $.conflict() method.
In jQuery, the ‘$’ sign is just an alias to jquery ()
$.fn.jquery
– it will return the jquery file version.
Here, I am using two version of jquery(version 1.3.0 and version 1.10.2).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Before we
using conflict() method,
$ - it
will have the version of last included jquery file. (Version 1.10.2)
$('#btnBrowserVersion').click(function () {
alert($.fn.jquery);
});
The above code will
return version 1.10.2. Because last included ‘js’ file will be assign for the
alias name ‘$’
After we using
conflict() method, $ sign will be replaced with first included js file.
$('#btnAfterConflict').click(function () {
jq = $.noConflict();
alert($.fn.jquery);
});
The above code will
return version 1.3.0. Because, After
using conflict() method, first included js file will replace with the alias
name ‘$’.
After conflict, if
we want to use other version use the alias name ‘jq’ from the above coding.
Example Program:
<html>
<head>
<title>Multiple Version of Jquery on Same Page</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnBeforeConflict').click(function () {
alert($.browser.version);
return
false;
});
$('#btnAfterConflict').click(function () {
jq = $.noConflict();
alert($.browser.version);
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="DivArea">
<asp:Button ID="btnBeforeConflict" runat="server"
Text="Before
Conflict()" />
<asp:Button ID="btnAfterConflict" runat="server" Text="After
Conflict()" />
</div>
</form>
</body>
</html>
$.browser property is removed in version Jquery
1.10.2. But we can use the property in jquery 1.3.0.
In our scenario, we
are updating our webpage with latest jquery version. We need an old version
also. For this, we are using conflict() method.
In the above
example, first click event will not work. It will throw an error. Because,
$.browser property is removed in version 1.10.2. Next click event will work
with conflict() method. Because, $.browser property called from the version
1.3.0.
0 comments:
Post a Comment