wait-until-jquery-library-has-loaded-before-executing-external-javascript-files

http://stackoverflow.com/questions/7486309/how-to-make-script-execution-wait-until-jquery-is-loaded

SP.js not load on Sharepoint Pages

Posted on December 20, 2013 by ctrlzet

There is an issue I found when working on Sharepoint 2013. I got “SP.js” error right after published the page and cause some feature disable, such as ribbon and other scripts can not be executed. It seems that SP.js does not load properly for publishing page and anonymous users. Some articles said that sharepoint loads certain javascript files when it needs, after published the page, ribbon will close and several javasripts were unload automatically.

Actually Sharepoint provides some methods to call scripts for many conditions. So we could choose wisely among them to solved our problem. Take a look :

1) Script on Demand.

function sharePointReady(){

    // call this code after load SP.js

}

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

2) Delay until SP.js loaded.

function stuffToRun(){

   // code

}

ExecuteOrDelayUntilScriptLoaded(stuffToRun, "sp.js")

The different between 1 and 2:

SP.SOD.executeFunc(key, functionName, fn) method ensures that the specified file (key) that contains the specified function (functionName) is loaded and then runs the specified callback function (fn). Use case for “SP.SOD.executeFunc” can be that at some point you wish a JavaScript library like JQuery be loaded before you call a function defined inside it via callback function.

SP.SOD.executeOrDelayUntilScriptLoaded(func, depScriptFileName) method executes the specified function (func) if the file (depScriptFileName) containing it is loaded; otherwise, adds it to the pending job queue.

3) Load after other stuff finished.

function runAfterEverythingElse(){

    // code

}

_spBodyOnLoadFunctionNames.push("runAfterEverythingElse");

from many articles

About these ads

When to Load my SharePoint ECMA Script?

Posted: April 3, 2012 | Author: Sean Panter | Filed under: Uncategorized |Leave a comment

Undoubtedly, you have written an ECMA script before and found that it won’t execute until the page or a script has finished loading. To get around this, you’ve probably had to add a delay before executing your script. Here are some of the most common methods:

Javascipt’s SetTimeout function
SharePoint’s ExecuteOrDelayUntilScriptLoaded function
SharePoint’s _spBodyOnLoadFunctionNames.push function

I wouldn’t recommend using a timeout. Depending on the connection speed, changing content, or other variables, the page load time isn’t easy to rely on. I would focus on one of the other choices listed below.

ExecuteOrDelayUntilScriptLoaded

I use this example if I know that my SharePoint client script depends on another SharePoint library (or libraries) before my script can execute successfully. Click Here to read another post I wrote on finding the order that SharePoint scripts are loading on your page.

Remember: if you are writing scripts that depend on other scripts that you don’t have control over loading, wait until the script you depend on has loaded.
ExecuteOrDelayUntilScriptLoaded(checkJQuery, 'SP.UI.MyLinksRibbon.js');

_spBodyOnLoadFunctionNames.push

Use this method If you aren’t making SharePoint client API calls, and you need to wait until the page body is loaded before you start executing a JQuery script or otherwise manipulating the DOM. But remember: if you are dependent on another SharePoint script, think twice and use theExecuteOrDelayUntilScriptLoaded method to get your script running!

_spBodyOnLoadFunctionNames.push("getListItems");
function getListItems() {
...
}

<body> 

function loadJQuery(){

var waitForLoad = function () {
    if (typeof jQuery != "undefined") {
    console.log("jquery loaded first..");
    // invoke any methods defined in your JS files to begin execution       
    } else {
    console.log("jquery not loaded..");
    window.setTimeout(waitForLoad, 500);
    }
 };
 window.setTimeout(waitForLoad, 500);   
}

window.onload = loadJQuery;

</body>

Late to the party, and similar to Briguy37's question, but for future reference I use the following method and pass in the functions I want to defer until jQuery is loaded:

function defer(method) {
    if (window.$)
        method();
    else
        setTimeout(function() { defer(method) }, 50);
}

It will recursively call the defer method every 50ms until window.$ exists at which time it exits and calls method()

An example with an anonymous function:

defer(function () {
    alert("jQuery is now loaded");
});


Use:
$(document).ready(function() {
    // put all your jQuery goodness in here.
});

Check out this for more info: http://www.learningjquery.com/2006/09/introducing-document-ready

Note: This should work as long as the script import for your JQuery library is above this call.

Update:

If for some reason your code is not loading synchronously (which I have never run into, but apparently may be possible from the comment below should not happen), you could code it like the following.
function yourFunctionToRun(){
    //Your JQuery goodness here
}

function runYourFunctionWhenJQueryIsLoaded() {
    if (window.$){
        //possibly some other JQuery checks to make sure that everything is loaded here

        yourFunctionToRun();
    } else {
        setTimeout(runYourFunctionWhenJQueryIsLoaded, 50);
    }
}

runYourFunctionWhenJQueryIsLoaded();

Important Links

Wednesday, January 21, 2015

Delay the javascript function till jquery loaded