2

I am trying to observe when the {{ cart.invoiceNumber}} textContent changes. using the options childList: true, subtree: true it will detect some changes but not all of them. and then I have tried the options characterData: false, attributes: false, childList: true, subtree: false and this picks up the <span id="cartTotal" dangerouslySetInnerHTML={{ __html: total }} /> but it doesn't recognise when the textContent changes.

How can I use this to observe when the textContent changes?

 export function elementReady(selector) {
  return new Promise((resolve, reject) => {
    let el = document.querySelector(selector);
    if (el) {resolve(el);}
    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(document.querySelectorAll(selector)).forEach((element) => {
        resolve(element);
        //Once we have resolved we don't need the observer anymore.
        // observer.disconnect();
      });
    })
      .observe(document.documentElement, {
        characterData: false, attributes: false, childList: true, subtree: false 
      });
  });
}



 elementReady('#cartTotal').then((someWidget)=>{ console.log(someWidget)});

layout.js

<span dangerouslySetInnerHTML={{ __html: cart.invoiceNumber }} />

tom harrison
  • 3,273
  • 11
  • 42
  • 71
  • Hope this question can help you https://stackoverflow.com/questions/40195514/mutation-observer-not-detecting-text-change – hungdoansy Nov 07 '20 at 16:14
  • I'm not sure how to check for textContent in my code, it helps but Im still a bit lost – tom harrison Nov 08 '20 at 00:46
  • 1
    Listening to textContent change can be done by modifying the config array. I saw that was mentioned in the accepted answer. But I think to get the new textContent, you'll need to do like how you're doing above: find the element and get its textContent – hungdoansy Nov 08 '20 at 03:19

0 Answers0