CODEWITHSUNDEEP
javascriptjquerydomlazy-loadingfancytree
Sarah Trees
Sarah Trees

Reputation: 904

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

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)

Upvotes: 3

Views: 457

Answers (2)

Brookswift
Brookswift

Reputation: 112

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/

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76551

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.

Upvotes: 1

Related Questions