Solved

How to use jquery no conflict?

Posted on 2015-01-06
6
365 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
  • 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 500 total points
ID: 40533131
Also qtip-1.0.0 is obsolete and you should be on qtip2
0
 
LVL 33

Expert Comment

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

http://api.jquery.com/jquery.noconflict/
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 

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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

860 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