TablePress & DataTables - works on everything but iDevices

Wordsmith

I'm using the plugin TablePress on my website. I have a table populated with music players and other info which can be seen here: http://thetracksmiths.com/beats/bap-adapt/. For whatever reasons, the music player does not work on iPhones or iPads. It IS working on android devices.

When I tell TablePress not to use DataTable's functionality (in my case, pagination, sorting, and search), the players work fine on the iDevices. What could possibly cause this? I appreciate any insight. Thanks.

allan

I'm afraid I don't know what would cause that. The only thing I can guess, is are you initialising the music player in fnInitComplete? (I don't know how TablePress works, it might/might not have that option?).

I'm wondering if the music player is trying to initialise while the nodes are not on the page.

Allan

Wordsmith

I'll write to the author about the fnInitComplete (I'm not code-savy, so I have no idea what that is!). The player is generated by a WordPress shortcode, so I assume that the table loads first, then processes the shortcodes. I'm I far off in this thinking?

Wordsmith

I heard back from the TablePress author, and he says that fnInitComplete is not being used in anything. Does that help any?

allan

Can you link to the audio plug-in you are using? What I'm thinking is that it isn't initialising one nodes which aren't in the DOM and you might have an async timing error.

Also, when I try in Safari or Chrome (haven't trying any other browsers) the player doesn't appear to do anything?

Allan

Wordsmith

[quote]Also, when I try in Safari or Chrome (haven't trying any other browsers) the player doesn't appear to do anything?[/quote] Oh no! I've only been testing in Chrome. Ugg! More problems.

The plugin isn't in the WordPress repository, it's a premium plug from CodeCanyon. I can link you to any of the files it contains on my server if that helps. Here's the link to the plugin on CodeCanyon: http://codecanyon.net/item/html5-music-player-with-3-css3-skins/1275465

Wordsmith

Wow, I'm spaced out. I'm using Chrome, but I see you're not getting the player working in Chrome? Very odd. Works fine over here.

Wordsmith

I think I fixed the problem in Chrome with the player. It was just a matter of the column not sizing properly. Should be fine now.

allan

Ah no - works just fine for me in Chrome and Safari now. No idea why it wasn't working before...

I've just tried your site on an iPad and it mostly appears to work - the music player does everything but actually play music (scrolling, play / pause interaction).

I don't understand what would cause that without some deep debugging I'm afraid. Have you asked the author of the player library if they've seen this kind of thing before?

Allan

Wordsmith

Yea, the author of the plugin is at a loss and referred me to your site actually ;) I'm not sure if this is your thing, but I'd be willing to talk about paying you to debug the issue and finding a solution. I'd give u access to whatever you need. This is just an enigma to me at this point!

Wordsmith

Something interesting I found, I'm not the only one who seems to have this problem. There is a wordpress theme that is aimed at selling Hip-Hop beats online (what I'm trying to do with my site). I looked at the source code because I was curious and sure enough, they use DataTables. As with my site, the music does not play on iDevices. Here's the link: http://hiphopmakers.com/theme/musicmaker/beat-store-no-sidebar/

Thought maybe this would offer up some insight. All I looked for in the source code was *.js and found datatables in there. I wouldn't know what else to look for for any other insight.

allan

Sorry I haven't had a chance to look at this today. Its been "one of them days...". I'll try to take a look tomorrow.

Wordsmith

Not a problem.

Wordsmith

Any new thoughts on this?

Wordsmith

Beuler? Beuler?

Wordsmith

Anybody out there willing to debug this issue? I need a solution.

allan

So I've just had a bit more of a look into this, and I can fairly easily replicate the issue without DataTables. All that needs to be done is to remove the element from the document and then add it back in again. The media player simply fails to play after that on iOS (and this removal and addition is fundamental to how DataTables works).

For example, if you disable DataTables on your page and add this code:

[code]
jQuery(document).ready( function ($) {
var a = $('#tablepress-2 tbody tr:eq(2)')[0];
a.parentNode.removeChild( a );

$('#tablepress-2 tbody').append( a );
} );
[/code]

All of the players in the table will work, expect the very last row (the one that has been removed and re-added).

So its not something that DataTables is doing wrong, but it is a problem in the media player that is triggered by the actions DataTables take. As I say, this is fundamental to DataTables and isn't likely to change, so we need to know either if the author of the media player library can fix it for when items are removed and then added back into the DOM. Or if there is some sort of re-initialisation that can be called when the element is added back into the DOM.

Allan

Wordsmith

I've tried multiple media players and the current one I'm using is the native audio player in WordPress 3.6. But this issue has affected them all. I'll try making some noise in the WP forum with what you've said here and see if there's any solution.

allan

It might very well be a bug in iOS itself. I'll try later on with a plain audio tag and moving that around the DOM.

Allan

Wordsmith

Have you tried this yet? I'm barking up every tree I can on this one.

allan

Not yet. You could try it yourself perhaps? :-) Just making a simple audio tag, remove it form the DOM and add it back in and then try to control it? That seems like the next step to me.

Allan

Wordsmith

I don't know how to do that :( I'm no coder. Is this something to do in HTML?