jQuery’s $() vs. jQuery() and why you should use jQuery.noConflict();

I will keep this post short since it’s a fairly simple answer:

SharePoint uses the $() namespace in specific instances – one of these can be seen in the FAST Search Center and only in specific areas and page states.  When jQuery is called in the FAST Search center and jQuery.noConflict(); is not present, jQuery will mess with SharePoint’s $() and cause errors to pop up on the page.

The testing I did was a while back, so I don’t have a specific example or screenshots to share, but I know we spent hours troubleshooting until we found the culprit.

How it works

You add the line

jQuery.noConflict();

to the top of your JavaScript block.  Then you replace all occurences of $(…) with jQuery(…) in your code (like the example below).

Instead of:

$(document).ready(function() {
   $('#buttonElement').click(function() {
      alert('Button Clicked');
   });
});

Use:

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('#buttonElement').click(function() {
      alert('Button Clicked');
   });
});

You can read more about the function on jQuery’s site.

I hope you found this helpful 🙂