Binding HTML5 audio listening event, jQuery .ajax() and .html() functions

Question

I am trying to achieve the following effect: I have an HTML5 audio element using mediaelement.js with a playlist. I would like to activate a server query on every change of track (play, next etc.). I am using the HTML5 "playing" event, so far so good. I am sending an attribute of the current audio tag (src in my case) to a PHP script via AJAX and it is working ok, but I would like to put the HTML result from meta.php into a div in the page.

Here is my JS code:

$(document).ready(function() {
$("audio#mejs").on('playing',function(){
    var source = $('#mejs').attr('src');
    $.ajax({
        url: "meta.php",
        type: "GET",
        data: "a=" + source,
        dataType: 'html',
        success: function(data) {
            $('#nowPlaying').html(data);
            alert(data);
        }
    });
});
});

The HTML elements are directly in the body tag:

<audio id="mejs" type="audio/mp3" width="600" height="64" src="http://"></audio>
<div id="#nowPlaying"></div>

I think I am missing something fundamental, I am quite new to JS/jQuery. Everything is working as intended except the .html() method does nothing.. Any help would be appreciated. Thank you!

Is your <div> id really the 11-character sequence #nowPlaying, or is it the 10-character sequence nowPlaying? — apsillers
Nothing in the console except GET 200 OK from the meta.php. The ID is OK, I've spent an hour copying and pasting it :) — bolter
11 characters! I am embarrassed... it was the hash in the ID.... Thank you very much, my first post here was for a lame and stupid thing! — bolter

apsillers apsillers · Accepted Answer · 2014-06-29T20:44:33

Your HTML should be

<div id="nowPlaying"></div>

instead of

<div id="#nowPlaying"></div>

The selector invocation $('#nowPlaying') selects the element whose id is nowPlaying, not one with an id of #nowPlaying.

Binding HTML5 audio listening event, jQuery .ajax() and .html() functions

1 Answers