Added a search bar and button

This commit is contained in:
Kevin Midboe
2017-02-08 19:28:52 +01:00
parent e74bbd0abf
commit 8c6e142dc4

View File

@@ -4,54 +4,63 @@
<title>tmdb.org Search Displayer</title>
</head>
<body>
<input type='text' id='link_id'>
<input type='button' id='btnSearch' value='Search' onClick="search(this)"'>
<p id="display"></p>
</body>
<script type="text/javascript">
function request(id){
console.log(id);
var button = document.getElementById("btnSearch");
button.onclick = function () {
var text = document.getElementById("link_id").value;
console.log(text);
queryTMDB(text);
}
var data = "{}";
function queryTMDB(query) {
var data = "{}";
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
var display = document.getElementById("display");
var jsonObj = JSON.parse(this.responseText);
console.log(jsonObj.movies);
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
var display = document.getElementById("display");
var jsonObj = JSON.parse(this.responseText);
console.log(jsonObj.movies);
Object.keys(jsonObj.movies).forEach(function(key) {
var id = jsonObj.movies[key].id;
var title = jsonObj.movies[key].title;
var poster_path = "http://image.tmdb.org/t/p/w500"+jsonObj.movies[key].poster_path;
var node = document.createElement("li"); // Create a <li> node
var imageNode = document.createElement('img');
var textNode = document.createTextNode(title); // Create a text node
var buttonNode = document.createElement("span");
var button2Node = document.createElement("span");
buttonNode.innerHTML = '<button onclick="request('+ id +')">REQUEST</button>';
button2Node.innerHTML = '<button onclick="request('+ id +')">FORCE REQUEST</button>';
imageNode.src = poster_path;
Object.keys(jsonObj.movies).forEach(function(key) {
var id = jsonObj.movies[key].id;
var title = jsonObj.movies[key].title;
var poster_path = "http://image.tmdb.org/t/p/w500"+jsonObj.movies[key].poster_path;
var node = document.createElement("li"); // Create a <li> node
var imageNode = document.createElement('img');
var textNode = document.createTextNode(title); // Create a text node
var buttonNode = document.createElement("span");
var button2Node = document.createElement("span");
buttonNode.innerHTML = '<button onclick="request('+ id +')">REQUEST</button>';
button2Node.innerHTML = '<button onclick="request('+ id +')">FORCE REQUEST</button>';
imageNode.src = poster_path;
node.appendChild(textNode); // Append the text to <li>
node.appendChild(imageNode);
node.appendChild(buttonNode);
node.appendChild(button2Node);
node.appendChild(textNode); // Append the text to <li>
node.appendChild(imageNode);
node.appendChild(buttonNode);
node.appendChild(button2Node);
display.appendChild(node);
display.appendChild(node);
});
}
});
});
}
});
xhr.open("GET", "http://localhost:63590/api/v1/plex/request?query=star+wars");
xhr.open("GET", "http://localhost:63590/api/v1/plex/request?query="+query);
xhr.send(data);
console.log(data);
xhr.send(data);
}
</script>
</html>