Jquery Jplayer doesn't trigger the setMedia function on the 1st call of the function in my page

Question

I have a list of songs displayed in my page and i can't find why it's not working on the first song of the page. The code is really simple and i've double or triple checked everything. Even the errorAlerts isn't getting any error. I have like 20 elements in the page, i've already added a wrong path for the song and in this case i have an error displayed but i know the current code is working for all the elements except the first one for an unknown reason is is not triggering the "ready: function (event)"

Here is the code :

<?php

    $count = 1;
    foreach( $all_songs as $songs){

?>
    <script type="text/javascript">
        $(document).ready(function(){

            $("#jquery_jplayer_<?php echo($count);?>").jPlayer({

            ready: function (event) {

                $(this).jPlayer("setMedia", {

                    m4a:"uploads/audio/<?php echo($songs->audio_filename);?>"//,

                    //mp3:"uploads/audio/<?php //echo($songs->audio_filename);?>",

                    //oga:"uploads/audio/<?php //echo($songs->audio_filename);?>"
                });

            },


            play: function() {
                $(this).jPlayer("pauseOthers");
            }, 

            swfPath: "js",

            supplied: "m4a, mp3, oga",

            cssSelectorAncestor: "#jp_container_<?php echo($count);?>",

            wmode: "window",

            smoothPlayBar: true,

            errorAlerts: true,

        keyEnabled: true

        });

    });
</script>
<?php
        $count++;
    }
?>

Thanks a lot for helping me.

Alex

Answer 1

Hmmm, you have javascript code inside of a php foreach, that means that you have more than one jplayer instance that could make a conflict with the interaction. My suggestion is to create a playlist javascript array containing all the songs, by this way you avoid to create a foreach loop