473,480 Members | 2,300 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Problem with IE when filling a select element per JavaScript andDOM

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
13 2313
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
>
<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
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
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2603
by: R.G. Vervoort | last post by:
I would like to select an option in a pulldown, select a record in a mysql database depending on the pulldown selection and then put the data from the record in the textfields. I can retrieve...
0
1718
by: Mark Constant | last post by:
I was doing a test website where on one page somebody could select a Genre from a drop-down list and it would display every sub-listing under that specific Genre. If the user selected All it would...
2
3379
by: nanookfan | last post by:
Hi all, I'm having a bizarre problem converting XML files to HTML using an XSLT. The problem is only occuring in my Netscape 7.0 browser. What makes it more bizarre is that it is only...
1
3591
by: surflorida | last post by:
hello, I have two problems have I been hacking on for awhile looking in books and web: - getting the correct value of EMPTY emelement value: in my dtd I have !DOCTYPE foo [ <!ELEMENT foo...
1
20671
by: Covad | last post by:
Hi all, For some reason my change() function is only called when the page loads. I'd much rather it gets called when the select changes. Here's the code: window.onload = init; function...
3
1372
by: news.microsoft.com | last post by:
I am using client script to handle some XML stuff with MS XMLDOM But I ran into a problem in selecting the elements using selectNodes method The XML looks like: <root> ...........................
29
1729
by: Richard Lionheart | last post by:
Hi All, I've taken the advice of a few people and managed to cobble together an HTML 4.01 Strict-compliant document (according to the W3C Validation Service), but the way I try to pass a...
22
1664
by: DL | last post by:
Hi, What I wanted to do is to call a function from a newly created element. But it stumbled me. Here's the line that references the newly created element and I used the alert function for...
3
4188
by: azegurb | last post by:
hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. but i would like how create SUM function that automatically sums each added row...
0
7048
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
6911
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7050
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
5344
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
4787
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
2999
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
2988
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
564
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
185
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.