sp.clientcontext is not a constructor Uncaught TypeError in SharePoint online JavaScript object model

sp.clientcontext is not a constructor
InfoPath alternatives for form designing SharePoint

While working in JavaScript object model (jsom) in SharePoint online site, I got an error which says: sp.clientcontext is not a constructor. When we do F12 in the browser, the details error coming as:

Uncaught TypeError: SP.ClientContext is not a constructor at method name like this.

sp.clientcontext is not a constructor
sp.clientcontext is not a constructor

sp.clientcontext is not a constructor

If you are working in client object model in SharePoint online, we need to remember that to work with JavaScript Object model we have to use SP.js file which is located in the LAYOUTS folder.

Microsoft provides SP.ClientContext constructor which is presented in SP.js. This constructor initializes a new instance of the ClientContext object for the specified SharePoint site.

Here I was using the below code to retrieve the lists and libraries available in the site using javascript object model.

<div id=”divGetListData”></div>

<script>

$(function () {

getListData();

});

function getListData() {

var clientContext = new SP.ClientContext();

var oWebsite = clientContext.get_web();

this.collList = oWebsite.get_lists();

clientContext.load(collList);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded),

Function.createDelegate(this, this.onQueryFailed)

);

}

function onQuerySucceeded() {

var listInfo = ”;

var listEnumerator = collList.getEnumerator();

while (listEnumerator.moveNext()) {

var oList = listEnumerator.get_current();

listInfo += ‘Title: ‘ + oList.get_title() + ‘ – Created: ‘ +

oList.get_created().toString() + ‘<br />’;

}

$(“#divGetListData”).html(listInfo);

}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() +

‘\n’ + args.get_stackTrace());

}

</script>

Solution:
In the above code it was not displaying the lists instead it was given the error as sp.clientcontext is not a constructor. If SP.ClientContext() executes before SP.js loaded in the page then the error will come. So we need to modify the code so that the getListData() method will call after SP.js loaded successfully.

We can use ExecuteOrDelayUntilScriptLoaded method which will call the method after sp.js filed loaded in the page.

<div id=”divGetListData”></div>

<script>

$(function () {

ExecuteOrDelayUntilScriptLoaded(getListData, “sp.js”);

});

function getListData() {

var clientContext = new SP.ClientContext();

var oWebsite = clientContext.get_web();

this.collList = oWebsite.get_lists();

clientContext.load(collList);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded),

Function.createDelegate(this, this.onQueryFailed)

);

}

function onQuerySucceeded() {

var listInfo = ”;

var listEnumerator = collList.getEnumerator();

while (listEnumerator.moveNext()) {

var oList = listEnumerator.get_current();

listInfo += ‘Title: ‘ + oList.get_title() + ‘ – Created: ‘ +

oList.get_created().toString() + ‘<br />’;

}

$(“#divGetListData”).html(listInfo);

}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() +

‘\n’ + args.get_stackTrace());

}

</script>

You can also read some SharePoint jsom tutorials below:
– Retrieve site workflow id using JavaScript Object model in SharePoint Online

– Delete all items from SharePoint online list using JavaScript object model

– Remove items from the Site Actions menu using JavaScript object model in SharePoint Online Office 365

After this, the error did not come and it properly displays me the lists and libraries.

Similar SharePoint 2013 Tutorials

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →

Leave a Reply