drop down error

[debugger]

hello,
Question, on page load, I populate an existing drop down with
createElement and appendChild. It works fine so far. BUT I want to
automatically select some option from this populated drop down. So i
have this statement:

document.getEle mentById("dropd own").options[someindex].selected=true;

And it gives me an error.

Surprisingly, when i put an alert statement before appending the
created element to dropdown, the error doesn't occur.
Can anyone help please?

Thanks

[Randy Webb]

Re: drop down error

debugger wrote:[color=blue]
> hello,
> Question, on page load, I populate an existing drop down with
> createElement and appendChild. It works fine so far. BUT I want to
> automatically select some option from this populated drop down. So i
> have this statement:
>
> document.getEle mentById("dropd own").options[someindex].selected=true;
>
> And it gives me an error.[/color]

What is the error message?
[color=blue]
> Surprisingly, when i put an alert statement before appending the
> created element to dropdown, the error doesn't occur.[/color]

That indicates a timing issue.
[color=blue]
> Can anyone help please?[/color]

Start with the group FAQ

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[RobG]

Re: drop down error

debugger wrote:[color=blue]
> hello,
> Question, on page load, I populate an existing drop down with
> createElement and appendChild. It works fine so far. BUT I want to
> automatically select some option from this populated drop down. So i
> have this statement:
>
> document.getEle mentById("dropd own").options[someindex].selected=true;
>
> And it gives me an error.
>
> Surprisingly, when i put an alert statement before appending the
> created element to dropdown, the error doesn't occur.
> Can anyone help please?[/color]

Probably the browser is still creating the option when you try
to grab it with getElementById. Putting in the alert gives the
browser time to create it.

Why not set the selected attribute when you create the option?

...
var oOpt = document.create Element('option ');
oOpt.selected = true;
...

Then you don't need to use gEBI.


--
Rob

[kaeli]

Re: drop down error

In article <1107133520.759 874.153480@c13g 2000cwb.googleg roups.com>,
jsdebugger@yaho o.com enlightened us with...[color=blue]
> Question, on page load, I populate an existing drop down with
> createElement and appendChild. It works fine so far. BUT I want to
> automatically select some option from this populated drop down. So i
> have this statement:
>
> document.getEle mentById("dropd own").options[someindex].selected=true;
>
> And it gives me an error.[/color]

Magic 8 ball failed.
What's the error?
[color=blue]
>
> Surprisingly, when i put an alert statement before appending the
> created element to dropdown, the error doesn't occur.
> Can anyone help please?[/color]

Not without seeing actual code, no.
But more than likely, you're trying to access something that hasn't been
fully created/rendered yet.

--
--
~kaeli~
A little rudeness and disrespect can elevate a meaningless
interaction to a battle of wills and add drama to an
otherwise dull day.

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

[debugger]

Re: drop down error

the error is "htmlfile: Could not set the selected property.
Unspecified error."

option element for drop down is created by:
for(.......)
{
var myEle = document.create Element("option ");
myEle.value=som e value;
myEle.innerHTML = some string;
document.getEle mentById("someD ropDown").appen dChild(myEle);
}
after this, there is other for loop setting the selected property.
code causing the error:
for(var k=0; k<something; k++)
{
if(somecodition )
{
var mySelectedOptio n =
document.getEle mentById("someD ropDown").optio ns[k];
mySelectedOptio n.selected=true ; <<<<<<<<<<<<=== ===== error
occurs here
}
}

now when i put alert in the above "if statement", the error does not
occur.
Folks have already pointed out its a timing issue, thanks for that. But
I m not sure how to solve it.
thanks again.

[RobG]

Re: drop down error

