By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,335 Members | 2,718 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,335 IT Pros & Developers. It's quick & easy.

Problem with IE when filling a select element per JavaScript andDOM

P: n/a
Hello,

In my html form I show a select-element and if this element is clicked I fill it
per JavaScript/DOM
with option-elements. I use the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);
if (selectElement.getAttribute("populated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.createElement( "option" );
var wordlistEntryName = "MyOption_" + i;
var textNode = document.createTextNode(wordlistEntryName);
optionElement.appendChild(textNode);
selectElement.appendChild(optionElement);
}
selectElement.setAttribute("populated", "1");
}
}
</script>
</head>
<body>
<select style="width:150px" size="1" populated="0" onClick="onWordlistSelect()"
id="9">
<option></option>
</select>
</body>
</html>

This works fine with Mozilla:
when I click on the dropdown it is opened and I can choose one of the added options.
BUT with IE I have the following behaviour:
when I click on the dropdown it is opened and closed immediately so I cannot
choose an entry.
I have to make a second click to see the options I've added and to select one of
them.

Does anyone have an idea how I could solve this problem?
Thanx in advance!

Oliver
Jan 11 '06 #1
Share this Question
Share on Google+
13 Replies


P: n/a
Oliver Hauger wrote:
Hello,

In my html form I show a select-element and if this element is clicked I
fill it per JavaScript/DOM
with option-elements. I use the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);
According to the HTML spec, an ID attribute can contain numbers but it
can't start with a number (though I think most browsers will tolerate it).

if (selectElement.getAttribute("populated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.createElement( "option" );
var wordlistEntryName = "MyOption_" + i;
var textNode = document.createTextNode(wordlistEntryName);
optionElement.appendChild(textNode);
use instead:

var txt = wordlistEntryName;
var optionElement = new Option(txt);

Syntax of new Option is:

new Option ([ text [, value [, defaultSelected[, selected ]]]])

where defaultSelected & selected are booleans (true/false).
selectElement.appendChild(optionElement);
}
selectElement.setAttribute("populated", "1");
select elements do not have a 'populated' attribute. I'm not sure this
does anything useful, the results are likely not consistent or reliable.
[...]
BUT with IE I have the following behaviour:
when I click on the dropdown it is opened and closed immediately so I
cannot choose an entry.
I have to make a second click to see the options I've added and to
select one of them.

Does anyone have an idea how I could solve this problem?


Use -- new Option -- as above.

--
Rob
Jan 11 '06 #2

P: n/a
>
<select style="width:150px" size="1" populated="0" onClick="onWordlistSelect()" id="9">


use instead:

<select style="width:150px" size="1" populated="0"
onmouseover="onWordlistSelect()" id="9">

Jan 11 '06 #3

P: n/a
Hello RobG,

thanx for your reply!
I've now changed my code as you've suggested:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById("sel_9");
for( var i = 0; i < 5; i++)
{
var wordlistEntryName = "MyOption_" + i;
var optionElement = new Option(wordlistEntryName);
selectElement.appendChild(optionElement);
}
}
</script>
</head>
<body>
<select style="width:150px" size="1" onClick="onWordlistSelect()" id="sel_9">
<option></option>
</select>
</body>
</html>

BUT I have the same problem with the IE as before AND when using
new option(txt)
to create the option element the option's text is not shown.
I've also removed the populated attribute and I've changed the id attribute to
be sure that this does not cause the error!

Any more ideas how to solve the problem!?

Oliver
RobG wrote:
Oliver Hauger wrote:
Hello,

In my html form I show a select-element and if this element is clicked
I fill it per JavaScript/DOM
with option-elements. I use the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);

According to the HTML spec, an ID attribute can contain numbers but it
can't start with a number (though I think most browsers will tolerate it).

