Develop Reference

Using noconflict js in Magento

One bootstrap tab navigation panel is not working properly on my magento site because of the jQuery.noConflict() call that I have used in my custom JS file.
When I comment the jQuery.noConflict() line then my tab navigation works properly. However, I cannot comment that code because when I comment that line the main navigation doesn't work.
How can I make my tab navigation work without removing the jQuery.noConflict()? Thanks.

This is because Magento still uses prototype.js, change jQuery to $j
var $j = jQuery.noConflict();
For more details check this out

Using noConflict() should be fine, however I come across issues like this a lot with Magento.
I'm assuming you're definitely loading jQuery prior to your own jQuery script, etc.
I tend to find the most watertight way of ensuring your jQuery scripts don't cause issues is to wrap your scripts in an anoymous function:
(function($) {
// Your jQuery script
})(jQuery);
As you can see, we're passing the jQuery object as an argument to our function. This means we can use $ locally within the function without it conflicting with other scripts / frameworks / libraries, etc...

jQuery isn't working in Wordpress, although plugins which use it are working fine [duplicate]

This question already has answers here:
jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function
(5 answers)
Closed 9 years ago.
So I've been trying to add a simple image slider into a page on my site. For some reason, it seems that jQuery isn't working at all when I try to call it.
Take a look at this page:
http://www.evanart.com/test/
Clicking the button brings up an alert, but that's just plain javascript. If you look in the source, i'm also trying to bring up an alert on pageload with jQuery, but nothing is happening. I'm running that script both in the post and in the head. There isn't anything wrong with the script itself- i've tried it on another site and it works fine.
So, jQuery isn't working. It seems like its linked just fine though. I also have some wordpress plugins running (a lightbox, a lazy loader, and an infinite scroll feature) which all work fine. What am i doing wrong??

The jQuery library in wordpress doesn't declare $ as the jQuery variable.
If you want to use $ you can write your code inside of a anonymous function using $ as parameter and jQuery as a value:
(function ($) {
// put the code that uses $ in here.
}(jQuery));
or, to match your code:
jQuery(document).ready(function($) {
// put the code here
}(jQuery));

WordPress loads jQuery in no conflict mode to prevent issues with other libraries.
So you must use jQuery instead of $ in your code.
For example, I saw this in your page:
$(document).ready(function() {
alert('hi');
});
For it to work, and still use the $ sign, you must use the jQuery noConflict Wrapper:
jQuery(document).ready(function($) {
alert('hi');
});

Javascript errors in my Joomla website

my website is marutiindia.in. My website was working fine until I installed a module named lof k2 scroller. The website was showing jquery errors and the module at the lower half of the template was not working. But I managed to get the module to work by adding the following code at the start of the JS file which was showing error:
if(jQuery){
jQuery.noConflict();
}
But, now I am getting other JS errors which I am not able to understand.
Below is the link for the screenshot of errors:
Screenshot
I don't know what these errors mean.
Also I have one more plugin to use for my website which also causes scroller to not work.
Please help me resolve these errors.
Thanks.

Joomla uses Mootools, which also use the $ function name. in order to avoid this, your plugins either:
must use jQuery instead of $. For example, instead of $('div') to get divs, use jQuery('div')
if you really want to use $, wrap the jQuery code in a closure
(function($){
//code that uses `$`
}(jQuery))
make sure the plugins are extending from jQuery and not $.

I am building portfolio by using Jquery plugin filterable.pack and also using lightbox2 to open images. what lightbox is not working

I am using file below..
src="js/jquery-1.4.4.min.js">
src="js/filterable.pack.js">
src="js/prototype.js">
src="js/scriptaculous.js?load=effects,builder">
src="js/lightbox.js">
please help.. or tell is there any conflict b/w jquery files or something else..

If you use jQuery and Prototype in the same page, it's best to:
include jQuery after Prototype (so it has the $ it can restore)
call jQuery.noConflict() on jQuery, then use jQuery or whatever variable you set instead of $
Once you change the script order, it would look like this:
var $j = jQuery.noConflict();
$j(".selector").myPlugin();

Fancybox is not a function

Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};

I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).

I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.

Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.

You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.

If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.

In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.

If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.

I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.