[jQuery] Problem with reloading AJAX content (Flowplayer) in jqModal window
Hi,
I'm a relative newcomer to jQuery (and Javascript in general), and I'm
having a problem with content loaded via AJAX that I gather is related
to event delegation/rebinding.
I'm using jqModal to populate a modal window with html content via
AJAX. The content contains both text and a Flowplayer instance (open
source .flv player). The first time I open the modal window, both the
text and the Flowplayer movie load properly via AJAX. But each
subsequent time I open the modal window, only the text appears.
Here is the code for the original page (default.php):
<body>
<a href="#" class="jqModal">Click here for AJAX!</a>
<div id="wrapper">
<div id="ajax" class="jqmWindow">
<a id="player" class="flowplayer"></a>
</div> <!-- end #ajax -->
</div>
</body>
Here is the content loaded via AJAX (ajax.php):
<a href="#" class="jqmClose">Close</a>
<br />
<h2 class="centered">AJAX works!</h2>
<a id="player">
</a>
Here is the jQuery script:
var loadFlowplayer = function() {
$("#player").flowplayer("/swf/flowplayer-3.0.2.swf", {
clip: {
url: '/video/test.flv',
autoPlay: false
}
});
}
$(document).ready(function() {
$('#ajax').jqm({ajax: '/ajax.php', onLoad: loadFlowplayer};
});
After reading through the jQuery board for similar topics, I tried
removing the Flowplayer portion of the jQuery script (and deleting the
jqModal onLoad callback) and appending it directly to ajax.php, like
so:
<a href="#" class="jqmClose">Close</a>
<br />
<h2 class="centered">AJAX works!</h2>
<a id="player"></a>
<script type="text/javascript" charset="utf-8">
$('#player').flowplayer('/swf/flowplayer-3.0.2.swf', {
clip: {
url: '/video/test.flv',
autoPlay: false
}
});
</script>
The result was the same -- both movie player and text load fine after
the first AJAX call, each subsequent time only the text loads.
I thought that by either calling flowplayer() as a callback to the
AJAX request in the external script or by including it inline in
script tags with the remote content that I was rebinding the event to
the jQuery selector, but it seems I'm mistaken.
Any help would be much appreciated.
Cheers,
Jeff