Facebook Connect, jQuery UI, and jQuery.noConflict()

Question

I'm trying to build a page on my personal website that both used jQuery and implements Facebook Connect.

Unfortunately, the Facebook client API uses the $ token, which means I have to call jQuery.noConflict()

Double-unfortunately, I've found out that for some crazy reason and as Rick Strahl points out, jQuery UI doesn't respect noConlict(). At all. In fact, if you look at the source code, there are $s all over it.

I really want to be able to use jQuery UI - specifically, the dialog()component, and draggable would be really nice as well - but I even moreso, I don't want to have to hand-edit - and test, and maintain - my own copy of any part of jQuery UI.

This is the most recent in a series of yaks I've had to shave which has me at my wits' end. Any suggestions? Help!

Answer 1

The post you've referenced is quite old and out of date. The 1.0 release of jQuery UI had this issue in a couple of files and was fixed as soon as it was reported.

All of jQuery UI is wrapped in a closure that passes in jQuery as $ and therefore can use $ internally while $ is used for something else externally.

From http://docs.jquery.com/Using_jQuery_with_Other_Libraries#Referencing_Magic_-_Shortcuts_for_jQuery

Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:

(function($) {
  /* some code that uses $ */
})(jQuery)

Note: If you use this technique, you can still use Prototype via window.$ e.g., window.$('some_element_id'). Any function outside of your closure that references $ will invoke Prototype, even if called from inside your closure.

This is why you'll see $ inside the jQuery UI files, but rest assured, any recent version of jQuery UI (1.5+) is completely supported with jQuery.noConflict()