JQuery AJAX - Обновить пробел при нажатии этой кнопки

Question

Я пытался выяснить, как использовать ajax в этой простой функции.

У меня есть диапазон, отображающий количество песен, которые пользователь имеет в своем плейлисте. Это просто показывает, сколько значений существует внутри ключа localStorage.

<span id="count-songs-span"> 
    <script> 
     var countSongs = JSON.parse(localStorage.playlist).length; 
     document.write(countSongs); 
    </script> 
</span> 

Мы используем jPlayer, и у нас есть настроенный список воспроизведения. Когда вы удаляете песню из списка воспроизведения (нажав кнопку удаления), мы хотели бы обновить содержимое этого div, «count-songs-span», с новым счетчиком. Пока что он работает только при обновлении страницы, но мы хотим обновить ее с помощью ajax.

Мы добавили событие щелчка для кнопки Удалить здесь:

$('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){ 
    window.setTimeout(updatePlaylist, 500); 
}); 

updatePlaylist() выглядит следующим образом:

function updatePlaylist(){ 
     playlist = myPlaylist.playlist; 
     storage.set('playlist', playlist); 
    } 

Событие щелчок сохраняет список в LocalStorage, и это нормально , Но до этого мы хотели бы обновить переменную countSongs с помощью ajax.

У меня есть этот фрагмент с другого сайта, и я попытался адаптировать его к своему сайту, но я просто не могу заставить его работать. Это не правильный код для моего сайта.

$.ajax({ 
      type : "get", 
      dataType : "json", 
      url : ajax_object.ajaxurl, 
      data : {action: "get_media", id : id}, 
      success: function(obj) { 
       if(obj.length == 1){ 
       player.add(obj[0], true); 
       updatePlaylist(); 
       }else if(obj.length > 1){ 
       player.setPlaylist(obj); 
       player.play(0); 
       updatePlaylist(); 
       } 
      } 
     }); 

Может ли кто-нибудь помочь мне использовать ajax для обновления «count-songs-span»?

Большое спасибо, если вы можете помочь.

---

UPDATE:

Вот демо, что хранится.

Способ хранения данных списка воспроизведения:

function updatePlaylist(){ 
     playlist = myPlaylist.playlist; 
     storage.set('playlist', playlist); 
    } 

Везде мы должны хранить информацию списка воспроизведения, мы называем этот метод - updatePlaylist()

Это пример того, что хранится:

[{"title":"Mauvais Temps","artist":"Right Beat Radio","mp3":"/mp3s/MauvaisTemps.mp3"},{"title":"Line Steppers","artist":"Right Beat Radio","mp3":"/mp3s/LineSteppers.mp3"},{"title":"Try My Best","artist":"Right Beat Radio","mp3":"/mp3s/TryMyBest.mp3"},{"title":"San Ignacio","artist":"Right Beat Radio","mp3":"/mp3s/SanIgnacio.mp3"}] 

Так что, когда мы хотим, чтобы подсчитать количество песен в списке воспроизведения, мы используем этот (ключ LocalStorage называется «плейлист»:

var countSongs = JSON.parse(localStorage.playlist).length; 
document.write(countSongs); 

---

UPDATE # 2:

Скриншот:

https://rightbeatradio.com/wp-content/uploads/2015/09/Screen-Shot-2015-09-07-at-9.13.34-AM.png

Надеюсь, этот скриншот поможет. Вы можете увидеть список воспроизведения там, и выше этого, вы увидите количество песен, которые в данный момент входят в список (7 песен).

Рядом с каждой песней в списке есть кнопка удаления (x). Эта кнопка позволяет пользователю удалить песню из списка.

При нажатии на эту кнопку, эти функции огня:

//Remove Item from Playlist 
    $('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){ 
     window.setTimeout(updatePlaylist, 500); 
    }); 

// update playlist 
    function updatePlaylist(){ 
     playlist = myPlaylist.playlist; 
     storage.set('playlist', playlist); 
    } 

Где-то там, мы хотели бы также подсчитать количество элементов в LocalStorage, ключ «список воспроизведения», а также обновлять счетчик с помощью Аякс.

Вот HTML от диапазона, который подсчитывает количество песен в плейлисте:

<span id="count-songs-span"> 
    <script> 
    var countSongs = JSON.parse(localStorage.playlist).length; 
    document.write(countSongs); 
    </script> 
</span> 

Единственный раз, когда скрипт вызывается, когда мы обновляем страницу. Нам бы хотелось, чтобы этот скрипт countSongs вызывался при нажатии кнопки удаления и обновлял счетчик в этом диапазоне с помощью ajax.

Answer 1

Я понял это с помощью функции jquery .load() вместо прямого использования ajax.

Для этого требуется 3 файла.

1. Фактический HTML документ, который отображает страницу (страниц listen.php)
2. Javascript файл, который находится все функции моего jPlayer JS (demo.js)
3. HTML-документ что будет работать код, который загружается с .load() (countthesongs.html)

я выложу важную часть каждого документа, с со mments.

---

страниц listen.php (Эта оболочка будет выступать в качестве контейнера, который будет отображать количество песен, которые в данный момент в списке воспроизведения пользователей.)

<span id="count-songs-span"> 
    <script> 
    var countSongs = JSON.parse(localStorage.playlist).length; // count the number of songs that are stored in localStorage key "playlist". 
    document.write(countSongs); // print the number of songs 
    </script> 
</span> 

Когда страница первая отображается количество песен, которые находятся в списке воспроизведения, будет подсчитано и отображено пользователю внутри диапазона, называемого «count-songs-span».

---

demo.js (Эти функции jPlayer, которые делают тяжелую работу.)

// Function to store the playlist in LocalStorage 
    function updatePlaylist() { 
     playlist = myPlaylist.playlist; // define playlist variable 
     storage.set('playlist', playlist); // store the playlist in localStorage as "playlist" 
    } 

    // Function to count the number of songs and print to the container 
    function countTheSongs() { 
    $("#count-songs-span").load("/js/jPlayer/countthesongs.html", function() { 
     var theDiv = document.getElementById('count-songs-span'); // Assign the count-songs-span container we discussed earlier to a variable called theDiv 
     theDiv.innerHTML = theDiv.innerHTML + countSongs; // Print the results of countthesongs.html using jquery .load() function 
     }); 
    } 

    // Function to remove an item from playlist 
    $('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){ 
     window.setTimeout(updatePlaylist, 500); // Store the playlist in localStorage with new number of songs, on a delay 
     window.setTimeout(countTheSongs, 550); // Display the number of songs in the count-songs-span container 
    }); 

---

countthesongs.html (Это HTML-файл, который бежит короткий скрипт для подсчета количества песен в списке воспроизведения.)

<script> 
    var countSongs = JSON.parse(localStorage.playlist).length; 
</script> 

---

Таким образом, чтобы смысл этих 3-х документов, вот что происходит:

1. Пользователь удаляет песню из списка воспроизведения, нажав на кнопку удалить .
2. функции для удаления элемента из списка воспроизведения обжигают, который сохраняет новое количество элементов в LocalStorage (updatePlaylist()), затем рассчитывает и печатает, что новый номер в это контейнер на странице (countTheSongs ()).

Используя функцию .load(), мы можем отображать количество песен в списке воспроизведения, поскольку пользователь удаляет элементы без перезагрузки страницы так же, как если бы мы использовали ajax.

Надеюсь, это поможет кому-то. Извините, если это немного запутанно.