How to use jquery promise in JSOM

Question

I have code like this (Default.aspx):

<asp:Label id="LabelA" runat="server" Text="0"></asp:Label> 
<script type="text/javascript"> 
document.getElementById('LabelA').innerHTML = getVerificheCount('ListTitle','StatusNotOk'); 
</script>

Code in App.js:

var verificheList;
var ctx = SP.ClientContext.get_current();
var hostWebURL = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var verbaleList;
var statoVerifica;
var listTitle = '';
var countItems;

function getVerificheCount(title, stato) {
    statoVerifica = stato;
    listTitle = title;
    var hostWebContext = new SP.AppContextSite(ctx, hostWebURL);
    verbaleList = hostWebContext.get_web().get_lists().getByTitle(listTitle);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Eq>' +
        '<FieldRef Name=\'Verifica\'/><Value Type=\'Choice\'>' + stato + '</Value>' +
        '</Eq></Where></Query></View>');
    verificheList = verbaleList.getItems(camlQuery);
    ctx.load(verificheList);
    ctx.executeQueryAsync(function() {
        countItems = verificheList.get_count();
    }, onGetverificheListFail);
    return countItems;
}

I'd like to use jquery promise, but where should I insert it?

Answer 1

You don't necessarily need to use a promise here, just don't try to set the value of the HTML element until after you get your result.

So in your default.aspx:

<asp:Label id="LabelA" runat="server" Text="0"></asp:Label> 
<script type="text/javascript">
// just kick off the asynchronous call
getVerificheCount('ListTitle','StatusNotOk'); 
</script>

And in your App.js:

ctx.executeQueryAsync(function() {
    // now that you have your result, go ahead and set the value of the label
    document.getElementById('LabelA').innerHTML = verificheList.get_count();
}, onGetverificheListFail);
// now you also don't need to return anything from this function
// return countItems;

One thing to watch out for - it's been a while since I've done stuff like this, but if I recall correctly, if you set your label to runat="server", the server is going to rewrite the id, so your document.getElementById('LabelA') might not work... right? Can anyone else confirm or deny what I'm saying about the ID rewriting?

Answer 2

Here's an example of how to wrap a JSOM call in a jQuery promise. You should be able to modify the code above to use the same calling pattern.

function getListsCsomJquery(rowLimit) {
    var dfd = jQuery.Deferred();

    var context = SP.ClientContext.get_current();
    var web = context.get_web();
    var lists = web.get_lists();
    var listsArray = context.loadQuery(lists);
    context.executeQueryAsync(success, fail);

    function success() {
        dfd.resolve(listsArray.slice(0, rowLimit));
    }

    function fail(sender, args) {
        dfd.reject({ responseText: args.get_message() });
    }

    return dfd.promise();
}

function jqueryCsomButtonClick() {
    var message = container.find("#message");

    var call = getListsCsomJquery(10);
    call.done(function (data) {
        message.text("Lists:");
        data.forEach(function (list) {
            message.append("<br/>");
            message.append(list.get_title());
        });
    });
    call.fail(function (errorObject) {
        message.text(errorObject.responseText);
    });

    message.text("Waiting for result...");
}