Develop Reference

jQuery scope with noconflict in wordpress

I'm bringing a template across from an old version of Joomla into Wordpress and got quite a few javascript files that I have to use with the main referring out to functions in the others. All of these files use jQuery left right and centre and given Wordpress uses noconflict by default I thought it would be straightforward to wrap each js file up like this:
(function($){
....my code...
})(jQuery);
The problem I get is with the scope of functions that are called across files, so for example:
File 1
(function($){
$(document).ready(function(){
mainmenu();
});
})(jQuery);
File 2
(function($){
function mainmenu(){
alert("hello");
}
})(jQuery);
Here is the problem I get the error "uncaught ReferenceError: mainmenu is not defined", I know it will be something simple to reference the function, but I can't see it, probably be a "Doh" moment.
Any help is most appreciated. Yes I know I could just find and replace the '$' with 'jQuery' but I just thought that there must be a way to do it?

it is because the mainmenu is a closure function within the anonymous function in the second file.. so it is not available in file1.
One possible solution is to make it a global function, so that it will be available in the global scope.
(function($){
window.mainmenu = function (){
alert("hello");
}
})(jQuery);

Writing a custom plugin for Zepto with jQuery fallback

I am looking into Zepto with a jQuery fallback (as seen on Zepto's website) to see if it is viable for an upcoming project.
I was hoping to build a custom plugin using $.extend, but noticed in Zepto's example that they pass in Zepto as the $ variable as does jQuery. Would there be a way to pass in whatever library is loaded?
Zepto plugin:
;(function($){
$.extend($.fn, {
foo: function(){
}
})
})(Zepto)
jQuery plugin:
(function( $ ) {
$.fn.myPlugin = function() {
};
})( jQuery );

Edit: Updated answer.
My original thoughts were to simply pass $ as the parameter, which works, but doesn't offer great portability if the plugin is to be distributed throughout various projects.
Instead you should use the OR operator to detect whether Zepto is loaded, falling back to jQuery if it isn't.
;(function($){
$.extend($.fn, {
foo: function(){
}
})
})(window.Zepto || window.jQuery)

Use jQuery.noConflict() to avoid collision with another library that uses $ alias. That way $ would always be Zepto and you can use any other alias you want for jQuery, or just use the jQuery object itself
You can still use $ in your jQuery code wrapped in document.ready if you pass it as an argument of document.ready;
API Reference: http://api.jquery.com/jQuery.noConflict/

Jquery No Conflict jquery-1.7.1.min.js

I am not too familiar with jQuery.noConflict. I have tried to implement it a couple times, but I feel I am doing it wrong.
Is there a way to set a noConflict with "jquery-1.7.1.min.js"? Do I put it in the actual file, or in the header of my index or both? I have tried to follow examples but I know I am doing it wrong.
Any guidance or quick examples would help me tremendously!

var foo = $.noconflict();
foo('body').addClass('bar');
You can either assign it a new alias (as shown above) or call $.noConflict and only have jQuery available for use. If you chose an alias though you must use that new alias every time you want to reference jQuery.
Keep in mind though that you can enable noConflict, but still have it available when necessary using an anonymous function:
// disable $ and force use of myJQ
var myJQ = jQuery.noConflict();
(function($){
//
// be able to use $ within this block and have it mean jQuery
//
$('body').addClass('foo');
})(myJQ);
// we're outside the block, now we're back to myJQ
myJQ('body').removeClass('foo');

No conflict mode is easy to use. Include this shortly after loading jQuery and any jQuery-dependent libraries:
var $j = jQuery.noConflict();
Then, instead of using $ for everything, use $j:
var elements = $j('.class-name');

Have you tried the following examples:
http://api.jquery.com/jQuery.noConflict/
I think it says all about it. Check your browser console to see any errors.

I'd recommend using a noConflict call, as well as wrapping your jQuery code with an anonymous function, so you can call jQuery by $:
jQuery.noConflict();
(function ($) {
// Now you can use $ to call jQuery
}(jQuery));

Declare Code as JQuery

I have mootools and jquery installed (Joomla) for various reasons, and I think my jquery code is trying to run through mootools because I keep getting a bunch of garbage errors with $.getJSON. Is there something I can wrap around my Jquery code that I don't have this kind of cross-framework conflict?

You need to use noConflict():
http://api.jquery.com/jQuery.noConflict/
You can replace $ with any variable you want:
var $jq = jQuery.noConflict();
If you read the doc, you can use noConflict and still use $ within a $.ready() call, and use $ for mootools outside of the ready call.

var jQuery = jQuery.noConflict();
then try replace the $ with jQuery
or alternatively just jQuery.noConflict(); and keep using $
Check this

mootools: $ not defined

I've strange error i don't understand. I'm just moving my code from jQuery over to Mootools because it's much cleaner than the jQuery mess.
Now when i use the
$$('div.canvas')
in mootools i get the correct element.
When i try
$(document).getElement('div.canvas')
it tells me that $ is not defined. How can $$ and all helper functions like $lambda etc. be defined but not $?
Has something changed there from 1.1 to 1.2 and the docs are not updated yet?

as someone pointed out, when $ is defined, mootools 1.2.3+ will not take it over, it will revert to using document.id instead. this did not used to happen before that release so it largely depends on the version you are referencing. but it's certainly changed since 1.11 and it IS documented, read the announcement here http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
to your application design this means that, if your structure is...
load jquery (no need for noconflict, does not matter)
load mootools
... it can work as follows:
$("#foo"); // jquery
document.id("foo"); // mootools
// or create a temporary scope for mootools things
(function($) {
$("foo"); // mootools
})(document.id);
best / recent practices in mootools development require plugins and code released to reference document.id or be within such a closure to ensure compatibility. this is actually ok as unlike in jquery where $ aliases the jQuery singleton, in mootools $ is just a selector so its use will be far less spread. Hence typing document.id("selector") is not going to be that much of a drag.

Have you removed all reference to jQuery in your htmls?

MooTools will not override the $ function if it exists already. It checks for nullness of $ before defining it. So I suspect the $ is still lurking somewhere.
if (window.$ == null) Window.implement({
$: function(el, nc){
return document.id(el, nc, this.document);
}
});
After including jQuery and running $.noConflict(); but before including MooTools, can you log the contents of $ and see what is logged?
include jquery
$.noConflict();
console.log($); // should return undefined
include mootools

If you are using both libraries on the same page you must use JQuery's noConflict() function
<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>
If you are still having trouble, try checking through your included JQuery files to ensure that any plugins/code use jQuery('div.canvas') etc instead of $ as $ has been released by the noConflict() function and will not run JQuery code.