mutation observer example --put inside function to be called later


Mon Mar 13 2023 16:13:45 GMT+0000 (Coordinated Universal Time)

Saved by @markporo #visitor #data #info #optimizely

const waitForSiblingElementToBeRemoved = (form) => {
    // This Element are where any errors would appear
    const input = form.querySelector(`input[type='submit']`);

    // This observer looks for the sibling of the input submit button that appears 
    // and then removes when the request is complete
    new MutationObserver((entries, observer) => {
      log('entries[0].removeNodes: ', entries[0].removedNodes);
      if (!entries[0].removedNodes[0]?.classList.contains('ajax-progress')) return; 
      observer.disconnect(); // should this be moved after sendEvent 
      window.setTimeout(() => {
        if (input.classList.contains('error')) return; 
        log('Email has been submitted');
      }, 0);
    }).observe(input.parentElement, { childList: true, subtree: true }); // should be actually have two separate observers for each input?