I'm trying to populate form fields using an asynchronous request in
the onblur property of the first text-field on the form. Here's some
code that illustrates what I'm trying to do; it does not work at all
on Firefox and does not work reliably on IE 7:
function doLookup() {
var k = document.forms.f.k.value;
document.forms.f.k2.value = k;
var req = createXMLHttpRequest();
req.onreadystatechange = function () {
if(req.readyState == 4) {
var data = eval('('+req.responseText+')').data;
var sel = document.forms.f.kv;
/* erase old options */
for (var i=sel.length-1; i>=0; i--) {
sel.options[i] = null;
}
/* add new options */
for (var k in data) {
sel.options[sel.length] = new Option(k, data[k]);
}
}
}
req.open("POST", "data/"+k+".json", false, null, null);
req.send(null);
}
With Firefox, I can see the server responding to GET or POST requests
(depending on what I use in the req.open() call) in its log, but
nothing happens in the client. I have the "JavaScript error console"
open, and don't get any messages.
With IE, entering a value that leads to a data-file looking like
{ data: {
"ff" : "ff"
}} <-- EOF here; that is, no line-terminator on the last line
causes the "there is an error on the page" icon to appear in the
status-bar and nothing happens, but if the data-file looks like
{ data: {
"ff" : "ff"
}}
<-- EOF out here; that is, the last line is a blank line
it does work.
It may be that most users of my application will have IE 6; but I
like the Firefox error-messages better when it gives them, and I'd
like to support multiple browsers. Are the following things easy to
do on IE6+, Firefox and Safari, in an onblur handler, using data from
an Ajax response: ?
- Populate input type=text fields;
- Add options to a select element;
- Change which option is selected in a select element;
- Change the plain text inside a div element
--
DLL
