mgoetz/soundboard
1
0
Fork 0
forked from server/soundboard
Code Issues Pull Requests Releases Wiki Activity

implementing AJAX loading for sounds as described in issue #5

Browse Source
This commit is contained in:
Erhard 2017-08-03 17:17:51 +02:00
parent f605cdc8be
commit 26bb3dca85
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/main.js
View File

@ -30,8 +30,6 @@ ready(function() {
var searchfield = document.querySelector("#search"); var searchfield = document.querySelector("#search");
searchfield.addEventListener("keyup", function() { searchfield.addEventListener("keyup", function() {
console.log("Search!");
var buttons = document.querySelectorAll(".sound"); var buttons = document.querySelectorAll(".sound");
buttons.forEach(function(item) { buttons.forEach(function(item) {
@ -67,3 +65,16 @@ function hideSections() {
item.style.display = "none"; item.style.display = "none";
}); });
} }
function ajaxRequest(filename){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
var url = "play/" + filename;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}catch (e){
alert("Your browser broke!");
return false;
}
}

2
templates/index.html
View File

@ -38,7 +38,7 @@
<section id="sounds"> <section id="sounds">
<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div> <div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
{% for sound in sounds %} {% for sound in sounds %}
<div class="sound"><a href="{{ '/play/' + sound | urlencode }}">{{ sound.split('.', 1)[0] }}</a></div> <div class="sound"><a href="{{ '/play/' + sound | urlencode }}" onclick="ajaxRequest({{ sound | urlencode }});">{{ sound.split('.', 1)[0] }}</a></div>
{% endfor %} {% endfor %}
</section> </section>
<section id="youtube"> <section id="youtube">