Conflicts in Mootools & jQuery In Joomla - javascript

I read all the related post but I think I am missing something.
My page structure is:
1 - Load Motools library in Joomla. Code:
JHTML::_('behavior.tooltip');
JHTML::_('behavior.mootools');
JHTML::_('behavior.formvalidation');
2 - Then load the Jquery library code is:
<script language="javascript" src="<?=$this->baseurl;?>/includes/js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?=$this->baseurl;?>/includes/js/jquery/customjsfile.js"></script>`
3 - Then there are few JS function which uses Jquery Functionalities. The code is:
function abc() { /* -.stuffs uses jquery */ }
function xyz() { /* ..another function which uses jquery */}
4 - Load body of the page
5 - At the end again few lines of JS code . Which again use Jquery. Code is:
<script language="javascript">
$("#dialog").html(newHTML);
</script>
This is how my page is.
Now I am getting the Conflict errors in Motools & Jquery.
How do I resolve it.

use jQuery instead of $ and
give
jQuery.noConflict();
jQuery.noConflict
Many JavaScript libraries use $ as a
function or variable name, just as
jQuery does. In jQuery's case, $ is
just an alias for jQuery, so all
functionality is available without
using $. If we need to use another
JavaScript library alongside jQuery,
we can return control of $ back to
the other library with a call to
$.noConflict():

Please see:
Using JQuery with other libraries.

jQuery.noConflict(), this is what you need.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
source: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

See this page. It seems to be answered there
http://groups.google.com/group/jquery-en/browse_thread/thread/3dabd31a8ab60505?pli=1

Related

JQuery Version and Editing Tool Tips

I am using a tooltip edit script that includes the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor: true,
tip_delay_time: 90,
tip_fade_speed: 600,
attribute: "title"
});
});
})(jQuery);
</script>
But, due to another script I am using, I need to use this version of jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Trying to use the 2.1.4 breaks the tooltips style. Help? I am super super new to jQuery and Javascript.
As #Ali said in his comment, you can use jQuery's noConflict function.
By default, jQuery uses $ as a shorthand function name. Using jQuery.noConflict() you can bind this to something else.
This means, as shown in the linked answer, you can do the following:
For version 1.7, you can do the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
var jQ = $.noConflict(true);
</script>
Now, instead of $(document).ready() you can use jQ(document).ready() to access jQuery 1.7 functions.
jQuery 2.1.4 will still be accessible through $.
Do note that jQuery 1.7 is 6 years old, and might be obsolete. Consider looking for a more up-to-date version of the Tooltip library you're using.
Bootstrap has the functionality you're looking for!

jQuery error even though jQuery is included [duplicate]

I am using a combination of prototype and script.aculo.us to implement a lightbox effect in my asp.net page.I have also jquery included in my page.I have several DIV tags in my page,But after including the prototype file in my head of the page,I am not able to read the divs in my javascript using jquery
var div = $("#divLeftSideModelsList");
alert(div)
gives me an error saying that the object is null
But
var div = document.getElementById("divLeftSideModelsList")
is giving me the object.
Is this becuase there is some conflicts between jQuery and other frameworks ?
PLEASE advice
Have a read of this: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Shows good examples :)
OVERRIDING THE $-FUNCTION
However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.
Additionally, there's another option. If you want to make sure that jQuery won't conflict with another library - but you want the benefit of a short name, you could do something like this:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
You should use jQuery in noConflict mode. And then use jQuery() instead of $().
Strange bug. Anyways, both prototype and jQuery redefine the global variable $.
Please read this to know how jQuery can play nice with other libraries.
It basically says that calling jQuery.noConflict() leaves the $ variable alone for the other libs to use
Does this code work:
var div = jQuery("#divLeftSideModelsList");
alert(div);

Jquery library conflict with another jQuery library

I am using a lot of jQuery libraries in my application.
My application is based on a map, and the map is generated by my own server mapmyindia.com.
The problem is that there is a jQuery conflict that occurs when I use fancybox jQuery library, pagination jQuery library and drop-down checklist jQuery library, all work together.
My direction search API's don't work because of a jQuery library conflict.
However, if I remove all the jQuery libraries, I can use my direction search API
just fine.
With the jQuery libraries enabled, it gives me an error:
$.jsonp is not a function
My application is on app.mapmyindia.com/michelin please help me.......
<script>MIREO_RESOURCES_ROOT = "http://46.137.254.191/MapServer/";</script>
<script type="text/javascript" src="http://46.137.254.191/MapServer/MireoWebMap.js"></script>
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
<script type="text/javascript" src="jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.0.6" media="screen"/>
Try to use jquery noConflict() and download the latest version of jquery that resolve some problems conflict
try this :
use jquery noconflict and wrap your code in jQuery functions :
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
jQuery(function($){
// my code here each
});
good luck.
The order in which you have declared your javascript, that is importing your MapmyIndia Js first, using it
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
& then calling jQuery, I don't think so jQuery would be creating problem.
Also you should be using
var map=document.getElementById("id");
since you are calling jQuery after that so $() won't work.
EDIT : Or if the MayMyIndia Js also requires jQuery then you should call jQuery.Js on top.

why jquery/javascript code get conflict with other jquery/javascript?

While using jquery or javascript code most of the time i have to face the problem of jquery or javascript conflict.
Still i haven't got the reason why this stuff get conflict with other code?
Any one have any idea about this?
And any solution so that next time this issue will not occur while project development.
I have one solution to stop the conflict of jquery files that is,
<script>
var j$=jQuery.noConflict();
</script>
but all the time this code is not working.
If you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
Method 1:
When you put jQuery into no-conflict mode, you have the option of assigning a variable name to replace $. ( only once )
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>
Method 2
You can continue to use the standard $ by wrapping your code in a
self-executing anonymous function; this is a standard pattern for
plugin authoring, where the author cannot know whether another library
will have taken over the $.
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function($) {
// your code here, using the $
})(jQuery);
</script>
Method 3:
use jQuery instead of $
there few other ways to do so
reference
For jQuery, it's explained in noConflict's API page; basically, many JS frameworks use $ as a function name, and so they may conflict if more than one is used. Which it shouldn't anyway.
Try placing this in your header:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"> </script>
Try to give an alert when DOM is ready and find it alerts or not if not there is a conflict
<script>
$(document).ready(function () {
alert("Hello!");
});
</script>
I there is conflict try this:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

Reusing jQuery code inside a Prototype Rails app

javascript noob here. So I'm trying to use this s3 uploader jQuery example here
in my Rails 3 app which uses Prototype. After reading the jquery doc on how to use Prototype and jQuery and avoiding conflict, I am confused on where to use the jQuery.noConflict(); function.
I planned to use the
jQuery.noConflict();
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
to wrap any jQuery code, but it doesn't seem to function.
My question is
Should I wrap the code in jquery.js ? the js files from plupload? The javascript code in the helper?
There is a good example of where to put .noConflict() here: http://api.jquery.com/jQuery.noConflict/
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

Categories

Resources