Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to use jquery no conflict?

Posted on 2015-01-06
6
Medium Priority
?
523 Views
Last Modified: 2015-01-07
Hi,

I am trying to use two plugins that needs 2 different jquery versions.

1. The full calendar plugin, whose script is inside <head> , uses jquery.min.js
2. The tooltip plugin, whose script is inside <body>, uses jquery-1.3.2.min.js

How do i use jquery noconflict in this situation?  


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
	$(document).ready(function() {
		$('#calendar').fullCalendar({
			events: {
				url: 'php/get-events.php',
				error: function() {
					$('#script-warning').show();
				}
			},
			loading: function(bool) {
				$('#loading').toggle(bool);
			}
		});

	});

</script>
</head>
<body>
<p>This is a paragraph.</p>

<div id="content" class="basic">
	<div class="center">
		<h2>The links below have a basic tooltip attached. Mouse over to see them.</h2>
		<p><a href="#">Lorem ipsum dolor</a></p>
		</div>
	</div>
	<div id='script-warning'>
		<code>php/get-events.php</code> must be running.
	</div>
	<div id='loading'>loading...</div>

	<div id='calendar'></div>


<script class="example" type="text/javascript">
	
	$(document).ready(function() {
		$('#content a[href]').qtip(
				{
					content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
				});
	});
</script>

<script type="text/javascript" src="../lib/jquery.qtip-1.0.0-rc3.min.js"></script>
</body>
</html>

Open in new window

0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 37

Expert Comment

by:Neil Russell
ID: 40533127
" jquery.min.js"
What version is this?

What errors do you have if you ONLY include 1,3,2 ?

You need to explain what problem you have for us to answer it.
0
 
LVL 37

Accepted Solution

by:
Neil Russell earned 2000 total points
ID: 40533131
Also qtip-1.0.0 is obsolete and you should be on qtip2
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40533543
use jQuery's noConflict() function

http://api.jquery.com/jquery.noconflict/
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:NeverEndingFlashStories
ID: 40534480
Hi, thanks for the responses.  

So if i remove "jquery-1.3.2.min.js"
 i get the following error in console :
Uncaught TypeError: Cannot read property 'msie' of undefined      jquery.qtip-1.0.0-rc3.min.js:15 ajquery.qtip-1.0.0-rc3.min.js:15 f.fn.qtipjson.html:114 (anonymous function)
... and it keeps going down for more errors.

 If i remove  " jquery.min.js"
i get the following error in console :
Uncaught TypeError: undefined is not a function        fullcalendar.min.js:6 njquery-1.3.2.min.js:12 o.extend.eachfullcalendar.min.js:6
....and it keeps going down for more errors as well.

Basically, it looks like removing one will make the companion plugin stop working.
The jquery.min.js is packaged with fullcalendar.io , and when i open it, it says jquery 2.1.1

Thanks for the headsup, i will try qtip2 tonight.

Hi Big Monty, my original question was actually on how to use the noconflict() . I saw the page already, but i admit, i am a beginner at jquery, and while the explanation confuses me, i also can't seem to get it to work. I am not sure where to put the noconflict() line in.
0
 

Author Comment

by:NeverEndingFlashStories
ID: 40534989
qtip2 worked. Thanks for the advice.
0
 
LVL 37

Expert Comment

by:Neil Russell
ID: 40535207
Unless you have a specific need NOT TO, always check that you are on the latest version of plugins.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

596 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