Question

Having a persistent problem with Jquery in firebug…frequently I’ll type some
JQuery statement into the firebug console and it won’t work, I’ll try to load a
JQuery Object into a variable and will just get an ‘undefined’ error.

I found a code snippet somewhere in a Stack Overflow comment that makes everything work, its something like

($){
    //all of your JQuery goes here
}(JQuery);

…
Something like that. This piece of code definitely makes all my JQuery go, I just can’t understand why. Possibly it has something to do with namespaces or something? I have been cutting and pasting it from bookmark to scripts for a while, kind of would rather have insight. I see some sample scripts in Stack Overflow that include this code, and some that don’t. I have the Apress JQuery and the Firebug books, neither one mentions it. I have the JQuerify plugin to firebug, and mostly work on Drupal sites which include JQuery by default. Still need this code to make things work.

So My question is — what is the purpose of this code, what is it called (so I have a search term aside from just browsing this site hoping for code that includes it) and is there any reason to think that its necessary to make a JQuery script work in the firebug console? If there’s not, is there some deeper issue that this code addresses, and are there other ways to address it?

Thanks a lot,

Answer 1

Whenever you want to use jQuery on the Firebug console, you need to make sure that jQuery is actually loaded. If you’re on a page that uses jQuery, you’re good to go. Otherwise the library first needs to be included (<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>).

If the $ shortcut is used by another library, you’re still able to use the global “jQuery” named variable. To restore the $, you can put your code in a closure:

(function($) {
    // ...
})(jQuery);

But don’t confuse this syntax with the shortcut for jQuery’s ready event (I’m not really sure what you’re referring to with that code snippet):

$(function() {
    // ...
});