CODEWITHSUNDEEP
jqueryjquery-plugins
Norman
Norman

Reputation: 795

Avoiding conflicts in jQuery and jQuery extensions !

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.

Upvotes: 2

Views: 2279

Answers (2)

zaius
zaius

Reputation: 6409

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.

Upvotes: 3

Gavrisimo
Gavrisimo

Reputation: 1837

Maybe here you can find answer?

Two jQuery versions on the same page

Upvotes: 0

Related Questions