_spBodyOnLoadFunctionNames in SharePoint (2013 & 2016) vs. jQuery’s document ready

Since SharePoint 2013, Microsoft seems to have embraced jQuery, and you can now happily use jQuery or $ as you please in the SharePoint environment.

Click here for the SharePoint 2010 version of this post.

As you know, JavaScript is global, so please always:

• be mindful that another plugin may have already called jQuery, so if you call it again, you may wipe out the jQuery object already in use, causing errors
• encapsulate your functions in a single, strongly typed variable
  (for example ContosoNewsFeedAggregator – it’s clear who’s it is, and what it does)
• use strongly typed variable names (reference this example)

That’s it really.  I have a number of ways I integrate my scripts to ensure everything runs smoothly, but all my examples at this point are very client and environment-specific.  I will share some of those once I’ve had a chance to fully bake them into a blog post.

New issues

There’s another problem with the advent of jQuery compatibility in SharePoint – I’ve seen many SharePoint woes relating to multiple third party plugins on a single page (or site), which all reference difference versions of jQuery, and all assigned to the $.

According to a post in StackOverflow, you can add multiple versions of jQuery on the same page:

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
    var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
    var jQuery_1_3_2 = $.noConflict(true);
</script>

So when evaluating jQuery and what to use, consider:

• specifying a single source of jQuery in the master page (consider 1.12.4 – it’s one of the more recent versions of v1, which is widely necessary for a lot of plugins to run)
• if you load jQuery on a single page, run a quick if statement to see if jQuery is already available, and if not, load your file dynamically vs. having a <script> tag in your code.

  if (window.jQuery) {
      // jQuery is loaded
  } else {
      // jQuery is not loaded
  }

• keeping in mind, that the $ is overwritten each time you load a new jQuery library.

A more complex code sample to check if jQuery is loaded, or load it if it’s not.  I split this in two, to separate the object from the jQuery loading logic so it’s a bit clearer:

if (myStronglyTypedObj === undefined) {
    var myStronglyTypedObj = {};
}

myStronglyTypedObj = {
    // Global variables for this object
    "g": {},
    // Pre-initialization functions ensure scripts SharePoint dependencies are loaded
    "preinit": function() {
        // Load necessary libraries
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
            myStronglyTypedObj.init();
        });
    },
    "init": function() {
        // do everything else
    }
}

Script load check:

// Set up script load checking variable
if (!myStronglyTypedObjCheckJSFilesLoading) {
    var myStronglyTypedObjCheckJSFilesLoading = false;
}

// Initiate the script loader
myStronglyTypedObjCheckJS();

// Script checker loop
function myStronglyTypedObjCheckJS() {
    // Check if jQuery exists
    if (window.jQuery) {
        // It exists, run my function on document ready
        $(document).ready(function() {
            myStronglyTypedObj.init();
        });
    } else {
        /* It doesn't exist, load it IF
    		Double-check it still does not exist
    		AND document exists (otherwise we can't append HTML)
    		AND document.body exists (otherwise we still can't append HTML)
    		AND our variable is still false (we set this to true after generating the script tag so if laod time is slow, we're not adding this tag to the document multiple times)
		*/
        if (!window.jQuery &&
            typeof document !== 'undefined' &&
            document.body !== null &&
            !myStronglyTypedObjCheckJSFilesLoading) {
            // Create jQuery JS script and try again
            var js = document.createElement("script");
            js.type = "text/javascript";
            js.src = "/Style Library/intelogy/js/jquery-3.1.1.min.js"; // this is where you store your version of jQuery - you can also call a CDN
            document.body.appendChild(js);
            myStronglyTypedObjCheckJSFilesLoading = true; // Set this to true so this code block won't run again
        }
        // Now set a timeout of 100ms, to rerun this function, which will keep checking if jQuery exists, and once it does, init your script
        setTimeout(function() {
            myStronglyTypedObjCheckJS();
        }, 100);
        console.log("JS libraries not loaded yet, attempting again.");
    }
}