Scripts are incompatible/don’t work when used together

**VIPStephan** · 08-30-2012, 10:12 PM

As this has been asked many, many times and I’m tired of answering this very basic question I hope this sticky thread clarifies why two (or more) scripts/plugins may not work together while they are working alone.

You are probably including different and incompatible JavaScript frameworks or have several references to the same framework in one document. This often happens when jQuery and prototype are used together (because they both use the Dollar character ($) in their functions, but in different ways), or when a framework file is referenced more than once because of negligent copy-pasting.

The short answer is: Use only one JavaScript framework/library on your site and stick to it by choosing only plugins for that library. I’m sure there is something similar for every major framework. Also, only reference the core library files once, and once only. If you already have a plugin in your document that is working then you don’t need to include another script tag with reference to the core framework with the next plugin.

Here are more elaborate explanations to the issues and solutions:

Case 1: Two incompatible frameworks
Your code might look something like this, because you followed the instructions on the websites from which you got the code and copied it into your document.

Code:

<head>
…
…
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/slides.js"></script>
…
…

That’s a lightbox plugin and a slider plugin (I just chose that for demonstration and they don’t reflect the actual current implementation or state of development).
You’ve done all the right things and yet, it isn’t working because you have a plugin that is using the prototype framework and another one using jQuery:

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/slides.js"></script>

They are not compatible because they share some naming conventions but are different nevertheless and one script doesn’t understand what the other wants.

The solution: Replace one of the two plugins with a plugin for the matching JS framework, i. e. either look for a slider that is based on prototype or look for a lightbox script based on jQuery.

Case 2: Multiple references to the same framework
Choosing plugins for the same framework isn’t free of errors either. This could be your code:

Code:

<head>
…
…
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.dropotron-1.0.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.slidorion.min.js"></script>
…
…

You thought you did everything right with sticking to one framework but here the jQuery core is referenced multiple times:

Code:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.dropotron-1.0.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.slidorion.min.js"></script>

You don’t need a second reference to jQuery for the second plugin because the plugins are all based on the same framework and referencing the core framework once only is sufficient (and mandatory, indeed). So if you include several plugins, leave the reference to jQuery (or any framework you might use) out for subsequent plugins, even if the instructions tell you to include it. Remember, you have included the framework already with your first plugin, so the other plugins will use that and don’t need additional references.

Note, however, that some plugins might be based on outdated versions of the core framework and might not work with newer versions. Even though you’ve really done everything right this time and used one framework and included it once only, with one plugin based on, say, jQuery 1.2.6 and the other one based on jQuery 1.8, one of them will most likely not work (depending on which version of jQuery you have included/referenced) because in the meantime the code has changed, new features were added and old ones removed. Always look for the version number of the framework on which the plugins are based and try to use the most current ones.

I hope this helps anyone (and I hope anyone actually reads this). Good luck.

**AndrewGSW** · 08-30-2012, 10:24 PM

Just my two cents:

Best advice, as suggested, is to use one framework or the other (prototype OR jQuery etc.). No matter what plug-in or feature you would like to use, a comparable version can always be found in the other framework.

Can I also repeat the need to WAIT UNTIL THE PAGE HAS FULLY LOADED before attempting to reference any element on the page. In jQuery:

Code:

$(document).ready(function() {
    // reference page elements, attach events, here!
});

or even the shorthand version:

Code:

$(function () {  
    // your code  
});

The elements on the page DO NOT EXIST until the page has loaded.

This is the most common error.

**sagebrushfire** · 03-25-2015, 05:22 PM

I would generally just choose one but you could always just isolate each one. Load Prototype and all its plugins and then assign it to a new Variable. Then do the same with jQuery. Then you can feed them into your scripts as-needed and name them whatever you want.

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script>
window.libs = {
    Prototype: window.Prototype
};

window.Prototype = false;
window.$ = false;
</script>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/slides.js"></script>
<script>
window.libs.jQuery = window.$;
window.jQuery = false;
window.$ = false;
</script>

<script>

(function($){
 // This code only has access to jQuery and whatever jQuery plugins were loaded

})(window.libs.jQuery);


(function($){
 // This code only has access to Prototype & its plugins

})(window.libs.Prototype);

(function($p, $j){
 // This code has access to Prototype and jQuery but we've given them unique names.

})(window.libs.Prototype, window.libs.jQuery);


</script>

Does that help at all? I don't know very much about Prototype so you may have to augment the setup script to really wipe it before getting jQuery but I think that gives you the effect you want.

**felgall** · 01-07-2016, 10:36 PM

Another thing you should do is to wrap all of your own code inside of IIFEs. That means that your code always looks like this:

Code:

(function() {
"use strict";
// your code goes here
}());

If you are using a framework or two then you pass the framework in as a parameter - so if you are using jQuery you would use:

Code:

jQuery.noConflict();
(function($) {
"use strict";
// your code goes here ($ in here refers to jQuery)
}(jQuery));

If you are also using another framework for a different script that also uses $ you can then use:

Code:

(function($) {
"use strict";
// your code goes here ($ in here refers to the other framework not jQuery)
}($));

By specifying "use strict" you tell JavaScript that you are using the post 2009 version where all variables must be declared and so your scripts will have their own local variables rather than clashing with variables that are global. The only global variables you need are the ones that provide access to the framework and the DOM calls that provide access to the HTML.

If you also use event listeners instead of event handlers then the listeners can't clash as you can add as many listeners as you like and have them all run whereas adding the same handler twice will have the second replace the first so that the first cannot run.

Thread: Scripts are incompatible/don’t work when used together

Thread Tools

Rate This Thread

Scripts are incompatible/don’t work when used together

The Following 2 Users Say Thank You to VIPStephan For This Useful Post:

Posting Permissions