Populating a SELECT list with HTTPRequest

I've been building a series of SELECT lists that are populated
dynamically using HTTPRequest. Things are going pretty well, and I've
got the whole thing working flawlessly in Mozilla/Firebird.
Unfortunately, Internet Explorer doesn't quite work as expected -- it
gives me an "invalid argument" error that I don't know how to fix.

Here's the entire script, with form, annotated to explain what I'm
doing and where the problem is occurring. I would link the URL where
the form resides on the server, but cannot due to security concerns.

Thing is, I just don't know what to do to fix it. In a nutshell, when
you click on the first set of radio buttons, nothing happens. If you
click again, it then populates the first SELECT list in the first row.
It SHOULD populate the list on the first click. Additionally, if you
skip the first row and go to the second, and click a radio button, it
populates the SELECT in the FIRST row, rather than the second.

If anyone can assist me with this I would be really grateful. I've
managed to piece this together today despite not really knowing much
about Javascript, but I've hit the wall with this error. Thanks!

-Bob

-------------------------
<html>
<script>
var xmlDoc = null ;
var c = '';
var d = '';
var o = '';
var m = '';
var z = '';
var y = '';

function loadBrands(c,d) {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc.onreadystatechange = processBrands ;

else {
xmlDoc = new XMLHttpRequest();
xmlDoc.onload = processBrands ;
}
xmlDoc.open( "GET", "getbrands.php?cond="+c, true );
xmlDoc.send( null );
document.foo.condselect.value = c; // inserting the value of c into a
text form element so I can reference it later
document.foo.brandselect.value = 'brands'+d; // inserting 'brands' +
the value of d into a text form element so I can reference it later
}

function processBrands() {
if ( xmlDoc.readyState != 4 ) return ;
delX= "\n";
delY= ",";
valArray = xmlDoc.responseText.split(delX);
d = document.foo.brandselect.value; // getting that first value from
the text element below
document.getElementById(d).options.length = 0; // this
is where IE tells me the error is occurring, at the 'getElementById(d)'
position

for (var i=0; i <= valArray.length; i++ ) {
pairArray = valArray[i].split(delY);
document.getElementById(d).options[i] = new Option(pairArray[1],
pairArray[0]);
}
}

function loadModels(m,z,y) {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc2 = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc2.onreadystatechange = processModels ;
}
else {
xmlDoc2 = new XMLHttpRequest();
xmlDoc2.onload = processModels ;
}
alert('getmodels.php?model='+m+'&cond='+z);
xmlDoc2.open( "GET", "getmodels.php?model="+m+"&cond="+z, true
);
xmlDoc2.send( null );
document.foo.modelselect.value = 'models'+y;
}

function processModels() {
if ( xmlDoc2.readyState != 4 ) return ;
delX= "\n";
delY= ",";
valArray2 = xmlDoc2.responseText.split(delX);
e = document.foo.modelselect.value;
document.getElementById(e).options.length = 0;

for (var i=0; i <= valArray2.length; i++ ) {
pairArray2 = valArray2[i].split(delY);
document.getElementById(e).options[i] = new Option(pairArray2[1],
pairArray2[0]);
}
}

</script>

<body>
<form name="foo">
<input type="radio" name="condition1" value="0"
onclick="loadBrands(0,1)" />New
<input type="radio" name="condition1" value="1"
onclick="loadBrands(1,1)" />Used

<select name="brands1" id="brands1"
onchange="loadModels(this.value,document.foo.conds elect.value,1);">
<option value="">Select...</option>
</select>

<select name="models1" id="models1">
<option value="">Select...</option>
</select>

<br />

<input type="radio" name="condition2" value="0"
onclick="loadBrands(0,2)" />New
<input type="radio" name="condition2" value="1"
onclick="loadBrands(1,2)" />Used

<select name="brands2" id="brands2"
onchange="loadModels(this.value,document.foo.conds elect.value,2);">
<option value="">Select...</option>
</select>

<select name="models2" id="models2">
<option value="">Select...</option>
</select>

<br />

<input type="radio" name="condition3" value="0"
onclick="loadBrands(0,3)" />New
<input type="radio" name="condition3" value="1"
onclick="loadBrands(1,3)" />Used

<select name="brands3" id="brands3"
onchange="loadModels(this.value,document.foo.conds elect.value,3);">
<option value="">Select...</option>
</select>

<select name="models3" id="models3">
<option value="">Select...</option>
</select>

<br />

<input type="hidden" id="condselect" name="condselect" />
<input type="hidden" id="brandselect" name="brandselect" />
<input type="hidden" id="modelselect" name="modelselect" />
</form>
</body>
</html>
--------------------------------

