Avoiding conflicts in jQuery and jQuery extensions !

Question

I'm using jQuery and some very-common-jquery-plugins in CMS extensions (including jQueryUI and jQueryTools along with many others) in some CMS extensions that are used by many people in a wide array of situations. I always get into issues where there are conflicts between my extension's plugins and plugins added by another extension on the same CMS page. Sometimes the other extension loads an earlier version of the jQuery plugin and it kills my instance.

I want to "rename" or "wrap" (into a single plugin with a unique name) all the plugins that my extensions use so my instance doesn't get affected in any way even when there are other instances of the same plugins on the same page.

Wrapping all plugins into a single plugin would be the ideal solution, if that's possible - instead of renaming.

Any suggestions, Is this even possible ?

Thanks a bunch, Norman.

Answer 1

Maybe here you can find answer?

http://stackoverflow.com/questions/1117463/two-jquery-versions-on-the-same-page

Answer 2

You can wrap plugins in an anonymous function and call them with the specific version of jquery.

Example:

<script src="jquery-1.3.js"></script>
<script>
  $jq13 = jQuery.noConflict(true);
</script>

<script src="jquery-1.4.js"></script>
<script>
  $jq14 = jQuery.noConflict(true);
</script>

<script>
  (function($){
    // All references to $ in this block will refer to $jq14
    // Put plugins inline here
  })($jq14);
</script>

Well written plugins will already be written this way, so you can just change the last line to set which jquery object it should use.

Or you could change window.jquery before calling each plugin. Like this:

<script src="jquery-1.3.js"></script>
<script>
  $jq13 = jQuery.noConflict(true);
</script>

<script src="jquery-1.4.js"></script>
<script>
  $jq14 = jQuery.noConflict(true);
</script>

<script>
  window.jQuery = $jq14;
</script>
<script src="some_plugin.js"></script>

<script>
  window.jQuery = $jq13;
</script>
<script src="some_other_plugin.js"></script>

A little less elegant, but it should work.