Forum Discussion

CDavidOrr's avatar
CDavidOrr
Cloud Apps
01-19-2022
Solved

BloX Notification When Data Loaded Due To Scroll

I have a BloX widget that builds a simple table of name/value pairs.  The data has 16 rows and I have showCarousel set to false so all data is displayed.  When the widget is rendered, only the first 10 rows of data are displayed.  Using Chrome's developer tools I have verified that there are only 10 rows for this data in the DOM.  As soon as I scroll down in this widget, the other 6 rows are added to the DOM.

Using the widget's script, I need to make some modifications to each of these rows.  I am handling the widget's "ready" event to make these modifications and this works great, for the first 10 rows.  When the last 6 rows are added, the required modifications are not made to them.

Does anyone know of an event that gets triggered when the additional rows are added to the DOM, or any other ideas on how to handle this situation?  I have been searching around but have not been able to identify anything useful.

TIA,

David

  • CDavidOrr 

    Try `MutationObserver`, the function will get executed whenever DOM changes.

    widget.on('ready', function(se, ev) {
    	/*
    		Your existing script. No need to change this.
    	*/
    
    	//Observer
    	const elementToObserve = $('.scroll .content div', element)[0];
    	const observer = new MutationObserver(function(e) {
    		for(const m of e) {
    			if (m.type === 'childList') {
    				//Copy your script to change style.
    				//Added element will be 'm.addedNodes'. So you can apply style on 'e.addedNodes'
    				//example : $(m.addedNodes).find('.text-block').css('color', 'green')
    			}
    		}
    	});
    	observer.observe(elementToObserve, {subtree: true, childList: true});
    })

    -Hari

2 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse

    CDavidOrr 

    Try `MutationObserver`, the function will get executed whenever DOM changes.

    widget.on('ready', function(se, ev) {
    	/*
    		Your existing script. No need to change this.
    	*/
    
    	//Observer
    	const elementToObserve = $('.scroll .content div', element)[0];
    	const observer = new MutationObserver(function(e) {
    		for(const m of e) {
    			if (m.type === 'childList') {
    				//Copy your script to change style.
    				//Added element will be 'm.addedNodes'. So you can apply style on 'e.addedNodes'
    				//example : $(m.addedNodes).find('.text-block').css('color', 'green')
    			}
    		}
    	});
    	observer.observe(elementToObserve, {subtree: true, childList: true});
    })

    -Hari

    • CDavidOrr's avatar
      CDavidOrr
      Cloud Apps

      harikm007 , I can't thank you enough for this.  It works like a charm.  As is probably obvious, I have very little experience in programming the front end of a UI and as such am unaware of a lot of things that are available.  You taking the time to provide this information is a tremendous help.