Mercurial > hg > human-echolocation-java-webapp

changeset 27:3b092b89c92e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
files WebContent/StyleSheet.css WebContent/WEB-INF/web.xml WebContent/ajax-loader.gif WebContent/index.jsp WebContent/script/echo.js
diffstat 5 files changed, 53 insertions(+), 37 deletions(-) [+]
line wrap: on
line diff
--- a/WebContent/StyleSheet.css	Fri Dec 06 19:24:11 2013 +0000
+++ b/WebContent/StyleSheet.css	Mon Dec 09 16:57:52 2013 +0000
@@ -16,3 +16,4 @@
 	font-size: 22pt;
 	color: black;
 }
+
--- a/WebContent/WEB-INF/web.xml	Fri Dec 06 19:24:11 2013 +0000
+++ b/WebContent/WEB-INF/web.xml	Mon Dec 09 16:57:52 2013 +0000
@@ -11,7 +11,7 @@
 
     <servlet-mapping>
         <servlet-name>HumanEchoServlet</servlet-name>
-        <url-pattern>/HumanEcho</url-pattern>
+        <url-pattern>/HumanEcho/*</url-pattern>
     </servlet-mapping>
 </web-app>
 
Binary file WebContent/ajax-loader.gif has changed
--- 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>
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/WebContent/script/echo.js	Mon Dec 09 16:57:52 2013 +0000
@@ -0,0 +1,29 @@
+// humanecho.js
+
+$(document).bind("ajaxSend", function(){
+   $(".ajax-loader").show();
+ }).bind("ajaxComplete", function(){
+   $(".ajax-loader").hide();
+ });
+
+$(document).ready(function(){
+    $("#generate").click(function(){
+
+        alert("Gonna call..");
+
+        var distance = $("#dist").val();
+        console.log(distance);
+
+        $.get('HumanEcho',
+            { dist: distance },
+            function(responseText) {
+                $('#responsetext').text('OK');
+            });
+    });
+
+
+
+
+});
+
+