Mercurial > hg > human-echolocation-java-webapp
comparison WebContent/index.jsp @ 27:3b092b89c92e
Using JQuery to generate the AJAX call. Added a AJAX indicator.
author | luisf <luis.figueira@eecs.qmul.ac.uk> |
---|---|
date | Mon, 09 Dec 2013 16:57:52 +0000 |
parents | 1d1122584af9 |
children | 52adafab20c1 |
comparison
equal
deleted
inserted
replaced
26:1d1122584af9 | 27:3b092b89c92e |
---|---|
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Human Echolocation</title> | 4 <title>Human Echolocation</title> |
5 | 5 |
6 <% | 6 <% |
7 String distStr = request.getParameter("dist"); | 7 // String distStr = request.getParameter("dist"); |
8 int dist = 1; | 8 // int dist = 1; |
9 boolean distSet = false; | 9 // boolean distSet = false; |
10 if(distStr!=null && distStr.length()>0) | 10 // if(distStr!=null && distStr.length()>0) |
11 { | 11 // { |
12 dist = Integer.parseInt(distStr); | 12 // dist = Integer.parseInt(distStr); |
13 distSet = true; | 13 // distSet = true; |
14 } | 14 // } |
15 %> | 15 %> |
16 | 16 |
17 <link rel="Stylesheet" type="text/css" media=all href="./StyleSheet.css" /> | 17 <link rel="Stylesheet" type="text/css" media=all href="./StyleSheet.css" /> |
18 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> | 18 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> |
19 <link rel="script" type="text/javascript" href="script/jquery-1.10.2.min.js"/> | 19 |
20 <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> | |
21 <script type="text/javascript" src="script/echo.js"></script> | |
20 </head> | 22 </head> |
21 | 23 |
22 <body> | 24 <body> |
23 <form method="get"> | 25 |
24 <div style="text-align: center"> | 26 <div style="text-align: center"> |
25 <table width="760" cellpadding="0" cellspacing="0"> | 27 <table width="760" cellpadding="0" cellspacing="0"> |
26 <tr> | 28 <tr> |
27 <td><img src="header_bg.jpg" alt="Header Image Not Found" width="779" height="72" /></td> | 29 <td><img src="header_bg.jpg" alt="Header Image Not Found" width="779" height="72" /></td> |
28 </tr> | 30 </tr> |
29 </table> | 31 </table> |
30 <br /> | 32 <br /> |
31 | 33 |
32 <h1>Human Echolocation WebApp Example Page</h1> | 34 <h1>Human Echolocation WebApp Example Page</h1> |
33 | 35 |
34 A new hope | 36 Testing... |
35 | 37 |
36 Input parameters: | 38 Input parameters: |
37 <br> | 39 <br> |
38 Distance: | 40 Distance: |
39 <input type="text" name="dist" size="8" value="<%=dist%>" > | 41 <input type="text" id="dist" "name="dist" size="8"> |
40 <br> | 42 <br> |
41 <input type="submit" value="Generate"> | 43 <input type="submit" value="Generate" id="generate"> |
42 <br> | 44 <br> |
45 | |
46 <div id="ajax-loading"> | |
47 <img src="ajax-loader.gif" class="ajax-loader" style="display:none" /></div> | |
48 | |
43 <br /> | 49 <br /> |
44 | 50 |
45 <script type="text/javascript"> | 51 <div id="responsetext"></div> |
46 try { | 52 |
47 var objXHR = new XMLHttpRequest(); | |
48 } | |
49 catch (e) { | |
50 try { | |
51 var objXHR = new ActiveXObject('Msxml2.XMLHTTP'); | |
52 } | |
53 catch (e) { | |
54 try { | |
55 var objXHR = new ActiveXObject('Microsoft.XMLHTTP'); | |
56 } | |
57 catch (e) | |
58 { | |
59 document.write('XMLHttpRequest not supported'); | |
60 } | |
61 } | |
62 } | |
63 objXHR.open('GET','HumanEcho?dist=<%=dist%>&',false); | |
64 objXHR.send(null); | |
65 document.writeln(objXHR.responseText); | |
66 </script> | |
67 <br> | 53 <br> |
68 </div> | 54 </div> |
69 </form> | 55 |
70 </body> | 56 </body> |
71 </html> | 57 </html> |
72 | 58 |