From 26bb3dca8589be3dbc8cb6fa875e726c87849364 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 17:17:51 +0200
Subject: [PATCH] implementing AJAX loading for sounds as described in issue #5

---
 static/main.js       | 15 +++++++++++++--
 templates/index.html |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/static/main.js b/static/main.js
index e2af0a3..b965ee1 100644
--- a/static/main.js
+++ b/static/main.js
@@ -30,8 +30,6 @@ ready(function() {
 	var searchfield = document.querySelector("#search");
 
 	searchfield.addEventListener("keyup", function() {
-		console.log("Search!");
-
 		var buttons = document.querySelectorAll(".sound");
 
 		buttons.forEach(function(item) {
@@ -67,3 +65,16 @@ function hideSections() {
 		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;
+    }
+}
diff --git a/templates/index.html b/templates/index.html
index f65a124..9166151 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% 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 %}
 			</section>
 			<section id="youtube">