f



Convert Text to Node

I am attempting to create a set of chained selectors (one <select> uses
AJAX to read values for the next <select>, and so on). My AJAX code
works fine, and returns the text of the entire <select> statement. I
have defined a separate <DIV> for each selector to be created inside
of.

However, what is returned is ONLY text. When I attempt to create second
selector based on the value of the first, the javascript console is
happy to inform me that the first element doesn't exist.

So, if I get this back from the AJAX function:

<select name="selState">
<option>Alabama</option>
<option>Arizona</option>
....
</select>

How do I convert this to an actual Element, so that is is visible as
part of the document tree?

Jason

/**
	This function generates an AJAX request to create a <select> filled
with the state names.
*/
function getStates() {
	var docname='ajax.php?action=1';
	http.open('get',docname);
	http.onreadystatechange = function() {
		if (http.readyState == 4) {
			var response = http.responseText;
			document.getElementById('stateSelect').innerHTML = response;
		}
	};
	http.send(null);

}

function getCounties() {
	if (document.getElementById('selState') == null) {
		alert('No selState node!');
	}
	var docname='ajax.php?action=1+param=' +
document.getElementById('selState').value;
	http.onreadystatechange = function() {
		if (http.readyState == 4) {
			var response = http.responseText;
			document.getElementById('countySelect').innerHTML = response;
		}
	};
}

0
10/5/2005 3:10:00 AM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

1 Replies
412 Views

Similar Articles

[PageSpeed] 28

DartmanX wrote:
> I am attempting to create a set of chained selectors (one <select> uses
> AJAX to read values for the next <select>, and so on). My AJAX code
> works fine, and returns the text of the entire <select> statement. I
> have defined a separate <DIV> for each selector to be created inside
> of.
> 
> However, what is returned is ONLY text. When I attempt to create second
> selector based on the value of the first, the javascript console is
> happy to inform me that the first element doesn't exist.
> 
> So, if I get this back from the AJAX function:

The 'X' in 'AJAX' stands for XML, but you aren't using it.  You are 
trying to build your new select using HTML and innerHTML, which is 
bound to fail.  Incidentally, ditch 'AJAX' and just call it 
XMLHttpRequest, 'cos that's what it is.

You need to parse the returned data and construct your select. Use JSON:

   <URL:http://www.crockford.com/JSON/index.html>


or get the data back as an XML file and parse that using DOM:

   <URL:http://developer.apple.com/internet/webcontent/xmlhttpreq.html>


Use the second link and  you'll end up working with IE too (I think 
your current code will only work in non-IE browsers).



[...]

> function getStates() {
> 	var docname='ajax.php?action=1';
> 	http.open('get',docname);
> 	http.onreadystatechange = function() {
> 		if (http.readyState == 4) {
> 			var response = http.responseText;
> 			document.getElementById('stateSelect').innerHTML = response;

Here is where you need to call a function to parse the response and 
generate DOM elements, innerHTML doesn't create selects and options 
very robustly, if at all.


[...]


-- 
Rob
0
RobG
10/5/2005 9:17:35 AM
Reply: