?
Solved

Can I use two jQuery files on same page?

Posted on 2012-09-13
7
Medium Priority
?
348 Views
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?
0
Comment
Question by:sandshakimi
7 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 750 total points
ID: 38397388
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();
</script>

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.
0
 

Author Comment

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

thanks
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 38397660
Check this post on jquery forum

Jquery Forum
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 375 total points
ID: 38397766
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.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38398155
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.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 750 total points
ID: 38398544
<script src='jquery-1.7.0.js'></script><script>
var jq_1.7 = jQuery.noConflict();
</script>
<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.
0
 
LVL 12

Accepted Solution

by:
junipllc earned 375 total points
ID: 38399665
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:

http://dtengeri.blogspot.com/2010/10/how-to-use-jquery-14-in-drupal-6-module.html

and the module, should you choose to use it:

http://drupal.org/project/jqmulti

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

Good luck!

Mike
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…
Suggested Courses
Course of the Month14 days, 13 hours left to enroll

840 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