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