jQuery.noConflict()

0 , Permalink

I’ve spent a good chunk of time trying to get some simple Javascript form validation to work on a WordPress (WP) site I’ve been tasked to work on. I ensured that I included the js file in my header. I did not bother to include the jQuery library as I noticed it was already included. My form element ids matched up with the id names used in my js. Basically, I did everything right. I could not understand why it was not recognizing any of the jQuery code.

After extensive head banging, researching and searching through existing WP files, something finally presented itself. I had overlooked it earlier in the day, but lesson learned – I should have looked that one up immediately – jQuery’s noConflict function. It appeared in the js file being called right before my file and the first line read: $j = jQuery.noConflict();

Basically what this function does is it removes the ability to use the $ variable. In jQuery, the $ is an alias for jQuery. So for example, instead of writing jQuery('p'), you could use the shortcut and write $('p). But if noConflict() is called, you have to revert back to the long-hand. I had written my code using the alias.

Lesson learned? Look up everything as you come across it, especially when you’re still new to the language. This would have saved me hours, but at least I will never forget what to do when I run into the noConflict function. Alternatively, Nelson thinks that if I had called my file before the file calling noConflict, my code probably would have worked.

Comments are closed.