Jquery Mobile breaks jPlayer

[David Taylor]

I've been using jPlayer in a Jquery Mobile app (using their alpha 4.1) and it works great.

Now that they've come out with their Beta of Jquery Mobile (beta 1.0), it breaks the jPlayer.  I have verified that is definitely the beta1.0 that breaks jPlayer.

Would be great if the jPlayer folks would look into what makes the player incompatible with latest version of jQuery Mobile...

[Mark Panaghiston]

Any chance you could set-up a couple of test cases... I suggest 1 using the old jQuery Mobile alpha and then another using the beta. That would save us a lot of time and hopefully kill 2 birds with 1 stone.

[Mark Panaghiston]

After looking into this, the problem appears to be with the way jQuery Mobile uses the href="#page" links. The default skin uses the href="#" in it and as a result they conflict with the jQuery Mobile mechanism.

Change the href="#" to href="javascript:void(0)"

For example:

<a href="javascript:void(0)" class="jp-play" tabindex="1">play</a>

Or the whole skin here as a larger example:

        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div class="jp-audio">
            <div class="jp-type-single">
                <div id="jp_interface_1" class="jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:void(0)" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:void(0)" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:void(0)" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:void(0)" class="jp-mute" tabindex="1">mute</a></li>
                        <li><a href="javascript:void(0)" class="jp-unmute" tabindex="1">unmute</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                </div>
                <div id="jp_playlist_1" class="jp-playlist">
                    <ul>
                        <li>Bubble</li>
                    </ul>
                </div>
            </div>
        </div>

[David Taylor]

That was the magic to solve the problem!  Many thanks to Mark for tracking down the sneaky culprit!

I'm sure it has something to do with the way JQM scans <a> tags and intercepts normal links and replaces them with Ajax requests...

[Mark Panaghiston]

Yeah. I got to the Local, internal linked "pages" section of the docs for jQuery Mobile and thought that the # was the culprit:
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

That's great news to hear it solved the problem.