AJAX route validator for text strings

[ypp-sc-tools.web-live.git] / yarrg / web / pirate-route

diff --git a/yarrg/web/pirate-route b/yarrg/web/pirate-route
index a7d5eb25c2c210ba5c8d64f69929dfa23688bf80..f58d47c20f450041eb39d2b13ee3d8784b4f1442 100644 (file)
--- a/yarrg/web/pirate-route
+++ b/yarrg/web/pirate-route
@@ -66,7 +66,7 @@ foreach my $var (@vars) {
        print '<p>';
 }
 
        print '<p>';
 }
 

-db_setocean($a{'ocean'});
+db_setocean($a{Ocean});

 db_connect();
 
 </%perl>
 db_connect();
 
 </%perl>


@@ -76,9 +76,55 @@ db_connect();
 
 % if (!$a{Dropdowns}) {
 Enter route (islands, or archipelagoes, separated by commas;
 
 % if (!$a{Dropdowns}) {
 Enter route (islands, or archipelagoes, separated by commas;

- abbreviations are OK):<br>
-<input type="text" name="routestring" size=80><br>
-<div name="results"></div></br>
+ abbreviations are OK):<br/>
+
+<script type="text/javascript">
+textRoute_uri= "routetextstring?format=json"
+               + "&ocean=<% uri_escape($a{Ocean}) %>";
+
+textRoute_timeout=false;
+textRoute_request=false;
+textRoute_done='';
+textRoute_needed='';
+function textRoute_Later(){
+  window.clearTimeout(textRoute_timeout);
+  textRoute_timeout = window.setTimeout(textRoute_Needed, 500);
+}
+function textRoute_Needed(){
+  window.clearTimeout(textRoute_timeout);
+  //textRoute_element= document.getElementsByName('routestring').item(0);
+  //alert(textRoute_element.name);
+  textRoute_needed= textRoute_element.value;
+  textRoute_Request();
+}
+function textRoute_Request(){
+  if (textRoute_request || textRoute_needed==textRoute_done) return;
+  textRoute_done= textRoute_needed;
+  textRoute_request= new XMLHttpRequest();
+  uri= textRoute_uri+'&string='+encodeURIComponent(textRoute_needed);
+  textRoute_request.open('GET', uri);
+  textRoute_request.onreadystatechange= textRoute_Ready;
+  textRoute_request.send(null);
+}
+function textRoute_Ready() {
+  if (textRoute_request.readyState != 4) return;
+  if (textRoute_request.status == 200) {
+    response= textRoute_request.responseText;
+    //alert('got [[ '+response+' ]]');
+    eval('results='+response);
+    toedit= document.getElementsByName('routeresults').item(0);
+    toedit.innerHTML= results['show'];
+  }
+  textRoute_request= false;
+  textRoute_Request();
+}
+</script>
+
+<input type="text" name="routestring" size=80
+ onchange="textRoute_element= event.currentTarget; textRoute_Needed();"
+ onkeydown="textRoute_element= event.currentTarget; textRoute_Later();"><br>
+<div name="routeresults"></div><br/>
+

 % } else {
 
 <%perl>
 % } else {
 
 <%perl>


@@ -102,9 +148,9 @@ while ($row=$sth->fetchrow_arrayref) {
 <option name="none">Select island...</option>
 <% $islandlistdata %></select></td>
 %      }
 <option name="none">Select island...</option>
 <% $islandlistdata %></select></td>
 %      }

-% }

 </tr>
 </table>
 </tr>
 </table>

+% }

 
 <input type=submit name=submit value="Go">
 </form>
 
 <input type=submit name=submit value="Go">
 </form>


@@ -112,5 +158,6 @@ while ($row=$sth->fetchrow_arrayref) {
 <%init>
 use CommodsWeb;
 use HTML::Entities;
 <%init>
 use CommodsWeb;
 use HTML::Entities;

+use URI::Escape;

 
 </%init>
 
 </%init>