SharePoint Online JavaScript only runs in edit mode

Question

I am trying to run the code below but the success and fail handlers only work in edit mode. I am getting the first alert just fine outside of the edit mode. I am already using executeFunc to load sp.js before running my functions. MDS is also disabled on this site. Any ideas as to how I can fix this?

<script language='javascript' type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script language='javascript' type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>

<script>

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
    var siteUrl = 'https://MySite.sharepoint.com/TestSite';


function retrieveListItems() {
    alert("Getting List");
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Updates');
    var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="Created" Ascending="FALSE"/></OrderBy></Query><RowLimit>1</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 listItemName = '';
var listItemTD = '';
var LineCounter = 1;
var NameLine = "Name"+LineCounter;
var TDLine = "TD"+LineCounter;

    var listItemEnumerator = collListItem.getEnumerator();
        var counter = 0;
    while (counter < 3 && listItemEnumerator.moveNext()) {

        NameLine = "Name"+LineCounter;
        TDLine = "TD"+LineCounter;
        counter++;
        var oListItem = listItemEnumerator.get_current();
        listItemName = oListItem.get_item('Title');
        listItemTD = oListItem.get_item('Target_Date');
        document.getElementById(NameLine).innerHTML += listItemName;
        document.getElementById(TDLine).innerHTML += listItemTD;
        LineCounter++
        alert(counter.toString()+"Items Listed");

    }


}

}
function onQueryFailed(sender, args) {
    alert("Failed");
}
</script> 

Answer 1

I was able to resolve this issue by adding the below code at the top of my page.

<script src="/_layouts/15/SP.Runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/SP.js" type="text/javascript"></script>
<script src="/_layouts/15/SP.publishing.js" type="text/javascript"></script>