• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 762
  • Last Modified:

How to use jquery no conflict?

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
NeverEndingFlashStories
Asked:
NeverEndingFlashStories
  • 3
  • 2
1 Solution
 
Neil RussellTechnical Development LeadCommented:
" 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
 
Neil RussellTechnical Development LeadCommented:
Also qtip-1.0.0 is obsolete and you should be on qtip2
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
use jQuery's noConflict() function

http://api.jquery.com/jquery.noconflict/
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
NeverEndingFlashStoriesAuthor Commented:
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
 
NeverEndingFlashStoriesAuthor Commented:
qtip2 worked. Thanks for the advice.
0
 
Neil RussellTechnical Development LeadCommented:
Unless you have a specific need NOT TO, always check that you are on the latest version of plugins.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now