DOM modification detection

Developer Support CMS Development
1

Hi!

I’m looking for a way to detect a DOM mutation on a HubSpot page, more specifically the appearance of a pop-up form thank-you modal, with class = .leadin-thank-you-wrapper.

Has anyone been successful in doing something similar? Using MutationObserver?

Any help much appreciated, thanks!

DL

2

Hi @danielelodola ,

Thank you for reaching out to the HubSpot Community.

I myself am not familiar with this topic, but I will tag in some top Community contributors to see if they have experiences.

@tjoyce and @piersg , is there any information you can share with @danielelodola ?

3

@danielelodola - I have looked for this functionality as well as a global javascript event library for leadin and it doesn’t seem to exist… even combing through the javascript library yielded no results. What I am left doing is

var leadincheck = window.setInterval(function(){ if($(".leadin-thank-you-wrapper").length){ $('body').addClass('has-leadin-thank-you'); window.clearInterval(leadincheck) }}, 300);

I realize there is no elegance in this approach but it tends to get the job done

4

This will work for detecting divs with class ‘leadin-thank-you-wrapper’

const observer = new MutationObserver(mutations => {
 mutations.forEach(({ addedNodes }) => {
 addedNodes.forEach(node => {
 // For each added node
 if(node.nodeType === 1 && node.tagName === 'DIV' && node.classList.contains('leadin-thank-you-wrapper')) {
 // Do things
 console.log(node);
 }
 })
 })
})

// Starts the monitoring
observer.observe(document.documentElement, {
 childList: true,
 subtree: true
})
5

@piersg - Are we officially allowed to ignore IE now? Plese tell me it’s true

6

@tjoyce Shh, don’t say its name. If we ignore it, it will go away.

Officially MS will stop supporting IE11 on November 30, 2020 (with 365 products ending support on August 17, 2021).

7

@piersg - I’m starting my countdown :grinning_face_with_smiling_eyes:

8

@tjoyce Don’t worry, that already exists haha https://death-to-ie11.com/

9

Thanks @tjoyce @piersg @natsumimori for your help!

This is the code I implemented :

function hasId(element) {
 return typeof element.id != 'undefined';
}

function determineModal(element, modalId) {
 if (hasId(element) && element.id == 'leadinModal-content-wrapper-' + String(modalId)) {
 return true;
 }
}

const observer = new MutationObserver(mutations => {
 mutations.forEach(({
 addedNodes
 }) => {
 addedNodes.forEach(node => {
 // Identify thank-you div.
 if (node.nodeType === 1 && node.classList.contains("leadin-content-body") && node.firstChild.classList.contains('leadin-thank-you-wrapper')) {
 if (determineModal(node.parentNode, "######")) {
 // Do stuff case 1
 } else if (determineModal(node.parentNode, "######")) {
 // Do stuff case 2
 } else {
 // Do stuff default case
 };
 };
 })
 })
});

I added in some conditions in order to treat various modal interactions differently.