diff 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
line wrap: on
line diff
--- a/WebContent/index.jsp	Fri Dec 06 19:24:11 2013 +0000
+++ b/WebContent/index.jsp	Mon Dec 09 16:57:52 2013 +0000
@@ -4,23 +4,25 @@
         <title>Human Echolocation</title>
 
         <%
-            String distStr = request.getParameter("dist");
-            int dist = 1;
-            boolean distSet = false;
-            if(distStr!=null && distStr.length()>0)
-            {
-                dist = Integer.parseInt(distStr);
-                distSet = true;
-            }
+          //  String distStr = request.getParameter("dist");
+          //  int dist = 1;
+          //  boolean distSet = false;
+          //  if(distStr!=null && distStr.length()>0)
+          //  {
+          //      dist = Integer.parseInt(distStr);
+          //      distSet = true;
+          //  }
         %>
 
         <link rel="Stylesheet" type="text/css" media=all href="./StyleSheet.css" />
         <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
-        <link rel="script" type="text/javascript" href="script/jquery-1.10.2.min.js"/>
+
+        <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
+        <script type="text/javascript" src="script/echo.js"></script>
     </head>
 
     <body>
-        <form method="get">
+
             <div style="text-align: center">
                 <table width="760" cellpadding="0" cellspacing="0">
                     <tr>
@@ -31,42 +33,26 @@
 
                 <h1>Human Echolocation WebApp Example Page</h1>
 
-                A new hope
+                Testing...
 
                 Input parameters:
                 <br>
                 Distance:
-                <input type="text" name="dist" size="8" value="<%=dist%>" >
+                <input type="text" id="dist" "name="dist" size="8">
                 <br>
-                <input type="submit" value="Generate">
+                <input type="submit" value="Generate" id="generate">
                 <br>
+
+                <div id="ajax-loading">
+                    <img src="ajax-loader.gif" class="ajax-loader" style="display:none" /></div>
+
                 <br />
 
-                <script type="text/javascript">
-                    try {
-                        var objXHR = new XMLHttpRequest();
-                    }
-                    catch (e) {
-                        try {
-                            var objXHR = new ActiveXObject('Msxml2.XMLHTTP');
-                        }
-                        catch (e) {
-                            try {
-                                var objXHR = new ActiveXObject('Microsoft.XMLHTTP');
-                            }
-                            catch (e)
-                            {
-                                document.write('XMLHttpRequest not supported');
-                            }
-                        }
-                    }
-                    objXHR.open('GET','HumanEcho?dist=<%=dist%>&',false);
-                    objXHR.send(null);
-                    document.writeln(objXHR.responseText);
-                </script>
+                <div id="responsetext"></div>
+
                 <br>
             </div>
-        </form>
+
     </body>
 </html>