Skip to content
Snippets Groups Projects
Commit dd8f4763 authored by Winnie's avatar Winnie
Browse files

Update website 

- Redone to support "any"
- incomplete
parent cedb00d7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tomcat/webapps/Trawl/index.jsp
+ 5
− 5
View file @ dd8f4763
...@@ -43,20 +43,20 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range ...@@ -43,20 +43,20 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
<section id="pickSciRanks"> <section id="pickSciRanks">
Phylum: Phylum:
<%--<select name="pickSciR" id="pickPhylum" size="1" onChange="updateSci(this)"><!--Dynamically Filled--></select>--%> <%--<select name="pickSciR" id="pickPhylum" size="1" onChange="updateSci(this)"><!--Dynamically Filled--></select>--%>
<select name="pickSciR" id="pickPhylum" size="1" onChange="updateSciR('pickClass', this)"><!--Dynamically Filled--></select> <select name="pickSciR" id="pickPhylum" size="1" onChange="updateSci('pickPhylum', this)"><!--Dynamically Filled--></select>
Class: Class:
<select name="pickSciR" id="pickClass" size="1" onChange="updateSciR('pickOrder', this)"> <select name="pickSciR" id="pickClass" size="1" onChange="updateSci('pickClass', this)">
<%--<option value="00">Arthropoda</option>--%> <%--<option value="00">Arthropoda</option>--%>
<%--<option value="01">Chordata</option>--%> <%--<option value="01">Chordata</option>--%>
<%--<option value="03">Mollusca</option>--%> <%--<option value="03">Mollusca</option>--%>
</select> </select>
Order: Order:
<select name="pickSciR" id="pickOrder" size="1" onChange="updateSciR('pickFamily', this)""><!--Dynamically Filled--></select> <select name="pickSciR" id="pickOrder" size="1" onChange="updateSci('pickOrder', this)""><!--Dynamically Filled--></select>
Family: Family:
<select name="pickSciR" id="pickFamily" size="1" onChange="updateSciR('pickGenus', this)"><!--Dynamically Filled--></select> <select name="pickSciR" id="pickFamily" size="1" onChange="updateSci('pickFamily', this)"><!--Dynamically Filled--></select>
Genus: Genus:
<select name="pickSciR" id="pickGenus" size="1" onChange="updateSciR('pickSpecies', this)"><!--Dynamically Filled--></select> <select name="pickSciR" id="pickGenus" size="1" onChange="updateSci('pickGenus', this)"><!--Dynamically Filled--></select>
Species: Species:
<select name="pickSciR" id="pickSpecies" size="1" onChange="alert("No function atm")"><!--Dynamically Filled--></select> <select name="pickSciR" id="pickSpecies" size="1" onChange="alert("No function atm")"><!--Dynamically Filled--></select>
</section> </section>
......
tomcat/webapps/Trawl/script.js
+ 143
− 50
View file @ dd8f4763
// Initialization // Initialization
function init() { function init() {
initPickPhylum(); updateSci("pickAnimalia", {value:2}); // Propagate Dropdowns on Startup
} }
// nodeList = { function populateDropdown(childTagID, nodeList, subnode){
// "taxonId":[1821,51,1065], var x, y, content="";
// "taxonName":["Chordata","Mollusca","Arthropoda"] document.getElementById("console").innerHTML += "Populating Dropdown with ... " + nodeList[subnode]+"<br>"; //TODO: Console
// }; for (var i in nodeList[subnode]["taxonName"]){
x = nodeList[subnode]["taxonId"][i];
y = nodeList[subnode]["taxonName"][i];
content += '"<option value="' + x + '">' + y + '</option>';
}
document.getElementById(childTagID).innerHTML = content;
}
function initPickPhylum(){ // This function will get the new nodelist from the server.
updateSciR("pickPhylum", {value:2}); // ParentId is the taxId of the node that holds the list of children we want.
function getNodeList(parentId){
return nodeList = {
"order":{
"taxonName":["o1n","o2n","o3n"],
"taxonId":[6,7,8]
},
"phylum":{
"taxonName":["p1n","p2n","p3n"],
"taxonId":[3,4,5]
},
"class":{
"taxonName":["c1n","c2n","c3m"],
"taxonId":[9,10,11]
},
"family":{
"taxonName":["f1n","f2n","f3n"],
"taxonId":[12,13,14]
},
"genus":{
"taxonName":["g1n","g2n","g3n"],
"taxonId":[15,16,17]
},
"species":{
"taxonName":["s1n","s2n","s4n"],
"taxonId":[18,19,20]
}
}; //TODO replace Substitude Testing JSON object
} }
// Updates a dropdown List function resolveAny(object){
// tagID = tag of dropdown that changes document.getElementById("console").innerHTML += "In | resolveAny()<br>"; //TODO: Console
// taxID = id of parent of the thing that changes return 2;
function updateSciR(tagID, object) { }
var path = 'doBioLookup.do';
var taxID = Number(object.value); function updateSci(tagID, object) {
// alert("Updating: " + tagID + "with children of: " + taxID); //TODO Remove me var taxID = object.value;
var params = { taxId: taxID};
var xhr = new XMLHttpRequest(); if (taxID == 0){
xhr.open("POST", path); taxID = resolveAny(object);
}
//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var nodeList = getNodeList(taxID); //TODO This is where you call Java
xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back) document.getElementById("console").innerHTML += "In | updateSci()<br>"; //TODO: Console
// Update the dropdown
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { while (tagID != "END"){
document.getElementById("console").innerHTML += "Retrieved: "; //TODO: Console REMOVEME switch (tagID){
document.getElementById("console").innerHTML += this.responseText + "<br>"; //TODO: Console REMOVEME case "pickAnimalia":
console.log("RETRIEVED:" + this.responseText); populateDropdown("pickPhylum", nodeList, "phylum");
var nodeList = JSON.parse(this.responseText); tagID = "pickPhylum";
document.getElementById("console").innerHTML += nodeList + "<br>"; //TODO: Console REMOVEME break;
var content = "", x, y; case "pickPhylum":
for (var i in nodeList.taxonId){ populateDropdown("pickClass", nodeList, "class");
x = nodeList.taxonId[i]; tagID = "pickClass";
y = nodeList.taxonName[i]; break;
content += '"<option value="' + x + '">' + y + '</option>';
} case "pickClass":
populateDropdown("pickOrder", nodeList, "order");
document.getElementById(tagID).innerHTML = content; tagID = "pickOrder";
} break;
else{
document.getElementById("console").innerHTML += "Error<br>"; //TODO: Console REMOVEME case "pickOrder":
} populateDropdown("pickFamily", nodeList, "family");
}; tagID = "pickFamily";
//generate JSON string break;
var jsonString= JSON.stringify(params);
case "pickFamily":
//send request to server populateDropdown("pickGenus", nodeList, "genus");
xhr.send(jsonString); // xhr.send('{taxid":"2"}'); tagID = "pickGenus";
document.getElementById("console").innerHTML += "Sent request to " + path + ": " + jsonString + "<br>"; //TODO: Console REMOVEME break;
case "pickGenus":
populateDropdown("pickSpecies", nodeList, "species");
tagID = "pickSpecies";
break;
case "pickSpecies":
console.log("All dropdowns should be loaded");
tagID = "END";
break;
default: //TODO: Remove this eventually. Shouldnt be necessary anyways.
document.getElementById("console").innerHTML += "Error: switch(tagID) failed<br>"; //TODO: Console
}
}
} }
// JQuery for Range Slider // JQuery for Range Slider
...@@ -70,4 +118,49 @@ $( function() { ...@@ -70,4 +118,49 @@ $( function() {
$( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 )) $( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
} ); } );
window.onload=init; window.onload=init;
\ No newline at end of file
// Archive
// Updates a dropdown List
// tagID = tag of dropdown that changes
// taxID = id of parent of the thing that changes
// function updateSciR(tagID, object) {
// var path = 'doBioLookup.do';
// var taxID = Number(object.value);
// // alert("Updating: " + tagID + "with children of: " + taxID); //TODO Remove me
// var params = {taxId: taxID};
// 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.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
// // Update the dropdown
// if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
// document.getElementById("console").innerHTML += "Retrieved: "; //TODO: Console REMOVEME
// document.getElementById("console").innerHTML += this.responseText + "<br>"; //TODO: Console REMOVEME
// console.log("RETRIEVED:" + this.responseText);
// var nodeList = JSON.parse(this.responseText);
// document.getElementById("console").innerHTML += nodeList + "<br>"; //TODO: Console REMOVEME
//
// var content = "", x, y;
// for (var i in nodeList.taxonId){
// x = nodeList.taxonId[i];
// y = nodeList.taxonName[i];
// content += '"<option value="' + x + '">' + y + '</option>';
// }
//
// document.getElementById(tagID).innerHTML = content;
// }
// else{
// document.getElementById("console").innerHTML += "Error<br>"; //TODO: Console REMOVEME
// }
// };
//
// var jsonString= JSON.stringify(params); //generate JSON string
// xhr.send(jsonString); //send request to server
// document.getElementById("console").innerHTML += "Sent request to " + path + ": " + jsonString + "<br>"; //TODO: Console REMOVEME
// }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment