Need help with jQuery noConflict

JavaScript
1

Hi there

I’m working on a WordPress theme / site for a client of ours. Long story short, it appears that a premium plugin I purchased is interfering with my jquery scripts.

I’ve tried putting my jquery into noConflict mode, but I’m not sure that I have the syntax correct, given that it’s not working…

When I remove the reference to the plugin from my footer, the jquery works. But I just want to be sure I’ve protected my js as best as possible.

jQuery.noConflict();
(function($) {
	$(function() {
	
		// easy frontend framework
		$.easy.tooltip();
		$.easy.popup();
		$.easy.external();
		$.easy.rotate();
		$.easy.cycle();
		$.easy.forms();
		$.easy.showhide();
		$.easy.jump();
		$.easy.tabs();
		$.easy.accordion();
	
		// add classes to certain elements (for styling)
		$('section.downloads article ul li:nth-child(2n)').addClass('alt');
});	

})(jQuery);

You’ll see from the script, that I’m also making use of Alen Grakelic’s Easy Front End framework, which is referenced in another file.

Any help would be appreciated.

Thanks in advance.
Jon

2

I would replace the $'s with jQuery. Even though you’re passing jQuery to the anonymous function at the beginning, $ is still most likely a global variable that you’re overwriting (otherwise there isn’t really a reason for noConflict). As a general rule, when you use noConflict, your jQuery code shouldn’t have any $'s in them.

3

Hey

Thanks for the reply. By your answer, do you mean doing this?:

jQuery.noConflict();
(function(jQuery) {
	jQuery(function() {
	
		// easy frontend framework
		jQuery.easy.tooltip();
		jQuery.easy.popup();
		jQuery.easy.external();
		jQuery.easy.rotate();
		jQuery.easy.cycle();
		jQuery.easy.forms();
		jQuery.easy.showhide();
		jQuery.easy.jump();
		jQuery.easy.tabs();
		jQuery.easy.accordion();
	
		// add classes to certain elements (for styling)
		jQuery('section.downloads article ul li:nth-child(2n)').addClass('alt');
});	

})(jQuery);

How does this affect the Easy Frontend Framework js though? Should that also be put into noConflict mode with ‘jQuery’ instead of the ‘$’ alias?

Thanks in advance.

4

The only thing that the noConflict thing does, is to stop jQuery using $, so that the $ symbol can return back to being used by the other library that needs it.

You can continue to use $ within your jQuery code, but only if you pass it in as a parameter on the jQuery callback.

There is a post in the tips and techniques thread all about the how to use jQuery conflict.