BloX Notification When Data Loaded Due To Scroll

[CDavidOrr]

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

[harikm007 · Accepted solution]

@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]

@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.