if (selectElement.getAttribute("populated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.createElement( "option" );
var wordlistEntryName = "MyOption_" + i;
var textNode =
document.createTextNode(wordlistEntryName);
optionElement.appendChild(textNode);

use instead:

var txt = wordlistEntryName;
var optionElement = new Option(txt);

Syntax of new Option is:

new Option ([ text [, value [, defaultSelected[, selected ]]]])

where defaultSelected & selected are booleans (true/false).
selectElement.appendChild(optionElement);
}
selectElement.setAttribute("populated", "1");

select elements do not have a 'populated' attribute. I'm not sure this
does anything useful, the results are likely not consistent or reliable.
[...]
BUT with IE I have the following behaviour:
when I click on the dropdown it is opened and closed immediately so I
cannot choose an entry.
I have to make a second click to see the options I've added and to
select one of them.

Does anyone have an idea how I could solve this problem?

Use -- new Option -- as above.

Jan 11 '06 #4

P: n/a
VK

Oliver Hauger wrote:
Hello,

In my html form I show a select-element and if this element is clicked I fill it
per JavaScript/DOM
with option-elements. I use the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);
if (selectElement.getAttribute("populated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.createElement( "option" );
var wordlistEntryName = "MyOption_" + i;
var textNode = document.createTextNode(wordlistEntryName);
optionElement.appendChild(textNode);
selectElement.appendChild(optionElement);
}
selectElement.setAttribute("populated", "1");
}
}
</script>
</head>
<body>
<select style="width:150px" size="1" populated="0" onClick="onWordlistSelect()"
id="9">
<option></option>
</select>
</body>
</html>

This works fine with Mozilla:
when I click on the dropdown it is opened and I can choose one of the added options.
BUT with IE I have the following behaviour:
when I click on the dropdown it is opened and closed immediately so I cannot
choose an entry.
I have to make a second click to see the options I've added and to select one of
them.

Does anyone have an idea how I could solve this problem?
Thanx in advance!


It is bad that it works in Mozilla, because <select> must be an element
of <form>, not document.body.
IE - as more standard compliant :-D - gives you hard time for that.

1) enclose <select> into <form></form> tags as it should be.
2) in your function add:
....
selectElement.setAttribute("populated", "1");
}
// added line:
document.forms[0].normalize();
}
3) enjoy

If you use more standard way then you can skip on nodes normalization.
"More standard way" would be to have a normal form, a normal element in
the form collection and adding new Option() into the list (instead of
abstract DocumentNode).

Jan 11 '06 #5

P: n/a
Hello,

and thanx for your reply!

I've tested with the eventhandler "onMouseOver" before and it works if I fill
the dropdown as I do in my testcode. But in the "real" code I want to fill the
dropdown with options which I retrieve per XmlHttpRequest from the server
which may take a bit longer. And if it takes a bit longer(let's say 2 seconds)
I still have the problem with IE - the dropdown is opened and closed
immediately. So if the dropdown is not ready populated when I click on it
I have the problem again. With Mozilla everything is fine!?

Oliver

briggs wrote:
<select style="width:150px" size="1" populated="0" onClick="onWordlistSelect()" id="9">


use instead:

<select style="width:150px" size="1" populated="0"
onmouseover="onWordlistSelect()" id="9">

Jan 11 '06 #6

P: n/a
VK

Oliver Hauger wrote:
Hello,

and thanx for your reply!

I've tested with the eventhandler "onMouseOver" before and it works if I fill
the dropdown as I do in my testcode. But in the "real" code I want to fill the
dropdown with options which I retrieve per XmlHttpRequest from the server
which may take a bit longer. And if it takes a bit longer(let's say 2 seconds)
I still have the problem with IE - the dropdown is opened and closed
immediately. So if the dropdown is not ready populated when I click on it
I have the problem again. With Mozilla everything is fine!?


document.normalize();

or

document.forms['myForm'].normalize();

upon inserting the last option into the list

Jan 11 '06 #7

P: n/a
Hello,

I've changed my code as you've suggested:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);
if (selectElement.getAttribute("populated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.createElement( "option" );
var wordlistEntryName = "MyOption_" + i;
var textNode = document.createTextNode(wordlistEntryName);
optionElement.appendChild(textNode);
selectElement.appendChild(optionElement);
}
selectElement.setAttribute("populated", "1");
document.forms[0].normalize();
}
}
</script>
</head>
<body>
<form>
<select style="width:150px" size="1" populated="0" onClick="onWordlistSelect()"
id="9">
<option></option>
</select>
</form>
</body>
</html>

BUT I still have the same behaviour with IE! Don't know what to do!?

Oliver

VK wrote:
Oliver Hauger wrote:
Hello,

In my html form I show a select-element and if this element is clicked I fill it
per JavaScript/DOM
with option-elements. I use the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);
if (selectElement.getAttribute("populated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.createElement( "option" );
var wordlistEntryName = "MyOption_" + i;
var textNode = document.createTextNode(wordlistEntryName);
optionElement.appendChild(textNode);
selectElement.appendChild(optionElement);
}
selectElement.setAttribute("populated", "1");
}
}
</script>
</head>
<body>
<select style="width:150px" size="1" populated="0" onClick="onWordlistSelect()"
id="9">
<option></option>
</select>
</body>
</html>

