Convert Text to Node

[DartmanX]

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;
}
};
}

 

[RobG]

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.


[...]