What is the solution?
After digging the net and with reference to the jQuery documentation, I came to know that jQuery has a feature Using jQuery with Other Libraries i.e jQuery can be used with other libraries like mootools, prototype etc. in a single webpage. To enable this feature jQuery has a function called noConflict.
How to use this function.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
Above example demonstrates how jquery can be used with other library. $ is used in both libraries so because of conflict javascript will stop execution. jQuery.noConflict() line will release the $ variable from jQuery, so we have to write using jquery instead of $ in the jQuery program, this makes the prototype to use $ and execute the code. this way the both libraries run smoothly.
In the same way, we can use the two different version of jQuery in a single page (Drupal). By default drupal core will add jQuery 1.2.6 So in your code you add the latest jQuery and call the noConflict function like the below sample code. Below sample code use a shortcut $j, so from here instead of $ you may use the
$j to access the functions from jQuery 1.7.
<script src="jquery-latest.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
// isNumeric function introduced in latest version 1.7
alert($j.isNumeric(12));
});
// Use $ for 1.2.6 version $(...), etc.
$('#someid').hide();
</script>
If you are using a plugin which is depends on 1.7 then use as below
<script src="jquery-latest.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via $j(...)
jQuery(document).ready(function($){
// we may use usual code here
alert($.isNumeric(12));
});
// Use $ for 1.2.6 version $(...), etc.
$('#someid').hide();
</script>
