The Life and Times of Michael Shadle

Blog | Projects | Netflix

jQuery's no-conflict mode: Yet another reason why it's the best
Tuesday, July 3rd, 2007 at 3:29 pm

It took me a bit to find out why jQuery (now bundled with WordPress) was not working as I expected inside of the WP admin area. The script was being called, but my code like $("#foo") was not working. I really had no clue where to begin, since it still has all those old JS libraries/frameworks being called as well. It was due to Prototype being packaged with it and conflicting with the "$" shortcut.

Long story short, jQuery already planned for library conflicts and has a quick solution. The no-conflict mode allows you to define your own shortcut, and of course it works like a charm.

It's easy to do - just put this line in your code somewhere:

var J = jQuery.noConflict();

Now $("#foo") will be J("#foo") and it will not conflict with any other libraries that may be installed. I hope WP gets rid of all the other stuff and goes with pure jQuery and plugins soon enough though :)

This entry was posted and is filed under Development, WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to "jQuery's no-conflict mode: Yet another reason why it's the best"

  1. On July 29th, 2007 at 1:56 pm, Around the web | alexking.org says:

    [...] jQuery’s no-conflict mode: Yet another reason why it’s the best - I’m sold, been loving jQuery so far. [...]

  2. On September 1st, 2007 at 4:23 pm, low says:

    excellent solution! worked like a charm! thank you!

  3. On June 11th, 2008 at 8:56 pm, mike says:

    Can I see your html, I don't understand where to put it. I am not to good with javascript.
    Thanks

  4. On November 7th, 2008 at 1:17 pm, David Morón says:

    This also fixes the issue between lightbox2 and jQuery Multi Level CSS Menu #2...

    Genious

  5. On November 8th, 2008 at 12:56 pm, hubba says:

    THIS ROCKS! I been starring at my wordpress theme code for days.. I know it must be some conflict going on there.. and YOU .. YOU GAVE ME THE ANSWER! this is so awesome!

  6. On November 19th, 2008 at 11:52 pm, mei says:

    Sorry for being stupid. But I tried the noConflict() function. I placed it RIGHT AFTER jQuery.js is called, but BEFORE prototype is called. In between these two, I had other UI libraries being called as well. I assigned jQuery to new var $j, and I changed the call in my function (which is called after all the libraries) to refer to $j instead of $, it still doesn't work.

    It looks like my UI libraries functions are now broken (from the error I am getting like "the.style" is null or not an object).

    Can you please help?? Thanks so much in advance!

  7. On November 20th, 2008 at 12:09 am, mike says:

    Honestly, I don't think I can help. I got lucky with this a while ago, and I simply done have the mental patience to try and work with it again... sorry :)

Comment on this post:

Entries (RSS) and Comments (RSS). 14 queries. 0.170 seconds.