Executing jQuery.noConflict() mandatory when using jQuery in Visualforce

Visualforce pages presently always have the JavaScript library Prototype 1.6.0.3 automatically included. Other platform standard JavaScript such as RichFaces used by apex:tabPanel then rely on this library and the environment it creates such as a global function that has the name “$”.

So what happens when you also want to use jQuery in a Visualforce page? Generally, that is not a problem but only if as well as including jQuery you always execute the function jQuery.noConflict().

You’ll find plenty of posts talking about this, but the piece I didn’t understand is that jQuery caches the current value of “$” when you include it but only puts the cached value back in scope when you execute the jQuery.noConflict() function. So don’t put the jQuery.noConflict() inside conditional logic (or you will find yourself spending a couple of hours in Chrome’s JavaScript Console debugging as I did today).

Advertisements

One thought on “Executing jQuery.noConflict() mandatory when using jQuery in Visualforce

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s