Using $ instead of jQuery in WordPress Admin

Well this is not a new issue and neither the solution is but I wanted to repeat it so that newbies don’t waste time hunting for this problem.

jQuery core is added by default in WordPress Admin Pages BUT in noConflict() mode. So if you are writing a plugin and want to use jQuery you will get an error for using because this dollar namespace is not exported in noConflict mode. As a result, your habit of writing

 

will result an error saying $ is undefined. 

To counter this problem, there are a number of ways. First and the most suggested obvious way is to use like

 

BUT, we want to do something more useful. We are going to use a combination of Closure / anonymous function + Global Import.

JavaScript has some very good features. If you have read the design patterns, you will find it very familiar, and if you haven’t it won’t be much difficult. The closures can be self executing functions. Like

 

Now there’s another thing called Global Import using this closure. Let’s have a look at how they look like.

 

Almost all the well written libraries expose a global namespace. For jQuery it’s jQuery, for Yahoo it’s YAHOO and so on. Notice that we have supplied this jQuery nameapce in parameter of closure and using $ in the callback function parameter. Now that $ can be anything. If you write $YO , you will be able to write $YO(document).ready(….) . Why to follow this ? Because you can use any of your legacy script within this anonymous closure without any modification – not even $(document).ready.

So, next time you write some jQuery code in your plugin admin pages for WordPress, consider using the second method mentioned here.

16 jQuery Plugins i used the most

It’s been over 2 years for me using jQuery in different web applications. In the beginning, there were not much alternatives to a plugin. In the modal box area, Thickbox was the uncrowned King. Bassistance.de ‘s validation was the only good validation plugin earlier. But now, millions have embraced jQuery and developed quite a lot of plugins. Most of them has alternatives. I requested jQuery.com to allow people post similar plugins on plugins pages so that people know in a nutshell about the available alternatives.  But it’s still not there. Anyways, I’m going to list out the plugins i used practically more frequently. Let’s see them by category.

Interface
jQGrid
Flexigrid
Table Drag And Drop
Tooltip Related
jGrowl
Tooltip
SlideShow
Cycle
Scrollable
Forms
Validation
Masked Input
Modals & Overlays
Boxy
Thickbox
Colorbox
Nyromodal
BlockUI
Navigation
Lavalamp
jScrollPane
Ui Tabs

jQuery removes backward compatibility in selector

[@attr] removed from jQuery

There were lot of scripts where I used jQuery selector with using [@attr]. Like if you want to select an input with a name="input_test" , you’d probably write  

$("input[@name=input_test]") to select that input. But it’s removed from releases of 1.3 and later. Now you have to write $("input[name=input_test]") and I have got no problem with removing the @ sign. It should have not been introduced at the first place. Now that there are lot of plugins are written using that and lot of custom scripts on site have used it, jQuery team should have kept a backward compatibility for the @ thing. I upgraded jQuery to latest version 1.3.2 and lately discovered that some features are simply not working. In firebug i was getting uncaught exception.  It took me a little while to understand why they were not working at all. Later i found at http://docs.jquery.com/Selectors writing 

Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the ‘@’ symbol from your selectors in order to make them work again.

Then I had to find and replace all the instances where i used the [@attr] thing in the whole site. I could not appreciate this move of jQuery Team.