By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,445 Members | 3,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,445 IT Pros & Developers. It's quick & easy.

unable to select a value in DIV tag

P: 12
Hi All,
I have written a AutoSuggest in jsp and am using javascript to call the strut page which calls the database and returns me the xml back.

On the html page i have a text box where i enter the name of the city and I have a DIV tag which I populate with the results.
Now my problem is that, after I get the results back I am not able to select a value from the DIV tag.

Here is the complete jsp code.

[HTML]<html>
<head>
<link style><a href="newCascadeStyleSheet.css"></a>
<script language="javascript">


/*
* Returns an new XMLHttpRequest object, or false if the browser
* doesn't support it
*/
var availableSelectList;
function newXMLHttpRequest() {

var xmlreq = false;

// Create XMLHttpRequest object in non-Microsoft browsers
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();

} else if (window.ActiveXObject) {

try {
// Try to create XMLHttpRequest in later versions
// of Internet Explorer

xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

// Failed to create required ActiveXObject

try {
// Try version supported by older versions
// of Internet Explorer

xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {
// Unable to create an XMLHttpRequest by any means
xmlreq = false;
}
}
}

return xmlreq;
}

/*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes it XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {

// Return an anonymous function that listens to the XMLHttpRequest instance
return function () {

// If the request's status is "complete"
if (req.readyState == 4) {

// Check that we received a successful response from the server
if (req.status == 200) {
// Pass the XML payload of the response to the handler function.
responseXmlHandler(req.responseXML);
} else {

// An HTTP problem has occurred
alert("HTTP error "+req.status+": "+req.statusText);
}
}
}
}

function search(searchKey) {
var form = document.forms[0];
var keyValue = document.getElementById("getCities").value;

keyValue = keyValue.replace(/^\s*|\s*$/g,"");
if (keyValue.length > 1)
{
availableSelectList = document.getElementById("searchResult");
var req = newXMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req, update);
req.open("POST","<%=request.getContextPath()%>/searchCity.do", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("getCities="+keyValue);
}
}


function update(cartXML)
{
var countries = cartXML.getElementsByTagName("cities")[0];
//availableSelectList.options.length = 0;
var country = countries.getElementsByTagName("city");
availableSelectList.innerHTML = '';
for (var i = 0; i < country.length ; i++)
{
ndValue = country[i].firstChild.nodeValue;
availableSelectList.innerHTML += ndValue +"<BR>\n";
}
}

</script>
</head>
<body>
<form action="/searchCity" id="searchByCityForm">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td ><B>Event Title</b></td>
</tr>
<tr>
<td class="promo">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td valign="top">
<input type="textbox" id="getCities" size="20" onKeyDown="search(this);" style="width:300px;" autocomplete="off" >
<div id="searchResult" name="searchResult" style="z-index: 1; left: 5px; top: 50px; width: 300px;
height: 370px; background-color:#003366; layer-background-color:#003366;"></div>

</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>[/HTML]


In the searchResult div section, which is populated from availableSelectList, I cannot do a select one value ...can anyone suggest something??

Let me know if you need more info on how the jsp page looks in the browser
Jan 3 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
How do you want to select the value? Using a dropdown select element? If so, you'll need to create it.
Jan 4 '08 #2

P: 12
Can you give an example code to show me ?
Jan 5 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You can create a select element with:
Expand|Select|Wrap|Line Numbers
  1. var selObj = document.createElement("select");
You'll need to append it to the body or div using appendChild. To append options to it:
Expand|Select|Wrap|Line Numbers
  1. var opt = document.createElement('option');
  2. opt.text = theTextToBeDisplayed;
  3. opt.value = theValue;
  4. try {
  5.   selObj.add(opt, null); // standards compliant way
  6. } catch(exc) {
  7.   selObj.add(opt); // for IE only
  8. }
Jan 5 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.