javascript - GET request into table -
i have next html document, has load table, filled values xmlhttprequest.
when try run page, won't give table back, if sees what's problem in 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 groups 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 = 0; < 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>
after couple of hours of work, found solution. hope can of you:
<!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"> var url = "http://localhost:8080/onzebuurt2/resources/events"; var events = []; $(document).ready(function() { var request = new xmlhttprequest(); request.open("get", url); request.onload = function() { if(request.status === 200) { events = json.parse(request.responsetext); for(var = 0; < events.length; i++) { $("#eventlist").append(createlistelementforevent(i)); } if(events.length > 0) { $("#eventlist").listview('refresh'); } else { console.log("error"); } } else { alert("fout gegaan"); console.log("error loading groups: " + request.status + " - "+ request.statustext); } }; request.send(null); }); function createlistelementforevent(eventindex) { var datum = $("<td>").text(events[eventindex].datum); var titel = $("<td>").text(events[eventindex].titel + " - " + events[eventindex].details); var auteur = $("<td>").text(events[eventindex].auteur.naam); return $("<tr>").append(datum).append(titel).append(auteur); } </script> </head> <body class="body2"> <div class="gridcontainer clearfix"> <div class="header2"> <center> evenementen </center> </div> </div> <div class="tabelevents"> <table id="eventlist" class="tabel" border="1"> <tr><th>datum</th><th>titel</th><th>auteur</th></tr> </table> </div> <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> </body> </html>
Comments
Post a Comment