CODEWITHSUNDEEP
jqueryprototypejsselectize.js
DanMatlin
DanMatlin

Reputation: 1252

Prototype.js conflicting with jquery plugins

My application has been using prototype.js for a while. I am now trying to use jQuery and a jquery plugin for some enhanced functionality. However prototype.js and jQuery produce a conflict for the use of the '$' variable. This can ofcourse be resolved by the noConflict() method provided by jQuery and hence I can change the jQuery shortcut to what I want. The problem is how do I use the jQuery plugin which I want to import. Surely there is a better way than finding and replacing all the '$' variables.

The plugin being used is 'Selectize' https://github.com/brianreavis/selectize.js

Upvotes: 2

Views: 411

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074979

You've edited your question to say:

The plugin being used is 'Selectize' https://github.com/brianreavis/selectize.js

That plugin doesn't rely on the global $ symbol at all; there's nothing you need to do to make the plugin compatible with a site that uses $ for something else (such as Prototype). The plugin only relies on the jQuery symbol. (It uses $ internally, but only as a local variable; it doesn't use the global.) Any properly-written jQuery plugin avoids using the global $, because of this very issue.

To use that on your site, you'd do something like this:

<script src="/path/to/prototype.js"></script>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/your/code.js></script>

...where your code might look like this:

(function() {
    var $j = jQuery.noConflict();
    $j("some-selector").pluginMethod();  // jQuery
    $("some-id").addClassName("foo");    // Prototype
})();

(You don't need the wrapper function there, it's just to avoid creating a $j global).

Or just:

jQuery.noConflict();
jQuery("some-selector").pluginMethod();  // jQuery
$("some-id").addClassName("foo");        // Prototype

Upvotes: 3

Alex KeySmith
Alex KeySmith

Reputation: 17101

I think T.J. Crowder has a good answer, but as an alternative if you need to manage conflicts etc across your entire project. You may wish to consider requirejs.

I won't go into detail about requirejs as plenty can be found on it's site.

RequireJS is a module loader to help manage problems like this and has features to help with javascript that does not adhere to the asynchronous module pattern.

Here is an article discussing it's use with jQuery and plugins. http://requirejs.org/docs/jquery.html

Upvotes: 0

Related Questions