topic Re: DOM modification detection in CMS Development

DOM modification detection

danielelodola — Wed, 19 Aug 2020 16:35:52 GMT

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!

Re: DOM modification detection

natsumimori — Fri, 21 Aug 2020 03:30:00 GMT

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 ?

Re: DOM modification detection

tjoyce — Fri, 21 Aug 2020 05:15:53 GMT

@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

Re: DOM modification detection

piersg — Fri, 21 Aug 2020 08:24:45 GMT

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 })

Re: DOM modification detection

tjoyce — Fri, 21 Aug 2020 08:57:12 GMT

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

Re: DOM modification detection

piersg — Fri, 21 Aug 2020 09:01:14 GMT

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

Re: DOM modification detection

tjoyce — Fri, 21 Aug 2020 09:02:38 GMT

@piersg - I'm starting my countdown 😄

Re: DOM modification detection

piersg — Fri, 21 Aug 2020 09:04:28 GMT

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

Re: DOM modification detection

danielelodola — Mon, 24 Aug 2020 07:28:01 GMT

Thanks @tjoyce @piersg @natsumimori for your help!

This is the code I implemented :

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