I have this next html document, which has to load a table, which is filled with the values I get back from a XMLHttpRequest.
when I try to run the page, it won't give anything like a table back, so if anyone sees what's the problem in this code, please help!!
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
initialiseListEvenementen();
};
initialiseListEvenementen() {
var BASE_URL = "http://localhost:8080/OnzeBuurt2/resources/";
var events = [];
//load the groups from the back-end
var request = new XMLHttpRequest();
request.open("GET", BASE_URL + "events");
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
}
function createListElementForEvent(eventIndex) {
var datum = $("<p>").text("Datum: " + events[eventIndex].datum);
var titel = $("<p>").text("Titel: " + events[eventIndex].titel);
var details = $("<p>").text("Details: " + events[eventIndex].details);
var auteur = $("<p>").text("auteur: " + events[eventIndex].auteur.naam);
var latitude = $("<p>").text("Datum: " + events[eventIndex].locatie.latitude);
var longitude = $("<p>").text("Datum: " + events[eventIndex].locatie.longitude);
return $("<li>").append(datum).append(titel).append(details).append(auteur).append(latitude).append(longitude);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
<ul id="eventList" class="lijst"></ul>
<div id="home2">
<form name="input" action="" method="get">
<a href="welkom.html"><img src="home.png" alt="Home" /></a>
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<a href="bekijken.html"><img id="btnterug" src="vorige.png" alt="Vorige" /></a>
</form>
</div>
</div>
</body>
</html>