This works fine with Mozilla:
when I click on the dropdown it is opened and I can choose one of the added options.
BUT with IE I have the following behaviour:
when I click on the dropdown it is opened and closed immediately so I cannot
choose an entry.
I have to make a second click to see the options I've added and to select one of
them.

Does anyone have an idea how I could solve this problem?
Thanx in advance!

It is bad that it works in Mozilla, because <select> must be an element
of <form>, not document.body.
IE - as more standard compliant :-D - gives you hard time for that.

1) enclose <select> into <form></form> tags as it should be.
2) in your function add:
...
selectElement.setAttribute("populated", "1");
}
// added line:
document.forms[0].normalize();
}
3) enjoy

If you use more standard way then you can skip on nodes normalization.
"More standard way" would be to have a normal form, a normal element in
the form collection and adding new Option() into the list (instead of
abstract DocumentNode).

Jan 11 '06 #8

P: n/a
VK wrote:
Oliver Hauger wrote:
Does anyone have an idea how I could solve this problem?
Thanx in advance!
It is bad that it works in Mozilla, because <select> must
be an element of <form>, not document.body.


No such restriction exists in HTML or XHTML.
IE - as more standard compliant :-D - gives you hard time
for that.
IE doesn't care whether a SELECT is a child of a FORM or the BODY.
1) enclose <select> into <form></form> tags as it should be.
There is no "should be" here.
2) in your function add:
...
selectElement.setAttribute("populated", "1");
}
// added line:
document.forms[0].normalize();
}
It is hard to imagine what thought processes could have resulted in your
conjuring up that particular mystical incantation. It is utter nonsense.
3) enjoy
It is possible to enjoy a bit of a giggle at some fool posting code
informed by nothing more than deluded fantasy from time to time, but you
do this so often that it is beyond a joke.
If you use more standard way then you can skip on nodes
normalization. "More standard way" would be to have a normal
form, a normal element in the form collection and adding
new Option() into the list (instead of abstract DocumentNode).


Most people are aware of when they do not know what they are talking
about, and some elect not to talk about it as a result. Are you really
not aware that you are babbling nonsense more often than not?

Richard.
Jan 11 '06 #9

P: n/a
VK

Richard Cornford wrote:
Are you really not aware that you are babbling nonsense more often than not?


I was not till now, but thank you for pointing out. It worked as
suggested under Windows 98 SE / IE 6.0 SP1 but it may be a local
anomalie.

document.body.normalize() and formObject.normalize() indeed helps
greatly in many circumstances to bring HTML back to conscience after
you handled it too much academically.

Nevertheless it is not the main problem of the posted code, and it is
not the fault of OP (except very questionnable "onclick" for select)
that it doesn't work. The code is "tentatively standard" as it's ugly
called by Validator. You simply should not use it for <select> objects
- despite formally it is more then correct.

Jan 11 '06 #10

P: n/a
Hello,

after I've inserted the last option into the list I call
document.forms[0].normalize();
BUT I still get the same behaviour with IE.

Don't know maybe I have to think about a completely different solution.
Even though it would be nice to fill the list this way!?

Oliver

VK wrote:
Oliver Hauger wrote:
Hello,

and thanx for your reply!

