Sharepoint Javascript failing on page load

Question

I am trying to get a list of schools to put in the option of a select element. I would like the dropdown options to be added when the page loads but I am not doing something correct. The below code works if a directly call it with a button element but it does not work on page load.

The error I get is "Object doesn't support this action" on the line var clientContext = new SP.ClientContext(siteUrl);

var siteUrl= '/learning/schools';

window.load = init();

    function init(){

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

function retrieveListItems() {

    var clientContext = new SP.ClientContext(siteUrl);

    var oList = clientContext.get_web().get_lists().getByTitle('Schools');

    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');

    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded), 
            Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();

    var schoolCodes = document.getElementById('classSchoolList');

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var schoolOption = document.createElement('option');
        schoolOption.value = oListItem.get_item('Title');
        schoolOption.text = oListItem.get_item('Title') + " : " + oListItem.get_item('School');
        schoolCodes.add(schoolOption);
    }


}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}

Answer 1

Could you try

//load the sp.js script and execute the init method
//no guarantee sp.js will be fully loaded before init() runs.
SP.SOD.executeFunc('sp.js', init());

function init(){
    //ensure script is fully loaded, then execute retrieveListItems()
    ExecuteOrDelayUntilScriptLoaded(retrieveListItems(), 'sp.js');
}

Or alternatively,

SP.SOD.executeFunc('sp.js', null, function(){
    ExecuteOrDelayUntilScriptLoaded(retrieveListItems(), 'sp.js');
});

ExecuteOrDelayUntilScriptLoaded will wait for the 'sp.js' file to finish loading before calling retrieveListItems() . But if 'sp.js' hasn't been requested, it will wait forever. That's why we call executeFunc first to request 'sp.js'. Yet, it doesn't make any guarantees that it's loaded before moving on. It simply adds it to the stack of scripts that need to be loaded and then runs the callback.