Risk of conflict between jQuery document ready and _spBodyOnLoadFunctionNames?

Question

I recently read in the jQuery documentation that:

The .ready() method is generally incompatible with the body onload attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

As it turns out, the onload attribute is commonly used in SharePoint, via _spBodyOnLoadFunctionNames.

I'd be interested to know if anybody has experienced such incompatibilities, and can confirm that there's actually a risk when using document.ready in the context of SharePoint.

Answer 1

I have some specific examples on my blog but to answer this in short - from my experience, you can use them interchangeably, but it depends heavily on what you are doing (and when you want events to happen). If you are deploying a control that is completely yours and you are not doing DOM manipulation or dynamic width/height adjustments, you should be able to use jQuery(document).ready(...) - however if you're interacting with third party or OOB functionality or manipulating the DOM, you should lean on _spBodyOnLoadFunctionNames instead.

If you want to read some detailed examples, please read my post and the detailed answer to this on my blog (link above) - but in short - _spBodyOnLoadFunctionNames runs after the DOM is loaded and rendered (usually after all assets, including images are done loading). jQuery(document)ready(...) runs as soon as the DOM is rendered (I ran into this and tested it when implementing a custom top-nav - with a 3rd party plugin loading images from another server).

Another note - always try to use jQuery.noConflict(); when working within SharePoint. In specific instances, jQuery doesn't interact well with SharePoint's $(...). You can read more about this on my blog (www.stephanrocks.com), and about jQuery.noConflict() on jQuery's site.

Hope this helps :) If you can be more specific about what you're doing, maybe I can help you decide which to use.

Have a great day everyone!

Stephan.

Answer 2

There is a difference in jQuery(document).ready() and jQuery(window).load(). The SharePoint _spBodyOnLoadFunctionNames is like jQuery(window).load(), not jQuery(document).ready().

In most cases all you need is jQuery(document).ready() which is fired when DOM is present. But sometimes, like when resizing pictures just DOM is not sufficient, you need to have loaded content.

To sum up, use jQuery(document).ready() if you want to change properties, add classes, hide, show elements. And use jQuery(window).load() (or _spBodyOnLoadFunctionNames) if you need to wait until resources (the whole window) are loaded.

Answer 3

Just as a matter of interest. It's not best practice in any way to interfere with the Sharepoint Event Load model as this might have unexpected behaviour. To this end, Sharepoint has made available a JS function which allows us to load scripts using the "supported" Sharepoint way. Herewith the sample :

    <script type="text/javascript">

    //Function below will insert your script into the correct location    
    ExecuteOrDelayUntilScriptLoaded(initializeScript, "sp.js");

    function initializeScript() {
     alert('Loaded');
    }

   </script>

Answer 4

http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

Answer 5

My question is why you would ever want to use both. Simply choose one and stick with it. IMO, if you have jQuery loaded, always use $(document).ready().

Answer 6

For what it's worth, my employer's MOSS 2007 standard master page uses $(document).ready() for several functions, and I use it all the time with custom master pages and the default master page without any conflicts.