How can I cancel the the last call of a jsTree (using $.jstree())?

Question

Using jsTree 1.0-rc3

Using JS tree I have a dropdown refiner. That will set the content called loaded into the tree. But on each call the tree updates without aborting the last call, so you can have the tree showing old calls if they return after the newer call.

How can I cancel the last call?

// On change, update tree
$('#entitySelector1').change( function () {
    ....
    applyJstree(1);
}

var applyJstree = function(num) {
    $('#ent{0}'.format(num)).jstree({
            "plugins" : ["themes","json_data","dnd","search","types","ui","contextmenu", "overlay", "hotkeys"],
            "core" : { 
                "initially_open" : [ "tree{0}_root".format(num) ] ,
                "animation" : 100
            },          
            "json_data" : { 
                "ajax" : {
                    "url" : function ( currentNode ) {
                        var currentEntity = $('#entitySelector{0}'.format(num)).val();
                        var maxResults = treeSettings['ent{0}maxResults'.format(num)];

                        if (currentNode === 'ent{0}_root'.format(num) || currentNode === -1){
                            return 'treeAjaxServer.php?action=init&entityId=' + $('#entitySelector{0}'.format(num)).val() 
                                + '&sort=' + treeSettings['ent{0}sortMode'.format(num)]
                                + '&sortDirection= ' + treeSettings['ent{0}sortDirection'.format(num)]
                                + '&needle=' + $('#search{0}'.format(num)).val()
                                + '&projectId=' + $('#projectFilter{0}'.format(num)).val()
                                + '&showChildCount=' + treeSettings['ent{0}childCount'.format(num)]
                                + '&maxResults='+maxResults;
                        } else {
                            return 'treeAjaxServer.php?action=branch&entityId=' 
                                + $('#entitySelector{0}'.format(num)).val() + '&sort=' 
                                + treeSettings['ent{0}sortMode'.format(num)]
                                + '&projectId=' + $('#projectFilter{0}'.format(num)).val()
                                + '&sortDirection= ' + treeSettings['ent{0}sortDirection'.format(num)]
                                + '&showChildCount=' + treeSettings['ent{0}childCount'.format(num)];
                        }
                    }, 
                    "data" : function ( node ) {
                        var currentEntity = $('#entitySelector{0}'.format(num)).val();
                        var maxResults = treeSettings['ent{0}maxResults'.format(num)];

                        if (node === -1){
                            return {'prefix' : 'tree{0}_'.format(num),"maxResults" : maxResults};
                        } else {
                            return { //Send this to the server with the ajax request
                                "prefix" : "tree{0}_".format(num),
                                "parentNodeId" : node.attr("id"),
                                "maxResults" : maxResults,
                                "showChildCount" : treeSettings['ent{0}childCount'.format(num)]
                            };
                        }
                    }
                }
            }
    });
}

What I'm after is how do I update the data source, and in the case of multiple calls (happens often) abort the previous calls.

score 1 · Accepted Answer · answered Feb 10 '17 at 19:33

You will have to cache your ajax call and then abort it every time you start another one.

// On change, update tree
$('#entitySelector1').change( function () {
    ....
    applyJstree(1);
}


var applyJstree = function(num) {
     getAjaxDataForTree(num);
}


var xhr = false;
function getAjaxDataForTree(num) {
   if (xhr) {
      xhr.abort(); // abort if ajax call is going on
   }

   // cache tree element to access it in the callback
   var $jsTree = $('#ent{0}'.format(num)).jstree(); 

   // cache ajax call
   xhr = $.ajax({
        type: ...,
        url: ...,
        success: function(data){
           $jsTree.settings.core.data = data; // update tree
           $jsTree.refresh();
        }
    });
}

Demo - Fiddle Demo, but this is jsTree v.3

How can I cancel the the last call of a jsTree (using $.jstree())?

1 Answers1