Issues with loading jQuery libraries within O365 SharePoint WebPart

Question

We have a webpart that relies heavily on jQuery to grab data from our SharePoint lists and render them on a page. This webpart includes links to three additional libraries that contain functions and code that are called within the webpart.

I am noticing some odd behavior when it comes to jQuery firing within our SharePoint page. In some instances, jQuery loads just fine and the page renders correctly. Other times, the page errors out and it appears that code is being executed out-of-order, as the browser console tells me that certain functions are not valid.

As a simple test, I added this code to the page:

$( document ).ready(function() {
alert('Hello World!');
}); 

Upon reloading the page, periodically I receive this error:

Uncaught ReferenceError: $ is not defined - which leads me to believe that jQuery isn't loading correctly.

Other times, the page loads and alert fires, however, I receive errors like this:

$(...).prettyPhoto is not a function - but I can see that our prettyPhoto library has loaded.

Any thoughts or suggestions on where to start looking?

Answer 1

// wait until jquery load is complete

function waituntilJqueryLoad() 
{

    if (window.$)
        isLoaded();
    else
        setTimeout(function () { waituntilJqueryLoad() }, 50);
}

// Execute Script when DOM is ready

function isLoaded() 
{
$(document).ready(function () 
{

        //write your code here

    });

_spBodyOnLoadFunctionNames.push("waituntilJqueryLoad");

Answer 2

I too am thinking it's an issue with the order in which events are occurring on your page.

Without seeing your code structure it's only possible to hypothesise, but I'd be looking for things like ensuring the DOM element being used by the prettyPhoto method is actually on the page before you reference it.

Also, if, as it sounds, you are making calls to SharePoint lists for your data, is that call being completed before you attempt to use the results to render the page? If there's no data returned when you attempt to render your results, this may cause DOM elements you expect to see, to not be present when you expect, even if the results are eventually returned.

There could well be a few separate issues that you will need to step through.

Answer 3

The usage of "$.Deferred()" has worked well for me when using Content Editor Web part or Script Editor web part

_spBodyOnLoadFunctionNames.push("Init");

function Init() {
    Func().done(function() {

    });
}

function Func() { 

    var dfd = $.Deferred();         

        $.ajax({
            url:refurl,
            method: "GET",
            headers: {
                    "Accept": "application/json;odata=verbose"
                    },
            success: onQuerySucceeded,
            error: onQueryFailed
            });

    function onQuerySucceeded(data) {

    }); 


        $("#divGetListData").html(listItemInfo);
    }

    function onQueryFailed() {
        alert('Error!');
    }

    return dfd;
}