Best Practices: jQuery for SharePoint development

Rule 1

Set jQuery in no conflict state

This requires you to use jQuery instead of $
For example, write
jQuery("elementId").text("hello");
instead of
$("elementId").text("hello");


Rule 2

Use SharePoint's _spBodyOnLoadFunctionNames array instead of jQuery’s document ready function

SharePoint uses its own body onload function called _spBodyOnLoadFunctionNames which will collide with your document ready (run before or after).  If you are loading your JavaScript files through the elements.xml file (through a feature in Visual Studio), this can be particularly problematic with the order of how things load.


Instead, create a function with a custom name, and push the custom name into the _spBodyOnLoadFunctionNames array.  It’s wonderful and allows things to load in their proper order.

For example, write
_spBodyOnLoadFunctionNames.push("myCustomFunctionName");
function myCustomFunctionName() {
     // My custom functionality
}
instead of
$(document).ready(function() {
     // My custom functionality
});