<bobsawyer@gmail.com> wrote in message
news:1107462795.305078.137140@f14g2000cwb.googlegr oups.com...[color=blue]
> I've been building a series of SELECT lists that are populated
> dynamically using HTTPRequest. Things are going pretty well, and I've
> got the whole thing working flawlessly in Mozilla/Firebird.
> Unfortunately, Internet Explorer doesn't quite work as expected -- it
> gives me an "invalid argument" error that I don't know how to fix.
>
> Here's the entire script, with form, annotated to explain what I'm
> doing and where the problem is occurring. I would link the URL where
> the form resides on the server, but cannot due to security concerns.
>
> Thing is, I just don't know what to do to fix it. In a nutshell, when
> you click on the first set of radio buttons, nothing happens. If you
> click again, it then populates the first SELECT list in the first row.
> It SHOULD populate the list on the first click. Additionally, if you
> skip the first row and go to the second, and click a radio button, it
> populates the SELECT in the FIRST row, rather than the second.
>
> If anyone can assist me with this I would be really grateful. I've
> managed to piece this together today despite not really knowing much
> about Javascript, but I've hit the wall with this error. Thanks!
>
> -Bob
>
> -------------------------
> <html>
> <script>
> var xmlDoc = null ;
> var c = '';
> var d = '';
> var o = '';
> var m = '';
> var z = '';
> var y = '';
>
> function loadBrands(c,d) {
> if (typeof window.ActiveXObject != 'undefined' ) {
> xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
> xmlDoc.onreadystatechange = processBrands ;
>
> else {
> xmlDoc = new XMLHttpRequest();
> xmlDoc.onload = processBrands ;
> }
> xmlDoc.open( "GET", "getbrands.php?cond="+c, true );
> xmlDoc.send( null );
> document.foo.condselect.value = c; // inserting the value of c into a
> text form element so I can reference it later
> document.foo.brandselect.value = 'brands'+d; // inserting 'brands' +
> the value of d into a text form element so I can reference it later
> }
>
> function processBrands() {
> if ( xmlDoc.readyState != 4 ) return ;
> delX= "\n";
> delY= ",";
> valArray = xmlDoc.responseText.split(delX);
> d = document.foo.brandselect.value; // getting that first value from
> the text element below
> document.getElementById(d).options.length = 0; // this
> is where IE tells me the error is occurring, at the 'getElementById(d)'
> position
>
> for (var i=0; i <= valArray.length; i++ ) {
> pairArray = valArray[i].split(delY);
> document.getElementById(d).options[i] = new Option(pairArray[1],
> pairArray[0]);
> }
> }
>
> function loadModels(m,z,y) {
> if (typeof window.ActiveXObject != 'undefined' ) {
> xmlDoc2 = new ActiveXObject("Microsoft.XMLHTTP");
> xmlDoc2.onreadystatechange = processModels ;
> }
> else {
> xmlDoc2 = new XMLHttpRequest();
> xmlDoc2.onload = processModels ;
> }
> alert('getmodels.php?model='+m+'&cond='+z);
> xmlDoc2.open( "GET", "getmodels.php?model="+m+"&cond="+z, true
> );
> xmlDoc2.send( null );
> document.foo.modelselect.value = 'models'+y;
> }
>
> function processModels() {
> if ( xmlDoc2.readyState != 4 ) return ;
> delX= "\n";
> delY= ",";
> valArray2 = xmlDoc2.responseText.split(delX);
> e = document.foo.modelselect.value;
> document.getElementById(e).options.length = 0;
>
> for (var i=0; i <= valArray2.length; i++ ) {
> pairArray2 = valArray2[i].split(delY);
> document.getElementById(e).options[i] = new Option(pairArray2[1],
> pairArray2[0]);
> }
> }
>
> </script>
>
> <body>
> <form name="foo">
> <input type="radio" name="condition1" value="0"
> onclick="loadBrands(0,1)" />New
> <input type="radio" name="condition1" value="1"
> onclick="loadBrands(1,1)" />Used
>
> <select name="brands1" id="brands1"
> onchange="loadModels(this.value,document.foo.conds elect.value,1);">
> <option value="">Select...</option>
> </select>
>
> <select name="models1" id="models1">
> <option value="">Select...</option>
> </select>
>
> <br />
>
> <input type="radio" name="condition2" value="0"
> onclick="loadBrands(0,2)" />New
> <input type="radio" name="condition2" value="1"
> onclick="loadBrands(1,2)" />Used
>
> <select name="brands2" id="brands2"
> onchange="loadModels(this.value,document.foo.conds elect.value,2);">
> <option value="">Select...</option>
> </select>
>
> <select name="models2" id="models2">
> <option value="">Select...</option>
> </select>
>
> <br />
>
> <input type="radio" name="condition3" value="0"
> onclick="loadBrands(0,3)" />New
> <input type="radio" name="condition3" value="1"
> onclick="loadBrands(1,3)" />Used
>
> <select name="brands3" id="brands3"
> onchange="loadModels(this.value,document.foo.conds elect.value,3);">
> <option value="">Select...</option>
> </select>
>
> <select name="models3" id="models3">
> <option value="">Select...</option>
> </select>
>
> <br />
> 
> <input type="hidden" id="condselect" name="condselect" />
> <input type="hidden" id="brandselect" name="brandselect" />
> <input type="hidden" id="modelselect" name="modelselect" />
> </form>
> </body>
> </html>
> --------------------------------
>[/color]

1) missing a "}" before your first "else"

