473,586 Members | 2,491 Online
Bytes | Software Development & Data Engineering Community
+ 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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById(9);
if (selectElement. getAttribute("p opulated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.create Element( "option" );
var wordlistEntryNa me = "MyOption_" + i;
var textNode = document.create TextNode(wordli stEntryName);
optionElement.a ppendChild(text Node);
selectElement.a ppendChild(opti onElement);
}
selectElement.s etAttribute("po pulated", "1");
}
}
</script>
</head>
<body>
<select style="width:15 0px" size="1" populated="0" onClick="onWord listSelect()"
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 2335
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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById(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("p opulated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.create Element( "option" );
var wordlistEntryNa me = "MyOption_" + i;
var textNode = document.create TextNode(wordli stEntryName);
optionElement.a ppendChild(text Node);
use instead:

var txt = wordlistEntryNa me;
var optionElement = new Option(txt);

Syntax of new Option is:

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

where defaultSelected & selected are booleans (true/false).
selectElement.a ppendChild(opti onElement);
}
selectElement.s etAttribute("po pulated", "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:15 0px" size="1" populated="0" onClick="onWord listSelect()" id="9">


use instead:

<select style="width:15 0px" size="1" populated="0"
onmouseover="on WordlistSelect( )" 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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById("sel_9 ");
for( var i = 0; i < 5; i++)
{
var wordlistEntryNa me = "MyOption_" + i;
var optionElement = new Option(wordlist EntryName);
selectElement.a ppendChild(opti onElement);
}
}
</script>
</head>
<body>
<select style="width:15 0px" size="1" onClick="onWord listSelect()" 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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById(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("p opulated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.create Element( "option" );
var wordlistEntryNa me = "MyOption_" + i;
var textNode =
document.create TextNode(wordli stEntryName);
optionElement.a ppendChild(text Node);

use instead:

var txt = wordlistEntryNa me;
var optionElement = new Option(txt);

Syntax of new Option is:

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

where defaultSelected & selected are booleans (true/false).
selectElement.a ppendChild(opti onElement);
}
selectElement.s etAttribute("po pulated", "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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById(9);
if (selectElement. getAttribute("p opulated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.create Element( "option" );
var wordlistEntryNa me = "MyOption_" + i;
var textNode = document.create TextNode(wordli stEntryName);
optionElement.a ppendChild(text Node);
selectElement.a ppendChild(opti onElement);
}
selectElement.s etAttribute("po pulated", "1");
}
}
</script>
</head>
<body>
<select style="width:15 0px" size="1" populated="0" onClick="onWord listSelect()"
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.s etAttribute("po pulated", "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 "onMouseOve r" 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:15 0px" size="1" populated="0" onClick="onWord listSelect()" id="9">


use instead:

<select style="width:15 0px" size="1" populated="0"
onmouseover="on WordlistSelect( )" id="9">

Jan 11 '06 #6
VK

Oliver Hauger wrote:
Hello,

and thanx for your reply!

I've tested with the eventhandler "onMouseOve r" 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.normal ize();

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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById(9);
if (selectElement. getAttribute("p opulated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.create Element( "option" );
var wordlistEntryNa me = "MyOption_" + i;
var textNode = document.create TextNode(wordli stEntryName);
optionElement.a ppendChild(text Node);
selectElement.a ppendChild(opti onElement);
}
selectElement.s etAttribute("po pulated", "1");
document.forms[0].normalize();
}
}
</script>
</head>
<body>
<form>
<select style="width:15 0px" size="1" populated="0" onClick="onWord listSelect()"
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="JavaS cript" type="text/javascript">
function onWordlistSelec t()
{
var selectElement = document.getEle mentById(9);
if (selectElement. getAttribute("p opulated") == "0")
{
for( var i = 0; i < 5; i++)
{
var optionElement = document.create Element( "option" );
var wordlistEntryNa me = "MyOption_" + i;
var textNode = document.create TextNode(wordli stEntryName);
optionElement.a ppendChild(text Node);
selectElement.a ppendChild(opti onElement);
}
selectElement.s etAttribute("po pulated", "1");
}
}
</script>
</head>
<body>
<select style="width:15 0px" size="1" populated="0" onClick="onWord listSelect()"
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.s etAttribute("po pulated", "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.s etAttribute("po pulated", "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.n ormalize() and formObject.norm alize() 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 "tentativel y 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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2606
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 the pulldown value using javascript I can open the database and select the record using php how can i combine the 2 to within the onchange option...
0
1734
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 display everything. Now I have tried to implement it into my real homepage and I am having a little problem. Now not only do I pass the Genre to my...
2
3396
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 happening when I put my XML files and the .xsl files on my ISP's system for my home page. If I try to open the XML files in Netscape 7.0 on my own machine...
1
3601
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 (bar*)>
1
20690
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 init() {
3
1379
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> ........................ <Table> <PK>3</cls_PK>
29
1754
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 TextArea object to a script function doesn't work. What's the least amount of change I can make to this to remain compliant but also correct for...
22
1679
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 debugging for now. Did I mess up all these quotes? // once again this is the key line of code, problem area, disregard
3
4205
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 value (text value) here is the code if possible please help me Thanks beforehand <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"...
0
7915
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7841
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8220
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5712
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5392
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3838
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2345
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1452
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1184
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.