WOW.js cannot detect dom mutations, please call .sync() after loading new content.

[sonamtsutsatsang]

Hi,
I have been using wow.js and i really do appreciate all the work that's been put in to.
My Java script skills are not the best, so please pardon my silly question.

Currently using on a site and it works fine on all browsers, except IE9 which gives the error:
WOW.js cannot detect dom mutations, please call .sync() after loading new content.
So i read about this: - you can call the wow.sync() method after you have added new DOM elements to animate (but live should still be set to true).
So the live is set to true. (check)
But how do i implement the wow.sync()

Any help would be greatly appreciated from a learning javascript person.

[mdeboer]

In normal browsers Wow automatically detects changes to the DOM like when elements are added dynamically through an AJAX call or elements changed position. IE9 doesn't support this way of detecting changes and you need to call wow.sync manually which re-checks the page for changes to ensure everything is working correctly.

If you're not adding things dynamically (like with AJAX) then you'll be fine and you don't need to call wow.sync. However, if you do load content dynamically simply call wow.sync after the content has been added.

var wow = new WOW();

var request = $.ajax({
    method: "GET",
    url: "http://example.com/test.php"
});

request.done(content) {
    // add your content to the page
    blablabla

    // Synchronise WoW
    wow.sync();
}

[sonamtsutsatsang]

Thank you very much. Makes sense to me now.

Much appreciated.

[mdeboer]

You're welcome!

[jimmywiddle]

Hi, Having issues here as described above with a livehelp (livehelperchat.com) and the status div which is hidden.

Heres a little more about the issue (start about half way down the page):
https://forum.livehelperchat.com/viewtopic.php?id=1400

Have tried adding in the wow.sync here:

var wow = new WOW();
var htmlStatus = '<div id="lhc_status_container" class="wow bounceInUp" data-wow-delay="0.3s" style="visibility:hidden;">'+subStatus+statusTEXT+'</div>';
var fragment = this.appendHTML(htmlStatus);
document.body.insertBefore(fragment, document.body.childNodes[0]);
wow.sync();

Also tried on the js script embed code:

var wow = new WOW();
var LHCChatOptions = {};
LHCChatOptions.opt = {widget_height:340,widget_width:300,popup_height:520,popup_width:500,domain:'mydomain.co.uk'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
var referrer = (document.referrer) ? encodeURIComponent(document.referrer.substr(document.referrer.indexOf('://')+1)) : '';
var location  = (document.location) ? encodeURIComponent(window.location.href.substring(window.location.protocol.length)) : '';
po.src = 'https://secure.mydomain.co.uk/livehelp/index.php/chat/getstatus/(click)/internal/(position)/bottom_right/(ma)/br/(hide_offline)/true/(check_operator_messages)/true/(top)/350/(units)/pixels/(leaveamessage)/true/(department)/1/(noresponse)/true?r='+referrer+'&l='+location;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
wow.sync();

Also tried as a callback on the js script embed code:

var LHCChatOptions = {};
LHCChatOptions.opt = {widget_height:340,widget_width:300,popup_height:520,popup_width:500,domain:'mydomain.co.uk'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
var referrer = (document.referrer) ? encodeURIComponent(document.referrer.substr(document.referrer.indexOf('://')+1)) : '';
var location  = (document.location) ? encodeURIComponent(window.location.href.substring(window.location.protocol.length)) : '';
po.src = 'https://secure.mydomain.co.uk/livehelp/index.php/chat/getstatus/(click)/internal/(position)/bottom_right/(ma)/br/(hide_offline)/true/(check_operator_messages)/true/(top)/350/(units)/pixels/(leaveamessage)/true/(department)/1/(noresponse)/true?r='+referrer+'&l='+location;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

LHCChatOptions.callback = {
show_widget_cb:function(inst){
wow.sync();
}};

Im not having any luck here, any help would be so much appreciated!
Thanks in advance!

[danbovey]

Currently using a fork of WOW just to remove the following lines:

console?.warn 'MutationObserver is not supported by your browser.'
console?.warn 'WOW.js cannot detect dom mutations, please call .sync() after loading new content.'

I'm testing pages without BrowserSync and any other parts of my JS modules which might add elements to the page, nor am I using XHR. And I still get these warnings. 😑

So the issue with WOW for me, is that it writes a nasty warning to the console - rather than anything like MutationObserver not working correctly.

[01Kuzma]

Hi!
In React.js I initiate this plugin with this code:

  componentDidMount() {
    new WOW.WOW().init();
  }

But I cannot get rid of these warnings:

'MutationObserver is not supported by your browser.'
'WOW.js cannot detect dom mutations, please call .sync() after loading new content.'

They are showed in all browsers. I'm not adding something dynamically

How could it be fixed?

[busheezy]

It would be nice to be able to disable these warnings. I'm using this in Vue without any issues but the errors are ugly for production.

[bocharsky-bw]

Any news on it? Actually, I think my browser does support MutationObserver (the latest Google Chrome), but I'm getting these warnings anyway.

Is this project still alive? I see the last release was on Apr 7, 2015

ping @matthieua @attilaolah

[bocharsky-bw]

Solved with live: false since do not use any dom mutations:

var wow = new WOW({
    live: false
});