commit
60d0b76e13
3 changed files with 126 additions and 0 deletions
Split View
Diff Options
-
+3 -0.gitignore
-
+27 -0dvb-app/index.html
-
+96 -0dvb-app/scripts/haltestellen.js
+ 3
- 0
.gitignore
View File
| @ -0,0 +1,3 @@ | |||
| .DS_Store | |||
| *.swp | |||
| *.*#* | |||
+ 27
- 0
dvb-app/index.html
View File
| @ -0,0 +1,27 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <title>DVB Abfahrtsmonitor</title> | |||
| </head> | |||
| <body> | |||
| <form action="" method="get" id="search-form"> | |||
| <div class="section"> | |||
| <label for="q">Haltestelle</label> | |||
| <input type="search" id="q" name="q" required placeholder="Haltestelle eingeben"> | |||
| </div> | |||
| <div class="button-group"> | |||
| <button type="submit" id="btn-search">Suche</button> | |||
| </div> | |||
| </form> | |||
| <div id="output"></div> | |||
| <script src="scripts/haltestellen.js"></script> | |||
| </body> | |||
| </html> | |||
+ 96
- 0
dvb-app/scripts/haltestellen.js
View File
| @ -0,0 +1,96 @@ | |||
| /** | |||
| * Created with JetBrains WebStorm. | |||
| * User: torstenmeissner | |||
| * Date: 24.02.13 | |||
| * Time: 22:38 | |||
| * To change this template use File | Settings | File Templates. | |||
| */ | |||
| // server url | |||
| var serverUrl = "http://widgets.vvo-online.de/abfahrtsmonitor/"; | |||
| // xmlhttp object function | |||
| function getHTTPObject() { | |||
| console.log("xml http object function"); | |||
| var xhr; | |||
| if(window.XMLHttpRequest) { | |||
| xhr = new XMLHttpRequest(); | |||
| } else if(window.ActiveXObject) { | |||
| xhr = new ActiveXObject("Msxml2.XMLHTTP"); | |||
| } | |||
| return xhr; | |||
| } | |||
| // ajax call function | |||
| function ajaxCall(dataUrl, outputElement, callback) { | |||
| console.log("ajax function"); | |||
| // get the xmlhttp object which is supported | |||
| var request = getHTTPObject(); | |||
| outputElement.innerHTML = "Lade Daten ..."; | |||
| request.onreadystatechange = function() { | |||
| if(request.readyState === 4 && request.status === 200) { | |||
| //save ajax response | |||
| var response = decodeHTML(request.responseText); | |||
| // check if callback is a function | |||
| if(typeof callback === "function") { | |||
| callback(response); | |||
| } | |||
| } | |||
| }; | |||
| request.open("get", dataUrl, true); | |||
| request.send(null); | |||
| } | |||
| // wrap all in anonymous function to get out of global scope | |||
| (function() { | |||
| console.log("anonymous function"); | |||
| // get the search form | |||
| var searchForm = document.getElementById("search-form"); | |||
| // haltestelle object | |||
| var haltestelle = { | |||
| getInfo : function(event) { | |||
| console.log("getInfo function"); | |||
| // prevent submit default behaviour | |||
| event.preventDefault(); | |||
| // get output area | |||
| var target = document.getElementById("output"); | |||
| var hstName = document.getElementById("q").value; | |||
| var hstUrl = serverUrl + "Abfahrten.do?ort=dresden&hst=" + hstName; | |||
| ajaxCall(hstUrl, target, function(data) { | |||
| target.innerHTML = ""; | |||
| target.innerHTML = "<p>" + data + "</p>"; | |||
| }); | |||
| } | |||
| }; | |||
| //event listeners | |||
| searchForm.addEventListener("submit", haltestelle.getInfo, false); | |||
| })(); // end of anonymous function | |||