Counting listitems multiple times with javascript

Question

I'm using JS to get the number of (filtered) listitems to show on a dashboard. My functions work well when I call them once but I need to call them multiple times. Only the last call is processed. What am I doing wrong here?

ExecuteOrDelayUntilScriptLoaded(SetNumbers, "sp.js");
var clientContext = null;
var web = null;

function SetNumbers(){
CountProjecten("Project","#pbabbm",12);
CountProjecten("Project","#pbabne",14);
CountProjecten("Project","#pbabta",13);
CountProjecten("Project","#pbabti",15);
CountProjecten("Project","#pbabsw",21);
CountProjecten("Project","#pbabsbew",20);
CountProjecten("Project","#pbabblt",19);
CountProjecten("Project","#pbaknmct",1);
CountProjecten("Project","#pbakdevine",2);
CountProjecten("Project","#pbakom",9);
CountProjecten("Project","#pbakjrn",18);
CountProjecten("Project","#pbakcm",10);
CountProjecten("Project","#pbaktrm",7);
}


function CountProjecten(listName, divId, opleidingId)
{

clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();        
var list = web.get_lists().getByTitle(listName);        
var camlQuery = new SP.CamlQuery();        
var q = "<View><Query><Where><And><Eq><FieldRef Name='Status' LookupId='True' /><Value Type='Lookup'>3</Value></Eq><Eq><FieldRef Name='Opleiding' LookupId='True' /><Value Type='LookupMulti'>" + opleidingId + "</Value></Eq></And></Where></Query></View>";
camlQuery.set_viewXml(q);
this.listItems = list.getItems(camlQuery);
this.divId=divId;
clientContext.load(listItems, 'Include(Id)');    
clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), Function.createDelegate(this, this.onQueryFailed));  

}



function onListItemsLoadSuccess(sender, args) {
var count = 0;
count=this.listItems.get_count();
$(this.divId).text(count);
}

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

Answer 1

All your requests are processed correctly, but the callback onListItemsLoadSuccess is overwritten, especially this.listItems and this.divId and runs only with the last result. So the problem is this line:

$(this.divId).text(count);

this.divId is everytime overwritten and is the last divId which is "#pbaktrm" in your case. this is appended to the Window object in this case and makes your variables global and they are overwritten every time you change them.

So to quickly solve your problem you can keep divId and listItems inside the function CountProjecten and use an anonymous function as success callback:

function CountProjecten(listName, divId, opleidingId) {

    clientContext = SP.ClientContext.get_current();
    web = clientContext.get_web();
    var list = web.get_lists().getByTitle(listName);
    var camlQuery = new SP.CamlQuery();
    var q = "OMMITTED FOR BREVITY"; 
    camlQuery.set_viewXml(q);
    var listItems = list.getItems(camlQuery);
    clientContext.load(listItems, 'Include(Id)');
    clientContext.executeQueryAsync(function () {
        var count = 0;
        count = listItems.get_count();
        $(divId).text(count);
    }, Function.createDelegate(this, this.onQueryFailed));

}

But in your code there is another improvement that can be made: You don't have to call the server 13 (!) times. It can slow down your users' web browsers. What you can do is to load all your items and then run clientContext.executeQueryAsync.

Answer 2

From what I see, each call is overwriting the previous one because inside CountProjecten you are defining clientContext and web as global variables. Instead, try:

var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();