Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,798
    Thanks
    6
    Thanked 1,023 Times in 996 Posts

    Scripts are incompatible/don’t work when used together

    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.

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

    AndrewGSW (08-30-2012), WolfShade (08-30-2012)

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 08-30-2012 at 10:34 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •