SP.js loading issue while retrieving list items using JSOM

Question

Hi I am trying to retrieve list items using JSOM. But, the problem occurring is that SP.js is not loading correctly. It shoul load before the function gets executed. I am confused about where to use ExecuteOrDelayUntilScriptLoaded and SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function). I am not getting where to use these functions in my javascript code. Please help me out to resolve this issue. Getting some errors as well: 1."https://*****.sharepoint.com/sites/NewWorkSite/_vti_bin/client.svc/ProcessQuery 403" 2."Uncaught TypeError: Cannot read property 'requestUnexpectedResponseWithStatus' of undefined"

$(document).ready(function() 
{ ExecuteOrDelayUntilScriptLoaded(retriveListItem, "sp.js"); 
});


function retriveListItem()  
{      
    var siteUrl = '/sites/NewWorkSite';
    var context = new SP.ClientContext(siteUrl);  
    var list = context.get_web().get_lists().getByTitle('Questions1List');  
    var caml = new SP.CamlQuery();  
    caml.set_viewXml("<View><Query><OrderBy><FieldRef Name='QuestionNumber' Ascending='TRUE' /></OrderBy></Query></View>");  
    returnedItems = list.getItems(caml);  
    context.load(returnedItems);  
    context.executeQueryAsync(onSucceededCallback, onFailedCallback);  
}  

function onSucceededCallback(sender, args)  
{  
    var enumerator = returnedItems.getEnumerator();  
    //Formulate HTML from the list items   
    var MainResult = 'Items in the Divisions list: <br><br>';  
    //Loop through all the items   
    while (enumerator.moveNext())  
    {  


        var listItem = enumerator.get_current();  
        var qNo= listItem.get_item("QuestionNumber");   
        var qst = listItem.get_item("Question");   
        var optionA = listItem.get_item("OptionA");         
        var optionB = listItem.get_item("OptionB");
        var optionC = listItem.get_item("OptionC");
        var optionD = listItem.get_item("OptionD");



                $('#qDiv').append("<label>" + qNo+ "." + "</label>&nbsp" + "<label id='qts'>" + qst + "</label>" + "</br>" 
                + "<label>A: </label>&nbsp" + "<input id='one' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'A'/>&nbsp" + optionA  + "&nbsp</br>"
                + "<label>B: </label>&nbsp" + "<input id='two' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'B'/>&nbsp" + optionB + "</br>"
                + "<label>C: </label>&nbsp" + "<input id='three' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'C'/>&nbsp" + optionC + "</br>"
                + "<label>D: </label>&nbsp" + "<input id='four' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'D'/>&nbsp" + optionD + "</br>" + "</br>");



    }  


}  
        //This function fires when the query fails   
function onFailedCallback(sender, args)  
{  
        //Formulate HTML to display details of the error   
        var markup = '<p>The request failed: <br>';  
        markup1 = 'Message: ' + args.get_message() + '<br>';  
        //Display the details   
        alert(markup1);
} 

retriveListItem();

Answer 1

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
    SP.SOD.registerSod("Your javascript file name i.e xye.js", "Your js file path i.e /Style Library/xyz.js");
    SP.SOD.executeFunc("Your javascript file name i.e xye.js", null, null);
    ExecuteOrDelayUntilScriptLoaded(function () {
        //Your function to execute
       //In your case  
        retriveListItem();
    },"Your javascript file name i.e xye.js");
    SP.SOD.notifyEventAndExecuteWaitingJobs("Your javascript file name i.e xye.js");
});