jPlayer run a script when it starts playing a song

Question

I am trying to convince Jplayer to run an outside script (either via .get or .ajax from jQuery) to populate a different area other than the player currently is located with the current song information..(hopefully that makes sense...) The problem I am having is once it loads the info to the div, it will no longer play the music. If I remove the success: from the AJAX call, or the function(data){} on a .get call it (obviously) pulls the script but does nothing with it, and the music plays... as soon as I tell it to do something, the music no longer loads..

Here is what I added to the play function...

$.ajax({
  url: "add_song.php",
  success: function(html){
  $("#hidden").append(html);
  }
});

so it looks like:

play: function(time) {
    time = (typeof time === "number") ? time : NaN; // Remove jQuery event from click handler

    if(this.status.srcSet) {
        if(this.html.active) {
            this._html_play(time);
        } else if(this.flash.active) {
          this._flash_play(time);
        }           
    } else {
        this._urlNotSetError("play");
    }
    /* branning */          
    $(".slide_new").addClass("slide_old");
    $(".slide_new").removeClass("slide_new");
    /* add new slide */
    $.ajax({
        url: "add_song.php",
        success: function(html){
            $("#hidden").append(html);
        }
    });
    /* end branning edits */    
},

I have tried moving it around but always get the same result with both .ajax and .get. Is there an easier way to accomplish this, or some obvious mistake I made?

Here is the dev site we currently have it on: http://www.branninggroup.com/backbeat/media_player/

Thanks for any help!

Answer 1

I am not sure what the protocol is for answering your own question but I figured out a solution and wanted to post it up.

I removed everything I had from above and added the following to the jplayer call:

$("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) { 
    $("li.new").removeClass("new");
    $(".slide_new").addClass("slide_old");
    $(".slide_new").removeClass("slide_new");
    $("ul.slider").prepend('<li class="new"></li>');
    $("li.new").load('add_song.php?img='+escape($('#jp_poster_0').attr("src"))+'&name='+escape($('a.jp-playlist-current').html()));
});

and now everything is playing AND loading correctly