Problem with multiple reloads of fancytree

Question

I have a journal app where I have a fancytree showing the journal entries for the user logged in. Below that tree, I have another fancytree with a dropdown above it that lets you select other users and browse their journal entries. Once you select a user, it grabs their user ID, then loads the second tree with their entries. This works great until about the 7th selection, in which the tree hangs up and basically kills my Tomcat session. I have to restart Tomcat in order to fix it.

My HTML is:

<div class="journalList left-column">
  <div id="logTree"></div>

  <div class="browser">
    <div class="userWrapper">
      <h4>Browse Other User Logs</h4>
      <select id="otherUser">
      </select>
    </div>
    <div id="browseTree"></div>
  </div>
</div>

The ID logTree is the fancytree for the user that is logged in. The browseTree is for the selected user.

Relevant code in JavaScript for #logTree.

$('#logTree').fancytree({
    source: {
        type: 'post',
        cache: false,
        url: "/LogbookServlet",
        data: {action:"init", sub:"logtree"},
        datatype: 'json'
    },
    lazyLoad: function(event, data) {
        var node = data.node;
        data.result = getLogTreeData(node.key);
    },
    loadChildren: function(event, data) {
        var node = data.node;
        var activeNode = $("#logTree").fancytree("getActiveNode");
        if (activeNode) {
            activeNode.setExpanded(true);
            var mon = new Date().getMonth();
            var curMonth = months[mon];
            var children = activeNode.getChildren();
            if (children) {
                for (var i = 0; i < children.length; i++) {
                    var childNode = children[i];
                    var title = childNode.title;
                    if (title == curMonth) {
                        $("#logTree")
                        .fancytree("getTree")
                        .activateKey(childNode.key);
                     }
                }
            }
        }
    }
});

This section of code is called when the page is first loaded:

var otherUsrId;
$('#browseTree').fancytree({
    source: [],
    lazyLoad: function(event, data) {
        var node = data.node;
        data.result = getLogTreeData(node.key, otherUsrId);
    },
    loadChildren: function(event, data) {
        var node = data.node;
    }
});

I have a handler for the Select to detect the change of users:

$('#otherUser').on('change select', function() {
    // Get the User ID from the Select
    otherUsrId = $(this).val();
    getUserTree(otherUsrId);
});

And here is the code for getUserTree():

function getUserTree(otherUsrId) {
    var userTree = $('#browseTree').fancytree("getTree");
    userTree.reload({
        url: "/LogbookServlet",
        data: {action:"init", sub:"logtree", otherUsrId:otherUsrId},
        datatype: 'json'
    });
}

So, after selecting a user for the 7th time, the "browseTree" fancytree just hangs with the loading icon spinning and it kills my browser. Any ideas? It appears that maybe something is getting called too recursively? Not sure.

score 3 · Answer 1 · answered Oct 22 '18 at 14:57

3

I'm not totally sure it will help, but I noticed a critical bit. Please try adding this before creating the tree:

$(":ui-fancytree").fancytree("destroy");

This missing destroy has (sometimes) caused problems for me on reload, so I hope it'll fix your issue, too ;-)

answered Oct 22 '18 at 14:57

MBaas

7,248
6
44
61

I had tried something similar, but accidentally left that out of my original post. Here is what I had: $('#browseTree').fancytree("destroy"); as the first line in my getUserTree() function. I even just now tried to use this: $('#browseTree').find(':ui-fancytree').fancytree("destroy"); Otherwise, I'll destroy both of my trees. Still crashing after about 4 or 5 reloads. – G.Price Oct 22 '18 at 15:34
Ok, that should certainly have done if it was the same root problem. But if that doesn't help, I'm afraid I don't have other ideas. (Still learning to master ft) – MBaas Oct 22 '18 at 15:55

score 2 · Accepted Answer · answered Oct 23 '18 at 13:46

2

So, I figured out my problem.... Turns out I was doing a recursive call to a function called getChildren() on the server side. Since I'm using lazy loading in the entire second tree, I didn't need to call this.

answered Oct 23 '18 at 13:46

G.Price

75
6

Cool, congratulation! ;.) Pls. just go ahead and accept your answer so that the question isn't open any more... – MBaas Oct 29 '18 at 19:11

Problem with multiple reloads of fancytree

2 Answers2