debugger wrote:[color=blue]
> the error is "htmlfile: Could not set the selected property.
> Unspecified error."
>
> option element for drop down is created by:
> for(.......)
> {
> var myEle = document.create Element("option ");
> myEle.value=som e value;
> myEle.innerHTML = some string;[/color]

Yuck. Why use innerHTML?

myEle.appendChi ld(document.cre ateTextNode('so me string'));
[color=blue]
> document.getEle mentById("someD ropDown").appen dChild(myEle);[/color]

Do some feature detection before using gEBI (and you should
probably include a document.all method too if using gEBI):

if (document.getEl ementById) {
document.getEle mentById("someD ropDown")...;
...

Or even better, use the forms collection:

document.forms['someDropDown']...;

Avoids gEBI entirely - but see notes below.
[color=blue]
> }
> after this, there is other for loop setting the selected property.
> code causing the error:
> for(var k=0; k<something; k++)
> {
> if(somecodition )
> {
> var mySelectedOptio n =
> document.getEle mentById("someD ropDown").optio ns[k];
> mySelectedOptio n.selected=true ; <<<<<<<<<<<<=== ===== error
> occurs here[/color]

Why not keep a reference to "someDropDo wn" when you access it
above, then use it again when referencing the option:

var myDropDown = document.forms['someDropDown'];
myDropDown.appe ndChild(myEle);

...

myDropDown.opti ons[k].selected = true;


Now there is no need for the second gEBI (or if the forms
collection is used, no need for gEBI at all)

[...][color=blue]
> now when i put alert in the above "if statement", the error does not
> occur.[/color]

Whilst Firefox does not generate an error, IE does. The error
is not fatal and the script appears to execute properly - the
option is added and selected. If users have not set IE to
report JavaScript errors, they will not see any error and the
script works fine. I would call this a bug in IE.

You can use setAttribute to keep IE happy, but then Firefox will
not select the option. Given that browser detection should only
be used as an absolute last resort, this would seem an
appropriate place to use try/catch:

if ( i == len-1){
try {
mySel.options[i].selected = true;
} catch(e) {
mySel.options[i].setAttribute(' selected', true);
}
}

In future, please post code that actually replicates the error,
it makes the job of suggesting fixes much easier.

The following code implements the suggestions above and fixes
the error.

I still don't understand why you don't set myEle (the option) to
selected when you create it, that way works in both Firefox and
IE without the try/catch nastiness.


<html><head><ti tle>play</title>
</head><body>
<script type="text/javascript">
function doStuff() {
var mySel = document.forms['aForm'].elements['someDropDown'];
var myEle = document.create Element('option ');
myEle.value= 'someValue';
myEle.appendChi ld(document.cre ateTextNode('so me string'));

// why not set it to selected here?
// myEle.selected = true;

mySel.appendChi ld(myEle);

// if set to selected above, this whole block is not needed.
var len = mySel.length;
for (var i=0; i<len; i++) {
if ( i == len-1){
try {
mySel.options[i].selected = true;
} catch(e) {
mySel.options[i].setAttribute(' selected', true);
}
}
}

}

</script>
</head><body>

<form action="" name="aForm">
<select name="someDropD own" id="someDropDow n">
<option value="steve">S teve</option>
<option value="harry">H arry</option>
<option value="sue">Sue </option>
</select>
<br>
<input type="button" onclick="doStuf f();" value="Click">
</form>

</body></html>



--
Rob

[debugger]

Re: drop down error

Thank alot Rob,

Your try and catch did the job. I didn't know about the
document.create TextNode() earlier. And thanks for pointing that out.
For your question:[color=blue]
> // why not set it to selected here?
> // myEle.selected = true;[/color]

I have three for loops and in the third for loop, i have an if
conditional to check for which item to select(as there are many to
select from). Now for others to understand my code, I have the "if"
conditional in separate for loop. Therefore I did that just for
readability purposes. I think are right, I should put it after element
is created.

Thanks again,
JS


RobG wrote:[color=blue]
> debugger wrote:[color=green]
> > the error is "htmlfile: Could not set the selected property.
> > Unspecified error."
> >
> > option element for drop down is created by:
> > for(.......)
> > {
> > var myEle = document.create Element("option ");
> > myEle.value=som e value;
> > myEle.innerHTML = some string;[/color]
>
> Yuck. Why use innerHTML?
>
> myEle.appendChi ld(document.cre ateTextNode('so me string'));
>[color=green]
> > document.getEle mentById("someD ropDown").appen dChild(myEle);[/color]
>
> Do some feature detection before using gEBI (and you should
> probably include a document.all method too if using gEBI):
>
> if (document.getEl ementById) {
> document.getEle mentById("someD ropDown")...;
> ...
>
> Or even better, use the forms collection:
>
> document.forms['someDropDown']...;
>
> Avoids gEBI entirely - but see notes below.
>[color=green]
> > }
> > after this, there is other for loop setting the selected property.
> > code causing the error:
> > for(var k=0; k<something; k++)
> > {
> > if(somecodition )
> > {
> > var mySelectedOptio n =
> > document.getEle mentById("someD ropDown").optio ns[k];
> > mySelectedOptio n.selected=true ; <<<<<<<<<<<<=== ===== error
> > occurs here[/color]
>
> Why not keep a reference to "someDropDo wn" when you access it
> above, then use it again when referencing the option:
>
> var myDropDown = document.forms['someDropDown'];
> myDropDown.appe ndChild(myEle);
>
> ...
>
> myDropDown.opti ons[k].selected = true;
>
>
> Now there is no need for the second gEBI (or if the forms
> collection is used, no need for gEBI at all)
>
> [...][color=green]
> > now when i put alert in the above "if statement", the error does[/color][/color]
not[color=blue][color=green]
> > occur.[/color]
>
> Whilst Firefox does not generate an error, IE does. The error
> is not fatal and the script appears to execute properly - the
> option is added and selected. If users have not set IE to
> report JavaScript errors, they will not see any error and the
> script works fine. I would call this a bug in IE.
>
> You can use setAttribute to keep IE happy, but then Firefox will
> not select the option. Given that browser detection should only
> be used as an absolute last resort, this would seem an
> appropriate place to use try/catch:
>
> if ( i == len-1){
> try {
> mySel.options[i].selected = true;
> } catch(e) {
> mySel.options[i].setAttribute(' selected', true);
> }
> }
>
> In future, please post code that actually replicates the error,
> it makes the job of suggesting fixes much easier.
>
> The following code implements the suggestions above and fixes
> the error.
>
> I still don't understand why you don't set myEle (the option) to
> selected when you create it, that way works in both Firefox and
> IE without the try/catch nastiness.
>
>
> <html><head><ti tle>play</title>
> </head><body>
> <script type="text/javascript">
> function doStuff() {
> var mySel = document.forms['aForm'].elements['someDropDown'];
> var myEle = document.create Element('option ');
> myEle.value= 'someValue';
> myEle.appendChi ld(document.cre ateTextNode('so me string'));
>
> // why not set it to selected here?
> // myEle.selected = true;
>
> mySel.appendChi ld(myEle);
>
> // if set to selected above, this whole block is not needed.
> var len = mySel.length;
> for (var i=0; i<len; i++) {
> if ( i == len-1){
> try {
> mySel.options[i].selected = true;
> } catch(e) {
> mySel.options[i].setAttribute(' selected', true);
> }
> }
> }
>
> }
>
> </script>
> </head><body>
>
> <form action="" name="aForm">
> <select name="someDropD own" id="someDropDow n">
> <option value="steve">S teve</option>
> <option value="harry">H arry</option>
> <option value="sue">Sue </option>
> </select>
> <br>
> <input type="button" onclick="doStuf f();" value="Click">
> </form>
>
> </body></html>
>
>
>
> --
> Rob[/color]

[RobG]

Re: drop down error

debugger wrote:[color=blue]
> Thank alot Rob,
>
> Your try and catch did the job. I didn't know about the
> document.create TextNode() earlier. And thanks for pointing that out.
> For your question:
>[color=green]
>> // why not set it to selected here?
>> // myEle.selected = true;[/color]
>
>
> I have three for loops and in the third for loop, i have an if
> conditional to check for which item to select(as there are many to
> select from). Now for others to understand my code, I have the "if"
> conditional in separate for loop. Therefore I did that just for
> readability purposes. I think are right, I should put it after element
> is created.
>
> Thanks again,[/color]

Glad to help. :-)

--
Rob