I've tested with the eventhandler "onMouseOver" before and it works if I fill
the dropdown as I do in my testcode. But in the "real" code I want to fill the
dropdown with options which I retrieve per XmlHttpRequest from the server
which may take a bit longer. And if it takes a bit longer(let's say 2 seconds)
I still have the problem with IE - the dropdown is opened and closed
immediately. So if the dropdown is not ready populated when I click on it
I have the problem again. With Mozilla everything is fine!?

document.normalize();

or

document.forms['myForm'].normalize();

upon inserting the last option into the list

Jan 11 '06 #11

P: n/a
VK wrote:
Richard Cornford wrote:
Are you really not aware that you are babbling nonsense
more often than not?
... . It worked as suggested under Windows 98 SE / IE 6.0 SP1
but it may be a local anomalie.


For some unusual definition of "works". The method does:-

<quote cote="Document Object Model; Core: Node interface">

normalize modified in DOM Level 2

Puts all Text nodes in the full depth of the sub-tree underneath this
Node, including attribute nodes, into a "normal" form where only
structure (e.g., elements, comments, processing instructions, CDATA
sections, and entity references) separates Text nodes, i.e., there
are neither adjacent Text nodes nor empty Text nodes. This can be
used to ensure that the DOM view of a document is the same as if it
were saved and re-loaded, and is useful when operations (such as
XPointer [XPointer] lookups) that depend on a particular document
tree structure are to be used.

Note: In cases where the document contains CDATASections, the
normalize operation alone may not be sufficient, since XPointers do
not differentiate between Text nodes and CDATASection nodes.

No Parameters
No Return Value
No Exceptions
</quote>

- which is rarely necessary or useful. It certainly has no baring on the
OP's problem, and your proposal that the OP add it to his code makes as
much sense as proposing he chant a prayer at this computer.
document.body.normalize() and formObject.normalize() indeed
helps greatly in many circumstances to bring HTML back to
conscience after you handled it too much academically.

<snip>

By which I assume you mean that you have let utter ignorance of valid
DOM structure result in your creating a poor example and are then trying
mystical incantations to fix the problems that result. It would save you
a great deal of time and effort to do something about learning
programming.

Richard.
Jan 11 '06 #12

P: n/a
Oliver Hauger wrote:
Hello RobG,

thanx for your reply!
I've now changed my code as you've suggested:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById("sel_9");
Unless you intend to create an ever-lengthening list of options, here you
should delete the current options:

selectElement.options.length = 0;
for( var i = 0; i < 5; i++)
{
var wordlistEntryName = "MyOption_" + i;
var optionElement = new Option(wordlistEntryName);
selectElement.appendChild(optionElement);
}
}
</script>
</head>
<body>
<select style="width:150px" size="1" onClick="onWordlistSelect()"
id="sel_9">
<option></option>
</select>
</body>
</html>

BUT I have the same problem with the IE as before AND when using
new option(txt)
to create the option element the option's text is not shown.
I've also removed the populated attribute and I've changed the id
attribute to be sure that this does not cause the error!
I didn't expect that the ID & populated attributes were part of the
problem, they were incidentals that might as well be fixed while you were
there (though sometimes such things do have weird consequences).

Any more ideas how to solve the problem!?


For what it's worth, Safari 1.0.3 does pretty much the same thing as IE -
the first time you click, the extra options aren't shown until after the
drop-down collapses. After that, the extras are added as per Firefox and
the drop-down stays dropped.

I tried a number of hacks using focus/blur/select, but it only made things
worse without fixing anything. The only thing that 'worked' is Safari was
running onWordlistSelect() onload, but it causes some weirdness in Firefox
(I couldn't test IE). It shouldn't matter that the list doesn't change the
first time as the function has already run.

It may also mean that a selected option might not exist in the list the
next time the select is clicked on.

I think your strategy of getting the options after onclick and then wait
for XMLHttpRequest is flawed - the request will take awhile, but you can't
send the browser into a modal state to stop the user from clicking
elsewhere in the meantime (users can have remarkably short attention spans
:-) ).

You need to re-think the work flow so that the XMLHttpRequest is fired from
some other event before the user gets to the drop-down - say completion of
whatever user actions the request is based on. Is it really that time
critical that the results have to be fetched *exactly* when the user clicks
on the drop-down (allowing for the latency of sending the request and the
server starting the response of course)?
We don't know enough about what you are doing to offer more than guesses.
[...]
--
Rob
Jan 11 '06 #13

P: n/a
Even though this looks like reinventing the wheel to me (since all of
this can be done quite easily with HTML) I took it as a personal
challenge. You'll need to add another function, which fires during
the mouseover event. This works in IE6 and Firefox 1.5:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function onWordlistSelect()
{
var selectElement = document.getElementById(9);
if (selectElement.getAttribute("populated") == 0)
{
for (i=0; i<5; i++)
{
var optionElement = document.createElement("option");
var wordlistEntryName = "MyOption_" + i;
selectElement.options.add(optionElement);
optionElement.innerHTML = wordlistEntryName;
}
selectElement.setAttribute("populated", "1");
}
}

function onSelChange()
{
var selectElement = document.getElementById(9);
if (selectElement.fireEvent)
{
selectElement.fireEvent("onclick");
}
}
</script>
</head>
<body>
<select style="width:150px" size="1" populated="0"
onclick="onWordlistSelect()" onmouseover="onSelChange()" id="9">
<option></option>
</select>
</body>
</html>

Jan 13 '06 #14

This discussion thread is closed

Replies have been disabled for this discussion.