Solved

How to use jquery no conflict?

Posted on 2015-01-06
6
390 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 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
Technology Partners: 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

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery or Javascript animation question 6 73
File names with & character 6 89
AngularJS directive issue 6 80
Swiper slider stops between pages 11 52
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

726 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