2) Clicking a radio button calls "loadBrands()"
which calls "processBrands()"
which has "d = document.foo.brandselect.value;"
which is blank causing the following line to crash:
"document.getElementById(d).options.length = 0;"

3) What does this do?
"if (typeof window.ActiveXObject != 'undefined' )"

1) the missing "}" is there ... at least in my local script. The "else"
that comes before it is just on the next line.

2) "d = document.foo.brandselect.value" is supposed to be set in the
loadbrands() function. It sets a hidden form field to that value, and
then picks it back up in the processbrands() function

3) it tells the script to use the ActiveXObject for the XMLHTTPRequest
rather than the DOM's XMLHTTPRequest object, presumably because IE
doesn't have the XMLHTTPRequest in its DOM. Or something like that.

Interestingly enough, I found that the script works fine in IE on my
personal server (I copied the script there for further testing after
hours) but not on my employer's server. See for yourself here:

http://www.builtforthefuture.com/dev/af/test.php

Thanks,
-Bob

<bobsawyer@gmail.com> wrote in message
news:1107472325.740151.241410@g14g2000cwa.googlegr oups.com...[color=blue]
> 1) the missing "}" is there ... at least in my local script. The "else"
> that comes before it is just on the next line.
>
> 2) "d = document.foo.brandselect.value" is supposed to be set in the
> loadbrands() function. It sets a hidden form field to that value, and
> then picks it back up in the processbrands() function
>
> 3) it tells the script to use the ActiveXObject for the XMLHTTPRequest
> rather than the DOM's XMLHTTPRequest object, presumably because IE
> doesn't have the XMLHTTPRequest in its DOM. Or something like that.
>
> Interestingly enough, I found that the script works fine in IE on my
> personal server (I copied the script there for further testing after
> hours) but not on my employer's server. See for yourself here:
>
> http://www.builtforthefuture.com/dev/af/test.php
>
> Thanks,
> -Bob
>[/color]

I get various errors using IE5.5:

Line: 32
Error: Invalid argument

Line: 35
Error: 'valArray[...]' is null or not an object

Line: 64
Error: 'valArray[...]' is null or not an object

OK, I believe I've fixed it. It's working properly in IE and not
throwing any more 'valArray[...] is null or not an object' errors
anymore. Here's what I did:

-------------

function processBrands() {
e = document.foo.brandselect.value;
if (xmlDoc.readyState == 4) {
// only if "OK"
if (xmlDoc.status == 200) {
delX= "\n";
delY= ",";
valArray = xmlDoc.responseText.split(delX);
document.getElementById(e).options.length = 0;
var valArraylen = valArray.length - 1;
for (var i=0; i <= valArraylen; i++ ) {
pairArray = valArray[i].split(delY);
document.getElementById(e).options[i] = new
Option(pairArray[1], pairArray[0]);
}
} else {
alert("There was a problem retrieving the data:\n" +
xmlDoc.statusText);
}
}
}

----------------

I moved 'e = document.foo.brandselect.value;' to the top of the
function so that the value is assigned to 'e' as soon as the function
fires, rather than at the end.

I perform TWO status checks -- one checking the readyState of the data,
and one checking the status of the server action. There's really no
need for the server status, as the function is pulling data from a
database and not performing an action on an existing file. But I
figured (a) it's a good habit to get into, and (b) it can't hurt to
check.

Finally, for whatever reason, IE was having a problem with
'valArray.length - 1' in the 'for' loop. I assigned that to a variable,
'valArraylen', and used that in the 'for' loop instead. That solved
whatever problem IE was having with the 'valArray[...] is null or not
an object' ... I'm assuming because I assigned the value to
'valArraylen', it became an object and IE was all hunky-dory with it.
But what do I know?

Since that function appears twice in the script (it's pulling different
data), I also updated the second one as well. A few other tweaks per
someone else's suggestion, such as moving the 'document.foo...'
statements to the top of each function probably helped as well.

So - thanks very much to everyone who offered suggestions and
assistance!

Best,
-Bob

Populating a SELECT list with HTTPRequest

re: Populating a SELECT list with HTTPRequest

re: Populating a SELECT list with HTTPRequest

re: Populating a SELECT list with HTTPRequest

re: Populating a SELECT list with HTTPRequest

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about