Does not seem to work in Android

[creamofthecrop]

Hi meetselva,
first of all: Thanks for your fabulous script! I have an issue though which seems odd to me; I use your script to fetch changes in a class within a slider (in an active/non-active manner). I use this information to trigger the background color of a corresponding button for each slide. All works perfect in all my browsers - but it fails completely on my mobile phone (based on newest Android). Specifically it seems that the complete "callback: function (e) {" part does not work (I tried with if else and never accomplished anything, it's totally ignored). All my other scripts work perfectly on my phone. Can you give me a hint? Here's my code:

$('.cycle-slide').attrchange({
    trackValues: true, 
    callback: function (e) {
        if((e.attributeName == "class")&&($(this).index() == "1")){
            var pattern = /cycle-slide-active/;
            var exists = pattern.test(e.newValue);
            if(exists){ $('#li1').css('background-color', '#3A0B2F');}
            else {$('#li1').css('background-color', '#C0A576');}
        }
        else if((e.attributeName == "class")&&($(this).index() == "2")){
            var pattern = /cycle-slide-active/;
            var exists = pattern.test(e.newValue);
            if(exists){ $('#li2').css('background-color', '#3A0B2F');}
            else {$('#li2').css('background-color', '#C0A576');}
        }
    }
})

Thanks in advance!

Kind regards, Michael

[Selvakumar Arumugam]

Thank you for using attrchange plugin.

Could you provide the following information about the device you are testing?

Device Name:
OS name and version: Android ?
Browser name and version: ?

Also Could you try the below code and let me know the results?

$('.cycle-slide').attrchange({
    trackValues: true, 
    callback: function (e) {
       console.log ('e.attributeName: ' + e.attributeName + ' e.newValue: ' +  e.newValue);
    }
 });

Do you see any errors in the logs? Let me know.

You could also debug this by comparing the results from this device and the other where it is working fine. Let me know the results.

Good Luck.

[creamofthecrop]

Hi,

thanks for your answer. I tried your code and as I presumed, it fired within all browsers where your plugin works but not in the others. There’s just no log entry in the consoles.

I have a Samsung Nexus G3 with Android 4.3. I think I know why it doesn’t work – as far as I could read today, there’s currently no support for mutation observer callbacks in this version of Android, 4.4 will have it – or am I wrong and there’s a solution I missed?

Sincerely, Michael

From: Selvakumar Arumugam [mailto:[e-mail]]
Sent: Dienstag, 28. Januar 2014 18:33
To: meetselva/attrchange
Cc: creamofthecrop
Subject: Re: [attrchange] Does not seem to work in Android (#8)

Thank you for using attrchange plugin.

Could you provide the following information about the device you are testing?

Device Name:
OS name and version: Android ?
Browser name and version: ?

Also Could you try the below code and let me know the results?

$('.cycle-slide').attrchange({
trackValues: true,
callback: function (e) {
console.log ('e.attributeName: ' + e.attributeName + ' e.newValue: ' + e.newValue);
}
});

You could also debug this by comparing the results from this device and the other where it is working fine. Let me know the results.

Good Luck.

—
Reply to this email directly or view it on GitHub #8 (comment) . https://github.com/notifications/beacon/6525025__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcwNjQ2MzIwNywiZGF0YSI6eyJpZCI6MjQ0MTQ0MzJ9fQ==--498e64322412d18ed7c3f41a037af457219e28c3.gif

[Selvakumar Arumugam]

The plugin uses DOMAttrModified as a fallback if the MutationObserver is not supported. Try running this fiddle http://jsfiddle.net/leaverou/pckrf/ in the mobile device and see if you are getting the alert.

If that doesn't help, try adding the below alert before the .attrchange

alert($('.cycle-slide').length);

Also check your console for any errors.

[creamofthecrop]

Don’t understand your fiddle – what am I supposed to do or see when opening the page? Initially I get an alert that it fired 0 times. When I change the I value to 2 and re-rund, it alerts “2 times”. What do I make of that?

From: Selvakumar Arumugam [mailto:[e-mail]]
Sent: Mittwoch, 29. Januar 2014 16:56
To: meetselva/attrchange
Cc: creamofthecrop
Subject: Re: [attrchange] Does not seem to work in Android (#8)

The plugin uses DOMAttrModified as a fallback if the MutationObserver is not supported. Try running this fiddle http://jsfiddle.net/leaverou/pckrf/ in the mobile device and see if you are getting the alert.

If that doesn't help, try adding the below alert before the .attrchange

alert($('.cycle-slide').length);

Also check your console for any errors.

—
Reply to this email directly or view it on GitHub #8 (comment) . https://github.com/notifications/beacon/6525025__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcwNjU0Mzc2NCwiZGF0YSI6eyJpZCI6MjQ0MTQ0MzJ9fQ==--9973b003423338c6bc74e1662e538e6722e8aafd.gif

[creamofthecrop]

I’m sorry, now I understand. In Chrome it fires zero times because Chrome doesn’t understand DOMAttrModified. Firefox says “3 times”.

BUT: My Android 4.3 phone also says “zero” so the fallback solution does not fire…

From: Selvakumar Arumugam [mailto:[e-mail]]
Sent: Mittwoch, 29. Januar 2014 16:56
To: meetselva/attrchange
Cc: creamofthecrop
Subject: Re: [attrchange] Does not seem to work in Android (#8)

The plugin uses DOMAttrModified as a fallback if the MutationObserver is not supported. Try running this fiddle http://jsfiddle.net/leaverou/pckrf/ in the mobile device and see if you are getting the alert.

If that doesn't help, try adding the below alert before the .attrchange

alert($('.cycle-slide').length);

Also check your console for any errors.

—
Reply to this email directly or view it on GitHub #8 (comment) . https://github.com/notifications/beacon/6525025__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcwNjU0Mzc2NCwiZGF0YSI6eyJpZCI6MjQ0MTQ0MzJ9fQ==--9973b003423338c6bc74e1662e538e6722e8aafd.gif

[creamofthecrop]

A possible workaround could be DOMSubtreeModified…this fires 2 times on my phone (as well as in Chrome…odd thing is: Firefox alerts “3 times”)

I will change your script accordingly to get it work on Android…

Thanks for your support and

Kind regards, Michael

From: Selvakumar Arumugam [mailto:[e-mail]]
Sent: Mittwoch, 29. Januar 2014 16:56
To: meetselva/attrchange
Cc: creamofthecrop
Subject: Re: [attrchange] Does not seem to work in Android (#8)

The plugin uses DOMAttrModified as a fallback if the MutationObserver is not supported. Try running this fiddle http://jsfiddle.net/leaverou/pckrf/ in the mobile device and see if you are getting the alert.

If that doesn't help, try adding the below alert before the .attrchange

alert($('.cycle-slide').length);

Also check your console for any errors.

—
Reply to this email directly or #8 (comment) view it on GitHub. https://github.com/notifications/beacon/6525025__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcwNjU0Mzc2NCwiZGF0YSI6eyJpZCI6MjQ0MTQ0MzJ9fQ==--9973b003423338c6bc74e1662e538e6722e8aafd.gif

[Selvakumar Arumugam]

I see, looks like the older devices/browser still doesn't use the newer methods to trigger the DOM changes. We could detect and support for DOMSubtreeModified and add additional support but since it is deprecated I am going to hold on to this and see if more people face similar issue.

Thanks again for using this plugin and feel free to share your thoughts to improve the plugin.