Javascript execution delay until sp.js and ps.js loads

Question

I am trying to get project list from my project portal using JavaScript. I wrote a script that should do the job:

var projects;

// Geting JS library responsible for Project API 
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "/_layouts/15/sp.js";
jQuery("body").append(script);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "/_layouts/15/ps.js";
jQuery("body").append(script);

console.log('SP.SOD.loadMultiple(["sp.js", "ps.js"], callback); is executed.');
SP.SOD.loadMultiple(['sp.js', 'ps.js'], function(){
    console.log('sp.js and ps.js was loaded succesfully.');

    projContext = PS.ProjectContext.get_current();
    projects = projContext.get_projects();
    projContext.load(projects, 'Include(Name, Description, StartDate, Id)');

    projContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
});

function onQuerySucceeded () {
    console.log('Callback onQuerySucceeded in LoadProjectsProperties was fired.');

    var enumerator = projects.getEnumerator();
    while (enumerator.moveNext()) {
        var project = enumerator.get_current();
        console.log(project.get_name());
    }
}

function onQueryFailed () {
    console.log('Callback onQueryFailed in LoadProjectsProperties was fired.');
}

In console it shows

'SP.SOD.loadMultiple(["sp.js", "ps.js"], callback); is executed.'

unreachable code after return statement[Learn More] (on sp.ribbon.js)
TypeError: this.$D_2 (on cui.js)

and this message:

'sp.js and ps.js was loaded succesfully.'

is never displayed which means that callback for loadMultiple functions is never running. Everything is enclosed in jQuery ready function and jQuery no conflict mode.

Does anyone had similar problem? What is a solution to load both scripts before running a script?

Answer 1

Try it as below:

SP.SOD.executeFunc('sp.js', 'SP.Utilities.Utility.getLayoutsPageUrl', loadMyProjectFiles);

function loadMyProjectFiles(){

    // Getting JS library responsible for Project API 
    SP.SOD.registerSod('SP.ClientContext', SP.Utilities.Utility.getLayoutsPageUrl('sp.js'));
    SP.SOD.registerSod('PS.ProjectContext', SP.Utilities.Utility.getLayoutsPageUrl('ps.js'));
    SP.SOD.loadMultiple(['SP.ClientContext', 'PS.ProjectContext'], function(){

        console.log('sp.js has been loaded..');
        console.log('ps.js has been loaded..');
        console.log('sp.js and ps.js was loaded succesfully.');

        projContext = PS.ProjectContext.get_current();
        projects = projContext.get_projects();
        projContext.load(projects, 'Include(Name, Description, StartDate, Id)');

        projContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);

    });
}


function onQuerySucceeded () {
    console.log('Callback onQuerySucceeded in LoadProjectsProperties was fired.');

    var enumerator = projects.getEnumerator();
    while (enumerator.moveNext()) {
        var project = enumerator.get_current();
        console.log(project.get_name());
    }
}

function onQueryFailed () {
    console.log('Callback onQueryFailed in LoadProjectsProperties was fired.');
}