On Fri, 24 Sep 2004 09:35:01 GMT, "Michael Winter"
<M.******@blueyonder.co.invalid> wrote:
[Follow-ups set to comp.lang.javascript]
On Fri, 24 Sep 2004 10:02:55 +0100, mark4asp
<ma****************@ntlworld.com> wrote:
Why does this not work in Mozilla ?
<http://homepage.ntlworld.com/mark.pawelek/code/animals.html>
The optHabitat_change() event does not fire. What am I doing wrong
here?
It does fire. If you look at the error console, you'll see Mozilla
complain.
You see unfortunately, IE hasn't followed the W3C with regards to the
HTMLSelectElement.add method. IE uses a number for the second argument,
and an optional one at that. However, the W3C DOM states that the second
argument is a required object reference.
The two simply aren't compatible (though good 'ol Opera allows both).
There seems to be four options available.
1) Fall back on the old approach of using the Option constructor to create
new OPTION elements and append them using the options collection. This
will be supported by older scriptable browsers.
2) Use try/catch to determine whether an error occurs whilst trying to use
the object or number version of the method. Use the other approach in the
catch clause. This won't be supported by older browsers because a) they
don't support try/catch, and b) they won't support DOM 1.
3) Use appendChild to add the OPTION elements. I haven't thoroughly tested
this, but it appears to work. This won't be supported by older browsers as
they don't support DOM 1.
4) Use the (preferred) server-side approach. This will be supported by old
and new browsers alike, scriptable or otherwise.
Hope that helps,
Mike
It helped but the code still didn't work in Mozilla - for a different
reason which I was never able to figure out!
I fixed it by passing in the value of the item to be selected instead
of the index to be selected into the two functions loadOpt() and
optHabitat_change(). This is much more logical even if it needs a line
or two of code more. I dispense with the stupid index positions and
use the values (which are the numbers in my data arrays anyway).
I include the fixed code because I always like a complete solution for
the benefit of any stranger who may have a similar problem in future.
[Oh yeh, and I've decided that Google is a nice place to store bits of
code that one may need in future too!]
I also had to change the way options were deleted as well as created.
<html>
<head>
<title>Funny Animals</title>
<script language="javascript" type="text/javascript">
<!--
// Start of database
habitats = {
1:"arctic",
2:"desert",
3:"ocean" }
// "name", "habitat", "type", "page #"
creatures = {
1:["camel", "2", "10", "1¸14"],
2:["polar bear", "1", "10", "1¸14"],
3:["scorpion", "2", "10", "1¸14"],
4:["tuna", "3", "10", "1¸14"],
5:["whale", "3", "", "9"] }
// Initialise HTML
window.onload = Initialise;
// Core code
function getObj(oTxt) {
return document.getElementById(oTxt);
}
function toUpper(w) {
return (w.charAt(0).toUpperCase() + w.substring(1))
}
function Int(n){
return parseInt(n);
}
// Core code END
// Initialise & Events
function Initialise(){
loadOpt(getObj('optHabitat'), habitats, 1);
optHabitat_change(getObj('optCreature'), 1);
}
// selVal = value of row to be selected.
function loadOpt(oCbo, ary, selVal) {
var key;
var i = 0;
for (key in ary) {
oCbo.options[oCbo.options.length] = new Option(toUpper(ary[key]),
key);
oCbo[i].selected = (oCbo.options.value==selVal) ? true : false;
i++;
}
}
function makeOption(obj, text) {
if (obj!=null && obj.options!=null)
obj.options[obj.options.length] = new Option(text, value)
}
function removeAllOptions(oCbo) {
for (var i=(oCbo.options.length-1); i>=0; i--)
oCbo.options[i] = null;
oCbo.selectedIndex = -1
}
function optHabitat_change(oCbo, habitat) {
var s = '';
var key;
removeAllOptions(oCbo);
for (key in creatures) {
s = creatures[key][1].toString();
arow = s.split('¸');
if (habitat==Int(arow[0]))
oCbo.options[oCbo.options.length] = new
Option(toUpper(creatures[key][0]), key);
}
return true
}
// Initialise & Events END
//-->
</script>
</head>
<body>
<p>Creatures:<br />
<select id="optHabitat"
onchange="optHabitat_change(getObj('optCreature'), this.value)"></select><br>
<!-- ,this.options(this.selectedIndex).value -->
<select id="optCreature"></select></p>
</body>
</html>
