Question

I know you all probably thinking that on() is the solution and I hope so, however I’ve tried and can’t figure it out. I’ve got jQuery function that uses (‘audio’) to create playlist for jPlayer. The music is divided into categories and posts I want the player load songs from posts when browsing categories. so it goes like:

var songsforjplayer = [];   
    $('body').append('<div id="newsongs" style=""></div>');
    $('#newsongs').load('http://sample_post audio');

    var singlesonglist = $('audio'); //selector doesn't recognize freshly load audio so it doesnt include them inplaylist
    singlesonglist.each(function(i){
        var source = $(this).attr('src');
        songsforjplayer[i]= {
            title:  $('track',this).attr('src'),
            oga: source,
        }

        });

I’ve tried using on() with various event types – the fact is, there is no event – it should be triggered when the category page is ready but it doesn’t make the selector to catch new audio tags.

Any ideas ?

Answer 1

Everytime you load new audio, you will have to rerun this code to refresh the playlist with whatever new audio in in the page and you will have to run the code after the .load() has completed by using a completion function on the .load() method. One way to do that is like this:

var songsforjplayer;

function updatePlaylist() {
    songsforjplayer = [];
    var singlesonglist = $('audio');
    singlesonglist.each(function() {
        var source = $(this).attr('src');
        songsforjplayer.push({
            title:  $('track',this).attr('src'),
            oga: source
        });
    });
}

$('body').append('<div id="newsongs" style=""></div>');
$('#newsongs').load('http://sample_post audio', updatePlaylist);

Keep in mind the .load() is asynchronous. It takes awhile to finish and it runs in the background while your other code is running. The code right after the call to .load() runs BEFORE the .load() is completed. The ONLY way to guarantee that a piece of code runs AFTER the .load() is done is by using a completion function like I’ve shown in the code above.

I also removed an extra comma after oga: source that would be an error in older versions of IE.