wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes selection box problem Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "selection box problem" Watch "selection box problem" New topic
Author

selection box problem

srinu reddyreddy
Greenhorn

Joined: Jan 05, 2007
Posts: 11
pls. look into this code and suggest me,how to write a function which dynamically changes the content of multiple list box when we select different options sigle list box

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/core-rt" prefix="c-rt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Generic View JSP Page</title>
<script src="prototype.js"></script>
<script src="rico.js"></script>
<script>

ProcessEditRequest = Class.create();
ProcessEditRequest.prototype = {
initialize: function() {
//alert("init called");
},
ajaxUpdate: function(ajaxResponse) {
alert("ajaxResponse.size"+ajaxResponse.childNodes.length);
var root1= ajaxResponse.childNodes[0];
alert("ajaxResponse.parameters"+root1.childNodes.length);
var root2= root1.childNodes[0];
alert("ajaxResponse.parameter"+root2.childNodes.length);
var root3= root2.childNodes[0];
alert("ajaxResponse.key-values"+root3.childNodes.length);
[SIZE="6"]var oTable = document.createElement("table");
oTable.border="1";
var trH = document.createElement("tr");

var thH1 = document.createElement("th");
var textNthH1=document.createTextNode("keys");
thH1.appendChild(textNthH1);
trH.appendChild(thH1);

var thH2=document.createElement("th");
var textNthH2=document.createTextNode("values");
thH2.appendChild(textNthH2);
trH.appendChild(thH2);
var trB = document.createElement("tr");

var tdB1 = document.createElement("td");
var list1=document.createElement("select");
list1.name="or";
list1.id="or" ;
//list1.o="populate(this)";
tdB1.appendChild(list1);
trB.appendChild(tdB1);
//var textNtdB1 = document.createTextNode(sWhat);
//tdB1.appendChild(textNtdB1);
//trB.appendChild(tdB1);

var tdB2 = document.createElement("td");
var list2=document.createElement("select");
list2.name="or2";
list2.id="or2" ;
list2.multiple=true;
//list2.onchange="populate(this)";
tdB2.appendChild(list2);
trB.appendChild(tdB2);

//var textNtdB2 = document.createTextNode(sWho);
//tdB2.appendChild(textNtdB2);
//trB.appendChild(tdB2);



oTable.appendChild(trH);
oTable.appendChild(trB);
for(var i = 0 ; i < root2.childNodes.length ; i++){

var currentChild1=root2.childNodes[i];
var currentChild=currentChild1.childNodes[0];
sKey=currentChild.firstChild.nodeValue;
alert("sKet"+sKey);
currentChild = currentChild.nextSibling;
sValue1 = currentChild.firstChild.nodeValue;

currentChild = currentChild.nextSibling;
sValue2 = currentChild.firstChild.nodeValue;

var opt1 = document.createElement("option");
opt1.value=sKey;
var textOP1 = document.createTextNode(sKey);
opt1.appendChild(textOP1);
list1.appendChild(opt1);

var opt2 = document.createElement("option");
opt2.value=sValue1;
var textOP2 = document.createTextNode(sValue1);
opt2.appendChild(textOP2);
list2.style.display="none";
list2.appendChild(opt2);

var opt3 = document.createElement("option");
opt3.value=sValue2;
var textOP3 = document.createTextNode(sValue2);
opt3.appendChild(textOP3);

list2.appendChild(opt3);


}
var divTable = document.getElementById("editDiv");
divTable.appendChild(oTable);
//alert(ajaxResponse.getAttribute("id"));
//alert(ajaxResponse.childNodes[0].nodeName);
//alert(ajaxResponse.childNodes[0].childNodes[1].nodeValue);
//alert(ajaxResponse.childNodes[0].childNodes[1].attributes.length);
//alert(ajaxResponse.childNodes[0].childNodes[1].nodeName);

//var myxml = ajaxResponse.firstChild.xml;
//alert(myxml);
//document.getElementById("editBox").value=myxml;
//document.getElementById("editDiv").innerHTML=myxml;
}
};
[/SIZE]
</script>
</head>
<body>
<div id="editDiv" >
</div>
<script>

sendAJAXRequest();

function sendAJAXRequest() {

ajaxEngine.registerRequest( 'ProcessEditRequest', 'http://localhost:8080/example/editSer');
this.ProcessEditRequest= new ProcessEditRequest();
//alert("1 called");
ajaxEngine.registerAjaxObject('ProcessEditRequest', ProcessEditRequest);
// alert("Sending AJAX request...");
ajaxEngine.sendRequest('ProcessEditRequest');
// alert("AJAX Request sent successfully");
}


</script>
</body>
</html>
regards
srinu
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You do not have to create an element.

You can have a select on the page

<select id="s1"></select>

and add options to it via new Option()



ideally I would send my values back to the server in a JSON object:

{options: [{text: "foo1", value : "bar1"},{text: "foo2", value : "bar2"},{text: "foo3", value : "bar3"}]}

with the response you would eval it:



If you od not want the select to be visible until it has values, you can set the display to none and inline.

Eric
srinu reddyreddy
Greenhorn

Joined: Jan 05, 2007
Posts: 11
i don't understand the following code, how to convert axaxresponse to JSON response ,pls. help me and what is myXMLHttp ,how to get myXMLHttp.

var myOpts = eval"'" + myXMLHttp.responseText + "'"); //the JSON response
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: selection box problem
 
Similar Threads
adding 'option' into 'select'...
How to add form fields dynamically
how to move items in between two select lists using javascript ???
need help in dyanmically adding drop down box
appendChild() is not working in IE.