Trouble with Mutation Observer

[bharath_sampath]

Hello. This is my first post. I am trying to observe changes made to my 'ItemList' using Mutation Observer. I'm injecting my code in Custom Code section of VEC. The observers are getting inititalized and my code works during edit Activity. But in the Activity preview it doesn't work and I am confused about this behavior. If you need any logs to further examine this, feel free to ask.

Here is my custom code:

<script>
  (function(){
    var id;
    window.MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    function events(){
      var content, bookBtns;    
      if((content = document.querySelector('.booking-wrapper')) !== undefined){
        content.style.opacity = "0";
        //console.debug("set opacity to 0");
      }
      if(document.querySelector('.book-room-btn') !== undefined){
        bookBtns = document.getElementsByClassName('book-room-btn');
        //console.debug("changing text");
        var i;
        for(i=0;i<bookBtns.length;i++){
          var bookBtn = bookBtns[i];
          bookBtn.textContent = "Book";
        }
        if(i == bookBtns.length){
            content.style.opacity = "1";
            //console.debug("set opacity to 1");
            window.clearInterval(id);
            //console.debug("cleaned up");
        }
      }
    };
    //id1 = window.setInterval(events, 50);
    window.addEventListener('hashchange', function(event){
      console.debug("hash changed!!!");
      
      if(window.location.hash.substr(1).split('&')[0] == "/step2"){
          document.querySelector('.booking-wrapper').style.opacity = "0";
        window.setTimeout(function(){
              id = window.setInterval(events, 100);
        }, 1500);
      }
    });
    document.addEventListener('DOMContentLoaded', function(event){
      var target = document.querySelector('#room-choices'),
      observer = new MutationObserver(function(mutations){
        
        console.debug("mutation detected");
        document.querySelector('.booking-wrapper').style.opacity = "0";
        //console.debug(mutations.length);
          mutations.forEach(function(){
          events();
          //event.stopPropagation();
        });
      }),
      config = {childList:true, subtree:true};
      if(observer)
          observer.observe(target, config);
      //Mutation Observer Polyfill for IE 10
      else{
        target.addEventListener('DOMNodeInserted', function(){
          console.debug("Node mutation detected");
          document.querySelector('.booking-wrapper').style.opacity = "0";
          events();
        });
        target.addEventListener('DOMSubtreeModified', function(){
          console.debug("subtree mutation detected");
          document.querySelector('.booking-wrapper').style.opacity = "0";
          events();
        });
      }
    });
  })();
</script>

[dwright · Accepted solution]

Hi Barath,

I am not able to do a code review, but one thing to check is the timing of the code delivery.  When delivered to the page through the mbox, the code is probably loading at the top of the page and depending on which library you are using it might be before or after DOMContentLoaded.  And in production, it might execute slightly differently from within the VEC.  So, i would use additional console.log statements to see if things are actually firing when you think.  For example, i see you are using event listeners for DOMContentLoaded which might not be behaving the way you think in the context of a normal page load with an mbox call.  Let us know if this helps.

[bharath_sampath]

I suspected this much. Your answer confirms it. Thank you. This definitely helps.