Wrote front-end for Hello Location; Made Javascript generate request table

This commit is contained in:
alisolarflare 2017-06-14 23:14:57 -07:00
parent c19620348a
commit 6a81961f59
2 changed files with 23 additions and 54 deletions

View file

@ -3,49 +3,30 @@ https://www.youtube.com/watch?v=h0ZUpPiV1ac
*/
window.onload = function(){
$.get("./data/players.json", function(data){
console.log(data);
document.getElementById('atom-players').innerHTML = JSON.stringify(data);
});
$.get("https://server.figytuna.com:8080/ali/hello/world", function(data){
document.getElementById('hello-world').innerHTML = data;
});
const serverPath = "https://server.figytuna.com:8080/ali/hello/";
const pages = [
"world",
"data",
"players",
"location"
]
//Generate HTML table
for (pagePath in pages){
//Adds new table row based on the data request
const $newTableRow = $("<tr>"
+ "<td>Hello " + pagePath + "</td>"
+ "<td id=\"hello-"+ pagePath + "\"></td>"
+ "</tr>");
$.get("https://server.figytuna.com:8080/ali/hello/data", function(data){
document.getElementById('hello-data').innerHTML = data;
});
$.get("https://server.figytuna.com:8080/ali/hello/players", function(data){
document.getElementById('hello-players').innerHTML = data;
});
/*
let http = new XMLHttpRequest();
http.onreadystatechange = function(){
const finalState = 4;
const idealStatus = 200;
if(http.readyState == finalState && http.status == idealStatus){
console.log(JSON.parse(http.response));
//Appends new table row to table
$("#hello-table").after($newTableRow);
}
//Gets Table data from server
for (pagePath in pages){
$.get(serverPath + pagePath, function(data){
document.getElementById("hello-" + pagePath).innerHTML = data;
});
}
const method = "GET";
const filepath = "data/players.json";
const isASYNC = true;
http.open(method, filepath, isASYNC);
http.send();
*/
}
/* READY STATES
0 - Request not initialized
1 - Request has been set up
2 - Request has been sent
3 - Request is in process
4 - Request is complete
*/

View file

@ -19,23 +19,11 @@
<h2>ButtonPresents Stuff</h2>
<table>
<table id="hello-table">
<tr>
<th>Data Requests</th>
<th>Data Responses</th>
</tr>
<tr>
<td>Hello World</td>
<td id="hello-world"></td>
</tr>
<tr>
<td>Hello Data</td>
<td id="hello-data"></td>
</tr>
<tr>
<td>Hello Players</td>
<td id= "hello-players"></td>
</tr>
</table>
</body>
</html>