"The collection has not been initialized. It has not been requested ..." in SharePoint 2010 ECMAScript Client Object Model.

This is a common error which you will see while working with ECMAScript Object Model of SharePoint 2010. There could be multiple reasons behind this issue as discussed below:

Cause 1:
Error occurs when you try to access properties of an object which has not been initialized.
Let's understand it through an example (excluding script start and end tags).

var currentUser;
var uLogin;
var uTitle;
var ctx;

function LoadUserDetails() {
//Get Context
ctx = new SP.ClientContext.get_current();

//Get logged in user
currentUser = ctx.get_web().get_currentUser();

ctx.load(currentUser);
ctx.executeQueryAsync(queryTrackerList, failure);
}

function  AccessUserDetails() {
//Get user login name
uLogin = currentUser.get_loginName();
    
//Get User title
uTitle = currentUser.get_title();
    
        alert('Current user login name : ' + uLogin);

        alert('Current user display name : ' + uTitle);


Here, I am displaying current logged user details : Login Name and Display Name.

currentUser = ctx.get_web().get_currentUser();

Above code line returns an SP.User object which is uninitialized (does not contain any property value) until a call to executeQueryAsync method.

So if we call user object properties (get_loginName and get_title) in first method ' LoadUserDetails ', it will return us an error i.e. "The collection has not been initialized. It has not been requested ...".


Solution:
Alway access object properties only after it has been initialized. As, accessing SP.User properties in second method ' AccessUserDetails' will work without any problem as executeQueryAsync method has been called so object has been initialized and contains properties values.



Cause 2:
Let's say you have more than one functionalities on the same page which are interacting with SharePoint list/s to read/update/delete items.

JS file1:


$(window).load(function(){

    ExecuteOrDelayUntilScriptLoaded(function(){func1();}, "sp.js");

});

function func1()
{
       //Doing something...
}



JS file2:


$(window).load(function(){

     ExecuteOrDelayUntilScriptLoaded(function(){func2();}, "sp.js");

});

function func2()
{
       //Doing something...
}



As you can see, on page load two different functions are executing which are calling "ExecuteOrDelayUntilScriptLoaded" function. This would also result in the same error.

Solution : 
If possible, try to do both functionalities with single JS file as given below...


$(window).load(function(){

     ExecuteOrDelayUntilScriptLoaded(function(){func1();}, "sp.js");

});

function func1()
{
       //Doing something...
       ctx.executeQueryAsync(func2, func2);  //func2 will be called on success or failure both
}