Using different JQuery versions in the same page

Suppose your web page in the CMS is already using one version of jquery and you want to add a new HTML element with a javascript library that needs a more recent version of jquery.

You may think to use the google api like:

<script>
  google.load("jquery", "1.3.2");
</script>

and then use the noConflict option like:

<script>
function OnLoad(){
  jq13 = jQuery.noConflict(true);
}

google.load("jquery", "1.3.2");
google.setOnLoadCallback(OnLoad);
</script>

Unfortunately this will not work correctly in IE…so you may want to use the technique to dynamically load a javascript (see http://themnd.blogspot.com/2009/12/dynamically-load-javascript-on-webpage.html)

<script>
function OnLoad(){
  jq13 = jQuery.noConflict(true);
}

function loadJQuery() {
  loadJS('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', function() {
    OnLoad();
  });
}

jQuery(document).ready(function() {
  setTimeout(function() {
    loadJQuery();
  }, 2000);
});
</script>

at this point you can load the needed library in the OnLoad function before setting the noConflict option. Please note that we are still using the google cdn to fetch the jquery library. The OnLoad function would be something like:

function OnLoad(){
  loadJS(plugin_url, function() {
    jq13 = jQuery.noConflict(true);
    // now you can call the plugin methods here:
    jq13.XXXX()
  });
}