AJAX dynamic playlist won't play the song

Question

I am making a Music player for my web app. After user upload some mp3 file to the server the playlist will be generate automatically via AJAX call to the database. I found a good simple jquery plugin music player here

It works perfect if I include the file reference manually in my HTML like this one :

<div id="playlist">
                <div href="./media/Maria (Extended remix) - Blondie .mp3" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">02:06</div>
                <div class="btn play"></div>
                <div class="title"><b>Blondie</b> - Maria</div>
            </div>
            <div class="player inactive"></div>
        </div>

But it's not the solution for me because there's hundred .mp3 files in the server. So, i decided to generate the file list via ajax call and put it into the #playlist with jquery. Like this one :

function refresh_song_list()
{
    $.ajax({
        type: 'GET',
        url: 'profile/get_song',
        dataType: 'json',
        success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div
        }
    }); 
}

Then, to make the playlist playable , I put this code (according to the plugin instruction) in the jquery document ready scope:

$("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );   

The problem is, The playlist load successfully with play button on each item, but it won't play the song. Is there any mistake in my code? please help me guys. Thanks

Answer 1

My guess is that because you are populating the playlist with ajax, the .playlist() initializer does not see those elements because they do not exist yet (at the document ready scope as you state).

Instead, call .playlist() in your ajax callback:

       success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div

            $("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );
        }

Answer 2

Try

function refresh_song_list()
{
    $.ajax({
        type: 'GET',
        url: 'profile/get_song',
        dataType: 'json',
        success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div
            bindPlaylist();

        }
    }); 
}



function bindPlaylist()
{

$("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );

}