Блог

Главная - Вопросы по программированию - Привязка события прослушивания аудио HTML5, функций jQuery .ajax() и .html()

Привязка события прослушивания аудио HTML5, функций jQuery .ajax() и .html()

#jquery #ajax #html

#jquery #ajax #HTML

Вопрос:

Я пытаюсь добиться следующего эффекта: у меня есть аудиоэлемент HTML5, использующий mediaelement.js с плейлистом. Я хотел бы активировать запрос сервера при каждом изменении трека (воспроизведение, следующий и т. Д.). Я использую событие «воспроизведения» HTML5, пока все хорошо. Я отправляю атрибут текущего аудиотега (src в моем случае) в PHP-скрипт через AJAX, и он работает нормально, но я хотел бы поместить результат HTML из meta.php в div на странице.

Вот мой JS-код:

 $(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);
        }
    });
});
});

Элементы HTML находятся непосредственно в теге body:

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

Я думаю, что мне не хватает чего-то фундаментального, я новичок в JS / jQuery. Все работает так, как задумано, за исключением того, что метод .html() ничего не делает.. Любая помощь будет оценена. Спасибо!

Комментарии:

1. Какие-либо ошибки в консоли?

2. Ваш <div> идентификатор действительно состоит из 11 символов #nowPlaying или из 10 символов nowPlaying ?

3. В консоли ничего, кроме получения 200 OK от meta.php . Идентификатор в порядке, я потратил час на его копирование и вставку 🙂

4. 11 символов! Я смущен… это был хэш в идентификаторе…. Большое вам спасибо, мой первый пост здесь был для хромой и глупой вещи!

Ответ №1:

Ваш HTML должен быть

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

вместо

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

При вызове селектора $('#nowPlaying') выбирается элемент, идентификатор nowPlaying которого равен , а не элемент с идентификатором #nowPlaying .