Fancytree: Event after new children (loaded via LacyLoad) visible in DOM

Question

I use fancytree with lazyLoad. I'm looking for an event that fires AFTER new children loaded via lazyLoad are available in the DOM.

var fancytree_options = {
            extensions: ["glyph"],
            checkbox: false,
            glyph: glyph_opts,
            icon: false,
            autoCollapse: true,
            debugLevel: 0,
            source: {url: URL},
            init : function(event, data) {
                    // ONLY first time
            },
            loadChildren: function(event, data) {
                    // BEFOR Children loaded in DOM
            },
            createNode: function(event, data) {
                    // BEFOR Child visible in DOM
            }
}
$("#treeBlock").fancytree(fancytree_options);

I have read through the possible events and tried some of them: https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeEvents

init: will only be fired the first time the tree becomes fully visible in the DOM. After new children are added, the event is not fired again.

loadChildren: BEFORE the new children are integrated into the DOM.

createNode: BEFORE the child is in the DOM

renderTitle: With this I have successfully edited the title. But at this time the title (which can also be HTML) is not yet available in the DOM.

I am looking for an event that will be activated after new children are in the tree and they are available in the DOM.

My UseCase: The title of the node consists of HTML and on elements additional clicks have to be registered (not nothing to do with FancyTree)

Could you please share example of response and explain on which DOM elements you want to add clicks. — Den Kison, Jul 21 '20 at 14:35
I am not looking for a click event. I'm looking for an event that monitors Fancytree and detects when it has loaded the new children into the tree. (When this is done, I want to use this event to register a click event on the new titles. But I can only do that when I know that the new ones are in the DOM) — Sarah Trees, Jul 25 '20 at 08:28

score 1 · Answer 1 · answered Jul 21 '20 at 15:45

You seem to be looking for mutation observers. Before you continue, these are good reads:

    // Select the node that will be observed for mutations
    const targetNode = document.querySelector(someselector);
    
    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };
    
    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
                //Fire create/remove event if needed
                //You may need to take account of the previous number of children
            }
            else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
                //Fire update event if needed
            }
        }
    };
    
    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
    
    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
    
    // Later, you can stop observing
    observer.disconnect();

The code above watches mutations and has code places where those can be handled. You can extend from the functions/classes that you use and add some callback functions to execute at the relevant places of the mutation observer that would be attached to the object. I recognize that it's non-trivial, but you need to do this labor first and then you will be able to reuse it in the future.

score 0 · Answer 2 · answered Jul 25 '20 at 00:50

0

since all you want to do is register clicks, why not use a delegated event listener on the parent element so that you can do it in fewer DOM touches?

see https://learn.jquery.com/events/event-delegation/

answered Jul 25 '20 at 00:50

Brookswift

112
2

No, I do not want to observe the click. After the click Fancytree reloads data via Ajax. After that new children are created in the tree. Once they are in the dome, I need an event to access them (or all of them). – Sarah Trees Jul 25 '20 at 08:24

Fancytree: Event after new children (loaded via LacyLoad) visible in DOM

2 Answers2