Call executeQueryAsync method second time gives first time result

Question

In the code I tried to get the data from 2 different lists. Input of the second query will be done after executing first list.

$(document).ready(function () {
    $("#SearchButton").click(function () {
        ExecuteOrDelayUntilScriptLoaded(function getData() {
            var ctx = SP.ClientContext.get_current();
            var SearchItem = document.getElementById('item').value;

            var oList = ctx.get_web().get_lists().getByTitle('All Dictionary items');

            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml('<view><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>' + SearchItem + '</Value></Eq></Where>' +
                '</Query><RowLimit>10</RowLimit>' +
                '</view>');

            this.collListItem = oList.getItems(camlQuery);

            ctx.load(this.collListItem, 'Include(Title, Id,SL,Description,Type1)');
            ctx.executeQueryAsync(

            function (sender, args) {
                var listItemEnumerator = collListItem.getEnumerator();
                while (listItemEnumerator.moveNext()) {
                    var oListItem = listItemEnumerator.get_current();
                    listItemInfoID = oListItem.get_item('SL').toString();
                    listItemInfo = oListItem.get_item('Type1').toString() + '  ' + oListItem.get_item('SL').toString(); //for searching next list

                    itemDescription = oListItem.get_item('Description').toString();
                }
                var desp = itemDescription.toString();
                var despCorrection = desp.replace("</font>", " ");
                despCorrection = despCorrection.substring(35);
                document.getElementById('Descriptions').value = despCorrection;
                document.getElementById('SearchedItem').value = listItemInfo.toString();
                alert('here' + listItemInfoID);

            },

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


        }, "sp.js");

        alert('start new');
        var ContextForRelatedItem = SP.ClientContext.get_current();
        var oListForRelationItem = ContextForRelatedItem.get_web().get_lists().getByTitle('RelationWithIds');
        var camlQueryForRelatedItem = new SP.CamlQuery();
        camlQueryForRelatedItem.set_viewXml('<view><Query><Where><Eq><FieldRef Name=\'Word_SL_No\'/><Value Type=\'Number\'>' + listItemInfoID + '</Value></Eq></Where>' +
            '</Query><RowLimit>10</RowLimit>' +
            '</view>');
        alert('after query');
        this.collListItemForRelationItem = oListForRelationItem.getItems(camlQueryForRelatedItem);
        ContextForRelatedItem.load(this.collListItemForRelationItem, 'Include(Title, Id,Linked_To,Relation_No)');
        alert('after load');
        ContextForRelatedItem.executeQueryAsync(function (sender, args) {
            alert('in execute');
            var listItemEnumerator2 = collListItem.getEnumerator();
            document.getElementById('relation1item').value = '';
            document.getElementById('relation2item').value = '';
            while (listItemEnumerator2.moveNext()) {
                var oListItemForRelation = listItemEnumerator2.get_current();
                alert('in while');
                listItemInfoForRelationItem = oListItemForRelation.get_item('Relation_No').toString(); //This alert is not getting triggered.
                alert('in here jyfkufkuyfbjh' + listItemInfoForRelationItem.toString() + 'here');
                relatedItems = oListItemForRelation.get_item('Linked_To');
            }
            alert('values are' + '\n' + relatedItems.toString());
            alert('fine');
        },function (sender, args) { 
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
        }); 
    }); 
});

Alerts are getting triggered before oListItemForRelation.get_item('Relation_No').toString(). If I put oListItemForRelation.get_item('Description').toString() then the alert gets triggered and the value of previous list returned.

Please help. Please advise me if the approach is wrong. I have to pass a value from one column of a list to another list.

Answer 1

Working with JavaScript, Ajax and the JSOM involves a lot of async calls and call-backs. What you are doing right now is that you are firing the first query and without waiting for it to finish, you are firing the second query.

Note that the first query will be finished and then the success (or failure) callback will be called. So all the code you want to execute after the first query is finished needs to be included in the callback function of the first query.

This code should work:

$(document).ready(function () {
     $("#SearchButton").click(function () {
         ExecuteOrDelayUntilScriptLoaded(function getData() {
             var ctx = SP.ClientContext.get_current();
             var SearchItem = document.getElementById('item').value;

             var oList = ctx.get_web().get_lists().getByTitle('All Dictionary items');

             var camlQuery = new SP.CamlQuery();
             camlQuery.set_viewXml('<view><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>' + SearchItem + '</Value></Eq></Where>' +
                 '</Query><RowLimit>10</RowLimit>' +
                 '</view>');

             this.collListItem = oList.getItems(camlQuery);

             ctx.load(this.collListItem, 'Include(Title, Id,SL,Description,Type1)');
             ctx.executeQueryAsync(

             function (sender, args) {
                 var listItemEnumerator = collListItem.getEnumerator();
                 while (listItemEnumerator.moveNext()) {
                     var oListItem = listItemEnumerator.get_current();
                     listItemInfoID = oListItem.get_item('SL').toString();
                     listItemInfo = oListItem.get_item('Type1').toString() + '  ' + oListItem.get_item('SL').toString(); //for searching next list

                     itemDescription = oListItem.get_item('Description').toString();
                 }
                 var desp = itemDescription.toString();
                 var despCorrection = desp.replace("</font>", " ");
                 despCorrection = despCorrection.substring(35);
                 document.getElementById('Descriptions').value = despCorrection;
                 document.getElementById('SearchedItem').value = listItemInfo.toString();
                 alert('here' + listItemInfoID);

                 alert('start new');

                 var ContextForRelatedItem = SP.ClientContext.get_current();
                 var oListForRelationItem = ContextForRelatedItem.get_web().get_lists().getByTitle('RelationWithIds');
                 var camlQueryForRelatedItem = new SP.CamlQuery();
                 camlQueryForRelatedItem.set_viewXml('<view><Query><Where><Eq><FieldRef Name=\'Word_SL_No\'/><Value Type=\'Number\'>' + listItemInfoID + '</Value></Eq></Where>' +
                     '</Query><RowLimit>10</RowLimit>' +
                     '</view>');
                 alert('after query');
                 this.collListItemForRelationItem = oListForRelationItem.getItems(camlQueryForRelatedItem);
                 ContextForRelatedItem.load(this.collListItemForRelationItem, 'Include(Title, Id,Linked_To,Relation_No)');
                 alert('after load');
                 ContextForRelatedItem.executeQueryAsync(function (sender, args) {
                     alert('in execute');
                     var listItemEnumerator2 = collListItem.getEnumerator();
                     document.getElementById('relation1item').value = '';
                     document.getElementById('relation2item').value = '';
                     while (listItemEnumerator2.moveNext()) {
                         var oListItemForRelation = listItemEnumerator2.get_current();
                         alert('in while');
                         listItemInfoForRelationItem = oListItemForRelation.get_item('Relation_No').toString(); //This alert is not getting triggered.
                         alert('in here jyfkufkuyfbjh' + listItemInfoForRelationItem.toString() + 'here');
                         relatedItems = oListItemForRelation.get_item('Linked_To');
                     }
                     alert('values are' + '\n' + relatedItems.toString());
                     alert('fine');
                     },

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


         }, "sp.js");


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

Answer 2

Another option when making an async call that depends on another async call is to use jQuery.Deferred():

$(document).ready(function () {
    $('#SearchButton').click(function () {
        function getData() {
            var ctx = SP.ClientContext.get_current();
            getFirstItem(ctx).then(function () { // d.resolve will call this function
                alert('start new');

                var oListForRelationItem = ctx.get_web().get_lists().getByTitle('RelationWithIds');
                var camlQueryForRelatedItem = new SP.CamlQuery();
                camlQueryForRelatedItem.set_viewXml('<view><Query><Where><Eq><FieldRef Name=\'Word_SL_No\'/><Value Type=\'Number\'>' + listItemInfoID + '</Value></Eq></Where>' +
                    '</Query><RowLimit>10</RowLimit>' +
                    '</view>');
                alert('after query');
                this.collListItemForRelationItem = oListForRelationItem.getItems(camlQueryForRelatedItem);
                ctx.load(this.collListItemForRelationItem, 'Include(Title, Id,Linked_To,Relation_No)');
                alert('after load');
                ctx.executeQueryAsync(function() {
                    alert('in execute');
                    var listItemEnumerator2 = collListItem.getEnumerator();
                    document.getElementById('relation1item').value = '';
                    document.getElementById('relation2item').value = '';
                    while (listItemEnumerator2.moveNext()) {
                        var oListItemForRelation = listItemEnumerator2.get_current();
                        alert('in while');
                        listItemInfoForRelationItem = oListItemForRelation.get_item('Relation_No').toString(); //This alert is not getting triggered.
                        alert('in here jyfkufkuyfbjh' + listItemInfoForRelationItem.toString() + 'here');
                        relatedItems = oListItemForRelation.get_item('Linked_To');
                    }
                    alert('values are' + '\n' + relatedItems.toString());
                    alert('fine');
                }, function(sender, args) {
                    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                });
            }, function(error) { // d.reject will call this function
                alert(error);
            }); // an optional third function can be added for d.notify for progress updates
        }
    });
});
function getFirstItem(ctx) {
    var d = $.Deferred(),
        SearchItem = document.getElementById('item').value,
        oList = ctx.get_web().get_lists().getByTitle('All Dictionary items'),
        camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml('<view><Query><Where><Eq><FieldRef Name=\'Title\'/><Value Type=\'Text\'>' + SearchItem + '</Value></Eq></Where>' +
        '</Query><RowLimit>10</RowLimit>' +
        '</view>');

    this.collListItem = oList.getItems(camlQuery);

    ctx.load(this.collListItem, 'Include(Title, Id,SL,Description,Type1)');
    ctx.executeQueryAsync(function() {
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            listItemInfoID = oListItem.get_item('SL').toString();
            listItemInfo = oListItem.get_item('Type1').toString() + '  ' + oListItem.get_item('SL').toString(); //for searching next list
            itemDescription = oListItem.get_item('Description').toString();
        }
        var desp = itemDescription.toString();
        var despCorrection = desp.replace("</font>", " ");
        despCorrection = despCorrection.substring(35);
        document.getElementById('Descriptions').value = despCorrection;
        document.getElementById('SearchedItem').value = listItemInfo.toString();
        alert('here' + listItemInfoID);
        d.resolve();    // You can also return the necessary items here instead of using global variables
    }, function(sender, args) {
        d.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    });
    return d.promise();
}