'inserted' and 'removed' event listeners are not called on browsers without MutationObserver support

[sszabolcs]

Hi!

We have a CanJS cordova webapp which is used on multiple platforms (desktop and mobile).
We are migrating to CanJS 3 and now we ran into the problem, that 'inserted' and 'removed' event handlers are not called back on Android before 4.4. I know that this is a pretty old platform, but we have to support it. The app with CanJS 2 worked perfectly regarding this.

Here is a sample: JSBin

Opening this sample in an Android built-in browser the inserted and removed event handlers don't log to the console, they are not called back.

The issue is easily reproducible on desktop with Chrome, when you modify mutation-observer.js and return 'undefined' as MutationObserver constructor function.

Please provide a way so these handlers get called back on Android before 4.4.
Thanks!

[chasenlehara]

Hi @sszabolcs, I don’t think the core team has the resources to work on this or canjs/can-fixture#107, but if you can submit a PR that doesn’t regress the codebase in other ways I think we’d be happy to merge it. 😊

[sszabolcs]

@chasenlehara Ok, I'll try to find a solution, but a good high level documentation on how the event system works would be a great help. It is hard to reverse engineer and understand all the pieces.

The XHR issue is easy to resolve I think, the MDN docs clearly state the cause of the problem regarding the error message.

[chasenlehara]

@sszabolcs I think someone at Bitovi might be able to pair with you to answer questions about the event system; I’ll message you on Gitter. 😊

[sszabolcs]

@chasenlehara As I see and understand it would be a huge task to implement a fallback for the case when no MutationObserver object is available. As I understand in CanJS 2 you extended jQuery to listen for DOM changes and now in CanJS 3 you use MutationObserver to get informed about DOM changes.
I think I've found the golden mean. 😄
I've found a great library, a MutationObserver polyfill. Using this library the problems are gone on Android 4.1.2, the 'inserted' and 'removed' events are dispatched.

[chasenlehara]

Awesome, is it ok to close this then?

[justinbmeyer]

Canjs 3.0 already has something like this can-util/dom/mutate.

As long as DOM mutations use that, it should fire inserted / removed. I thought can-jQuery already makes jQuery do this too?

[sszabolcs]

@justinbmeyer Thanks, I didn't know about can-util/dom/mutate.

Now that you mentioned I ran through can-jquery code and see that it uses can-util/dom/mutate.
It would be a more simple solution to my problem than the MutationObserver polyfill.
Tomorrow I'll debug it and see what's happening...

[sszabolcs]

@justinbmeyer It seems to me that can-jquery does not fire the 'inserted' event.
Here is an example.
If you put a breakpoint to the 16608th line of [email protected] and step through the code you can see that 'elems' gets populated and contains the newly inserted nodes. Before you call the original jQuery method 'elems' value is right. But after calling the original jQuery method 'elems' gets empty so calling mutate.inserted() does nothing.

var ret = original.apply(this, args);
mutate.inserted(elems);

Of course in order for this to work getMutationObserver() must return null (nulling MutationObserver is missing in the example code, but regardless of it this would not work because 'elems' is empty).
Could you please check what's happening?

[sszabolcs]

@justinbmeyer Did you have time to check this? Thanks!

[justinbmeyer]

I haven't had time to check this out. Moving this to can-jquery.

[justinbmeyer]

Issue moved to canjs/can-jquery #80 via ZenHub