jPlayer + Bootstrap Modal - DOM Issues

Question

I'm trying to get a Bootstrap modal to load via ajax some html that creates a modal. This html will have jPlayer in it.

I absolutely cannot get the buttons to work for the audio in the modal no matter what I try.

Here's how I'm loading the modal:

$(document).ready(function() {
    $(".createmodal").click(function(){
        $('<div class="modal hide fade"> ..modal html.. </div>').modal();
    });
});                                      

​

Here's the example in jsfiddle -- I skipped the ajax and just loaded the html straight into the modal creation.

I've tried using jquery's .load method.

JSFiddle: http://jsfiddle.net/R5UDn/

Edit: I've tried putting the jplayer initialization in the modal code... the audio fires if I use autoplay, but the controls do not work.

Answer 1

I redid your code as an AJAX call in Plunker, and it seems to work for me (Chrome, FF):

Plunker

I made it so the body of the page now includes a modal directly and loads an html AJAX response (modal-jplayer.html) into the .modal-body via the data-remote attribute. The script to activate the jPlayer is appended to the modal-jplayer.html.

HTML

<a class="btn" data-target="#myModal" data-remote="modal-jplayer.html" data-toggle="modal">Launch Modal</a>
<div id="myModal" class="modal hide fade">
  <div class="modal-container step-1">
    <div class="modal-header icon">
      <button type="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button>
      <h4></h4>
    </div>
    <div class="modal-body">
    </div>
  </div>
</div>

modal-jplayer.html

<div id="jquery_jplayer_1"class="jp-jplayer"></div>
<div id="jp_container_1"class="jp-audio">
   ...
</div>
<script>
  $("#jquery_jplayer_1").jPlayer({
    ready: function(event) {
      $(this).jPlayer("setMedia", {
        mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
        oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
      });
    },
    swfPath: "http://www.jplayer.org/2.1.0/js",
    supplied: "mp3, oga"
  });
</script>

I don't really know how that compares to what you have in your actual development code - I just did it the way I might do it.

Otherwise, something that might be causing an issue could be the auto-focus which the Modal plugin employs. That can be disabled rather simply:

$('body').on('shown','.modal', function() {
  $(document).off('focusin.modal')
});

But like I said, as of now, it works for me in the Plunker demo without having to use this workaround.

---

_{Just a recommendation for future posts: If you're using AJAX then please take the time to prepare a comparable AJAX example in either JSFiddle or Plunker, or whatever you prefer. JSFiddle supports AJAX via GitHub Gists. Personally I prefer Plunker for anything AJAX because it supports multiple files directly in the app.}