Error from javascript file but not console?

Question

The error in question

Uncaught Error: The property or field has not been initialized.
It has not been requested or the request has not been executed.
It may need to be explicitly requested.

Here is the code, just trying to get a simple count of a list.

var CustomAction = function(){
    var clientContext = new SP.ClientContext.get_current();
    var web = clientContext.get_web(); 
    this.oList = web.get_lists().getByTitle("Classification");

    // .load() tells CSOM to load the properties of this object
    // multiple .load()s can be stacked
    clientContext.load(oList);

    // now start the asynchronous call and perform all commands
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));

    // method will exit here and onSuccess or OnFail will be called asynchronously
};

function onSuccess(sender, args) {
    alert('No of rows: ' + oList.get_itemCount());
};

function onFail(sender, args) {
    alert('Request failed.\n' + args.get_message() + '\n' + args.get_stackTrace());
};

The error occurs at oList.get_itemCount(). What reason would there be for this to be happening? I tried using $( document).ready and $(window).onload but the problem still occurs.

So like I said, it works when I copy/paste that into the browser but running it from file it doesn't.

Answer 1

You have some scoping problems...

When you say clientContext.load(oList);

The oList that you're referring to is different than the variable you set above using the 'this' keyword.

Either use this.oList throughout every call (this will work on the success and fail methods because of Function.createDelegate) or change the first this.oList to var oList = ... -- which will also still work in the success and fail methods because of Function.createDelegate

Here is my attempt at a fairly straight-forward re-factor:

    // note: I changed the function name -- js convention is Proper case for Constructors only
var customAction = function() {
        var clientContext = SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var oList = web.get_lists().getByTitle("Classification");

        // .load() tells CSOM to load the properties of this object
        // multiple .load()s can be stacked
        clientContext.load(oList);

        // now start the asynchronous call and perform all commands
        clientContext.executeQueryAsync(onSuccess, onFail);

        function onSuccess(sender, args) {
            alert('No of rows: ' + oList.get_itemCount());
        }

        function onFail(sender, args) {
            alert('Request failed.\n' + args.get_message() + '\n' + args.get_stackTrace());
        }
    };

The handlers are defined inside of the calling function, which allows you to forego mucking around with 'createDelegate' or 'this'

Answer 2

Try this

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

Answer 3

To do this with REST, you can do the following:

var CustomAction = function(){
    var oDataUrl = hostUrl + "/_api/Web/Lists/GetByTitle('Classification')/ItemCount";
    $.ajax({
        url: oDataUrl,
        type: 'GET',
        headers: {
            accept: 'application/json;odata=nometadata',
            content-type: 'application/json;odata=nometadata'
        },
        success: onSuccess,
        error: onFail
    });

    function onSuccess(data) {
        alert('No of rows: ' + data.value);
    }

    function onFail(data, errCode, errMessage) {
        alert('Request failed.\n' +  errMessage);
    }
};