Can I use two jQuery files on same page?

Posted on 2012-09-13
Last Modified: 2012-10-02
Without getting into too much detail, I'm having to deal with a page that uses two different jQuery files (1.7 and 1.8).

The 1.8 .js file was put in last. (it drives a simple fade-in animation). It was soon learned that the a previous function (slideshow) using 1.7 js stopped working.

So, question is how can I get the page to honor both files without stepping on each other?
Question by:sandshakimi
    LVL 58

    Assisted Solution

    You can but you need to specify an identifier for one version e.g.
    <script src='jquery-1.7.0.js'></script><script>
    var jq_1.7 = jQuery.noConflict();

    Then load the later version as normal and use $ (default) for it.
    You should look at updating your code to work with the later version rather than using two versions.

    Author Comment

    line of code makes sense, but clarify "load the later version as normal and use $ (default) for it."

    LVL 17

    Expert Comment

    Check this post on jquery forum

    Jquery Forum
    LVL 49

    Assisted Solution

    by:Julian Hansen
    The 1.8 .js file was put in last. (it drives a simple fade-in animation).
    I am assuming that the above won't run on 1.7? Odd that you should have two conflicts - are you sure it is the jquery library that is at fault? Are you sure it is not the components themselves that are bumping into each other.

    I have mixed libraries from 1.3 and have not had an unresolvable conflict yet (maybe I am just lucky).

    Even if loading both jquery libraries works now it is not advisable - you would be better off spending the time to find out the cause and fixing that or else you are going to have potential maintenance headaches down the line.
    LVL 42

    Expert Comment

    by:Chris Stanyon
    I'm with Julian on this - rather than load 2 libraries, fix whatever was broken - it will save you headaches later on. There's not that much difference between 1.7 and 1.8 so it's probably something simple - fade-ins and slideshows are fairly straight forward, so you should be able to track down the problem.
    LVL 58

    Assisted Solution

    <script src='jquery-1.7.0.js'></script><script>
    var jq_1.7 = jQuery.noConflict();
    <script src='jquery-1.8.0.js'></script><script>

    Then you use js_1.7 to access the 1.7 library and $ to access the 1.8 library

    But as I've said and others have said you should find the reason for the conflict or update your code to work with the new library.
    LVL 12

    Accepted Solution

    If you're working with two jQuery library versions on the same page in Drupal, know that certain parts of Drupal which are jQuery, such as the draggable blocks on the admin/build/blocks page, autocomplete, batch API, etc. are not compatible with jQuery greater than 1.3.2 (for Drupal 6). I believe there is a similar situation with Drupal 7, although I haven't run into it yet.

    As others have said, jQuery.noConflict() is the solution to the problem. There is a module for this as well, but I typically just code it in manually (in the .info file, of course). I believe this was a purposeful design decision to standardize the Drupal environment. I beat my head mercilessly against the wall until I found out why.

    Here's a great blog post about it:

    and the module, should you choose to use it:

    My advice: be very organized, both with the order of scripts loading and javascript aggregation (which should work fine).

    Good luck!


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now