Updates index, script, style

- Adapted to new way of sending data between java and the site

tomcat/webapps/Trawl/index.jsp

@@ -34,11 +34,11 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
     </header>
 
     <span id="menu-bar">
-        <a href="index.html">Item 1</a> |
-        <a href="index.html" target="_blank">Item 2</a>
+        <a href="index.html">About</a> |
+        <a href="index.html" target="_blank">Gitlab/Github</a>
     </span>
 
-    <section id="options">
+    <section id="formWrapper">
         <section id="pickSciRanks">
             <%--<form method="POST" action="doBioLookup.do"> <!--.do extension is not necessary. This field is the servlet's url in web.xml-->--%>
             <form>
@@ -88,8 +88,8 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
         <section id="outputIn">
             <form>
                 <!--TODO: Set Default button entered-->
-                <input type="radio" name="gender" value="male"> Map
-                <input type="radio" name="gender" value="female"> Histogram
+                <input type="radio" value="map"> Map
+                <input type="radio" value="histogram"> Histogram
                 <input type="submit">
             </form>
             <form method="POST" action=""">
@@ -101,6 +101,7 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
     <section id="outputWrapper">
         <section id="outputDetails">Stuff like population count, entries found, etc. go here</section>
         <section id="outputBox">Map, Histogram Box</section>
+        <section id="console">~~~ PSEUDO-CONSOLE ~~~<br></section>
     </section>
 
     <%--<footer>--%>

tomcat/webapps/Trawl/script.js

+// Initialization
 function init() {
-    initPhylum();
+    initPhylum()
 }
 
-// Returns list of animalia children == all phylums
-function initPhylum(){
-    // alert("initPhylum function");
-    var parentId = 2;   //Animalia AphiaID = 2
+// Post Function
+// Used by getChildren(id)
+function post(path, params) {
+    document.getElementById("console").innerHTML += "In | post()<br>"; //TODO: Console REMOVEME
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", path);
+
+    //Send the proper header information along with the request
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    // xhr.setRequestHeader("Content-type", "application/json");
 
-    // TODO Request
+    xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
+            document.getElementById("console").innerHTML += "In | onreadystatechange ... "; //TODO: Console REMOVEME
+            //this is where we can update the various dropdowns
+            if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
+                document.getElementById("console").innerHTML += "Retrieved:<br>"; //TODO: Console REMOVEME
+                document.getElementById("console").innerHTML += xhr.responseText + "<br>"; //TODO: Console REMOVEME
+                console.log("RETRIEVED:")
+                console.log(this.responseText); // Have to go to dev console to print this. Won't show up on pseudo-console.
+                // return this.responseText;
+            }
+            else{
+                document.getElementById("console").innerHTML += "Error<br>"; //TODO: Console REMOVEME
+            }
+    };
+    //generate JSON string
+    var jsonString= JSON.stringify(params);
+    console.log(jsonString);
+    //send request to server
+    xhr.send(jsonString);
+    // xhr.send('{taxid":"2"}');
+    document.getElementById("console").innerHTML += "Sent request to " + path + ": "  + jsonString + "<br>"; //TODO: Console REMOVEME
+}
+
+// Get Children ranks of Parent ranks from Java
+function getChildren(id) {
+    document.getElementById("console").innerHTML += "In | getChildren()<br>"; //TODO: Console REMOVEME
     var nodeList;
     // nodeList = {
-    //     "taxonId":[1065,1821,51],
-    //     "taxonName":["Arthropoda", "Chordata", "Mollusca"]
+    //     "taxonId":[1821,51,1065],
+    //     "taxonName":["Chordata","Mollusca","Arthropoda"]
     // };
-    nodeList = {
-        "taxonId":[1821,51,1065],
-        "taxonName":["Chordata","Mollusca","Arthropoda"]
-    };
+    nodeList = post('doBioLookup.do', { taxid: id});    // {taxid: intID}
+    return nodeList;
+}
 
+// Creates Phylum dropdown choices on page load
+function initPhylum(){
+    // alert("initPhylum function");
+    document.getElementById("console").innerHTML += "init phylum<br>"; //TODO: Console REMOVEME
+    var parentId = 2;   //Animalia AphiaID = 2
+    var nodeList = getChildren(parentId);
     var content = "", x, y;
 
     for (i in nodeList.taxonId){
@@ -27,18 +64,13 @@ function initPhylum(){
     }
 
     document.getElementById("pickPhylum").innerHTML = content;
-
-    // {taxid: intID}
-
 }
 
 function changedSciR(rank){
     // var changedRank = document.getElementsByName()
 }
 
-
-
-// For Range Slider
+// JQuery for Range Slider
 $( function() {
     $( "#slider-range" ).slider({
         range: true,

tomcat/webapps/Trawl/style.css

@@ -27,7 +27,7 @@ a:hover{
     color: #004878;
 }
 
-#options{
+#formWrapper{
     border: 1px solid;
 }