Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Trouble with Mutation Observer

bharath_sampath
Level 2
Level 2

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>

1 Accepted Solution
dwright
Correct answer by
Employee
Employee

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.

View solution in original post

2 Replies
dwright
Correct answer by
Employee
Employee

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.

View solution in original post

bharath_sampath
Level 2
Level 2

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