473,545 Members | 2,591 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE6 won't hide dynamically created span elements

I have a little form with a couple of dynamically generated list
boxes. When the user makes a selection from the first box, the second
box is refreshed. When they make a selection from the second box, I
concatenate the selections from the two boxes and add the string to a
list at the top of the form, using createElement and appendChild. The
list is actually a bunch of span elements contained within a div. Each
span element includes a small graphic of a red X, which the user can
click to delete that item from the list.

All of this works just fine in Mozilla and Opera, but - wait for it -
the delete functionality fails in IE, throwing an "Object Required"
error on this line:

this.style = document.getEle mentById(nm).st yle;

where nm is the ID of the span element I'm trying to hide, by setting
it's display property to "none."

What's really interesting is the fact that I have one or more span
elements in that div when the form first loads, and IE will hide these
HTML-based elements without complaining. It's only the spans that I
generate on the fly that it has a problem hiding.

Must be something wrong with the way I'm creating those dynamic spans,
you say? Maybe so, but IE does display them okay, and the code all
works great in the other two browsers. Now I'm no javascript veteran,
by any means, but this appears to me to be a bug in IE. What I asking
here is whether anybody knows of a workaround for this, or maybe a
better way of accomplishing what I'm trying to do.

Thanks in advance,
Blake Couch
Javascript Noob
Jul 23 '05 #1
27 4695
Nicholas Couch wrote:

this.style = document.getEle mentById(nm).st yle;


That should be 'nm' ...

this.style = document.getEle mentById('nm'). style;

I can only guess that's your problem without actually looking at the code.
Jul 23 '05 #2
Nicholas Couch wrote:
[snip]
All of this works just fine in Mozilla and Opera, but - wait for it -
the delete functionality fails in IE, throwing an "Object Required"
error on this line:

this.style = document.getEle mentById(nm).st yle;

where nm is the ID of the span element I'm trying to hide, by setting
it's display property to "none."

[snip]

You could try putting your elements inside <div> rather than
<span> - I think the effect is the same and you have much more
functionality available from divs. Try something like:

divRef.style.di splay='none';

where divRef is a reference to the div you want to hide.

I tried the above, it worked fine in Safari and IE 5.2 on
Mac - no guarantee for IE on Windows but I have done a similar
thing for Windows using divs and it works fine.

Cheers, Rob
Jul 23 '05 #3
Nicholas Couch wrote:
<snip>
Must be something wrong with the way I'm creating those
dynamic spans, you say?
Yes.
Maybe so, but IE does display them okay, and the
code all works great in the other two browsers.
So it is not 100% faulty.
Now I'm no javascript veteran, by any means,
Obviously, as it doesn't take much experience to work out that in order
to debug code people need to be able to see it.
but this appears to me to be a bug in IE.
What, a web browser with a bug? ;)
What I asking here is whether anybody knows of
a workaround for this,
It probably doesn't need a workaround. Cross browser code would probably
suffice.
or maybe a better way
of accomplishing what I'm trying to do.


What you are trying to do (at least claming that you are trying to do)
works successfully in IE browsers.

Richard.
Jul 23 '05 #4
Fred Oz <oz****@iinet.n et.auau> wrote in message news:<41******* *************** *@per-qv1-newsreader-01.iinet.net.au >...
Nicholas Couch wrote:
[snip]
All of this works just fine in Mozilla and Opera, but - wait for it -
the delete functionality fails in IE, throwing an "Object Required"
error on this line:

this.style = document.getEle mentById(nm).st yle;

where nm is the ID of the span element I'm trying to hide, by setting
it's display property to "none."

[snip]

You could try putting your elements inside <div> rather than
<span> - I think the effect is the same and you have much more
functionality available from divs. Try something like:

divRef.style.di splay='none';

where divRef is a reference to the div you want to hide.

I tried the above, it worked fine in Safari and IE 5.2 on
Mac - no guarantee for IE on Windows but I have done a similar
thing for Windows using divs and it works fine.

Cheers, Rob

Thanks for the suggestion, but I've actually tried all sorts of
combinations of elements - spans inside a div, divs inside a span,
divs inside another div, paragraphs, you name it. The spans are what I
really want to use, for cosmetic reasons.

It always comes back to the same thing: it's the dynamically generated
elements that IE chokes on, no matter what type they are. It's like
those objects are not getting registered somehow, even though they
display okay.

Thanks again,
BC
Jul 23 '05 #5
On 17 Sep 2004 08:14:58 -0700, Nicholas Couch wrote:
..I've actually tried all sorts of
combinations of elements - spans inside a div, divs inside a span,
divs inside another div, paragraphs, you name it.
A process commonly referred to as
'making it up as you go along'.

The simple fact is that if you are writing
invalid HTML, dynamically or otherwise, all
bets are off as to how it will render.

You should create a static HTML page of the
basic element structure first, and confirm
that it is valid HTML.
<http://validator.w3.or g/>
..The spans are what I
really want to use, for cosmetic reasons.


???

Do you want an element that spans from
one side of the browser to the other?
Use a <div>.

Do you want an element that can be contained
within a line (or lines) of text?
Use a <span>.

[ Your suggestion of 'spans indside divs'
is invalid HTML. ]

Once you're content is marked up with the
appropriate HTML elements, you can use CSS
to specify the look of each.

HTH

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.lensescapes.com/ Images that escape the mundane
Jul 23 '05 #6
Richard -

I didn't post my code because it's pretty clear that IE, not my code, is
the problem. I'm pretty sure that I am indeed using cross-browser DOM1
code, and as I already said, it all works great in at least two other
browsers. What I was hoping to find was a response from someone who has
run up against the same bug in IE and found a workaround, but since you
seem to be so keen on seeing the code, here it is:

function positionChange( )
{
var b = document.form1. baseSelect;
var posSel = document.form1. positionSelect;
var base = b.options[b.selectedIndex].text
var p = posSel.options[posSel.selected Index].text
var v = posSel.options[posSel.selected Index].value;
var newElem = "span";
// here's where we create a new element under the "prefs" element
// first we get a reference to prefs
var pr = new getObj("prefs") ;
// then we create a new element
var newel = document.create Element(newElem );
// finally, append the new element to the prefs element
pr.obj.appendCh ild(newel);
// ???
newel.setAttrib ute("ID", "pref" + v);
newel.setAttrib ute("style", "display:block; ");
// create an anchor element for the new element
var an = document.create Element("a");
// append the anchor to the new element
newel.appendChi ld(an);
an.setAttribute ("href", "javascript:dro p_pref(\"pref" + v + "\")");
an.setAttribute ("title", "delete");
// create a new IMG element to go with the anchor
var newimg = document.create Element("img");
// append the image to the anchor
an.appendChild( newimg);
newimg.setAttri bute("src", "/common/images/delete_small.gi f");
newimg.setAttri bute("border", "0");
newimg.setAttri bute("alt", "delete");
// create a TextNode element for the new element and append it
var txt = document.create TextNode(" " + base + " - " + p);
newel.appendChi ld(txt);
// create a line break and append that
var br = document.create Element("br");
newel.appendChi ld(br);
}

function drop_pref(id)
{
var x = new getObj(id);
// alert("display = " + x.style.display );
x.style.display = 'none';
}

function getObj(nm)
{
if (document.getEl ementById)
{
this.obj = document.getEle mentById(nm);
this.style = document.getEle mentById(nm).st yle;
}
else if (document.layer s)
{
this.obj = document.layers (nm);
this.style = document.layers (nm);
// "old" Netscape
}
else if (document.all)
{
this.obj = document.all(nm );
this.style = document.all(nm ).style;
// old IE
}
}

I appreciate any insight you can give on this problem.

Thanks,
BC
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #7
On Fri, 17 Sep 2004 15:35:38 GMT, Andrew Thompson wrote:
[ Your suggestion of 'spans indside divs'
is invalid HTML. ]


....errr, whoops! Should have validated that.

It is 'divs inside spans' that is invalid.
Jul 23 '05 #8
Nicholas Couch wrote:
Richard -

I didn't post my code because it's pretty clear that IE,
not my code, is the problem.
And as you cannot change IE you therefor could not solve your problem by
changing your code.
I'm pretty sure that I am indeed using cross-browser
DOM1 code,
DOM 1 code is not necessarily cross-browser (even cross-DOM 1 supporting
browsers).
and as I already said, it all works great in at least two
other browsers. What I was hoping to find was a response
from someone who has run up against the same bug in IE
and found a workaround,
Without being able to see the code it is not possible to know which
bug/feature of IE you have run up against (all browsers have bugs and
features, usually lot of them).
but since you seem to be so keen on seeing the code, here
it is:
<snip> newel.setAttrib ute("ID", "pref" + v); ^^
Code == quick and painless answer!

When creating elements dynamically, instead of using setAttribute,to set
HTMLElement properties listed in the HTML DOM it is advisable to set the
corresponding object properties directly. In this case the - id -
property of the new span element:-

newel.id = ("pref" + v);

- the resulting code works with all HTML DOM browsers.

If you insist on using setAttribute then it is necessary to use
attribute names in the form that IE understands them, thus exactly the
same mixed case strings as are found as named properties of IE's
attributes collection. In this case IE will act on the setting of an
"id" attribute if that attribute name is _all_ lowercase_. (But it is
easier to set the properties directly.)

<snip> newel.appendChi ld(an);
an.setAttribute ("href",
"javascript:dro p_pref(\"pref" + v + "\")");

<snip>

Javascript pseudo-protocol HREFs are known troublemakers and should
never be used in cross browser code. Instead, at this point you should
assign a harmless - href - property (as it will never be acted upon '#'
would do) and assign a navigation-cancelling onclick handler to the -
onclick - property of the A element. Then you no longer need an ID
attribute anyway as such an onclick handler can eliminate its containing
span from the document with:-

this.parentNode .parentNode.rem oveChild(this.p arentNode);

As could a similar event handler on <BUTTON> or <INPUT type="image">
elements in the same context.

Richard.
Jul 23 '05 #9
Well, Richard, you're absolutely right - I should have included my code
in my first post. Changing the setAttribute calls to setting properties
directly solved the problem. On the other hand, if IE didn't treat
setAttribute in a non-standard way, I wouldn't have had this problem in
the first place. I read in Danny Goodman's book that appendChild,
setAttribute and the like are DOM1 _and_ supported by IE as of version
5. If I had read closer, I would have seen his discussion of the way IE
handles setAttribute. It supports those calls alright, but in its own
peculiar way.

One thing still puzzles me. When I try to set the display style of my
new span with

newel.style = "display:block; ";

IE throws a "member not found" error. At first I simply commented this
line, and all was well. Then I changed it to read

newel.style.dis play = "block";

and that worked too, so I kept it. Now presumably the problem I was
having before had to do with IE not finding the span object in its
collection, or perhaps more precisely, not finding the style attribute
of the span object. So does IE create the necessary style attribute if I
fail to specify it myself, but not create it if I specify it in a way
that doesn't conform to its interpretation of setAttribute? More
importantly, does anybody care?

Thanks,
BC
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #10

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

Similar topics

1
1280
by: Astra | last post by:
I may be posting to completely the wrong newsgroup, but I need to ask. Basically I have created a shop cart that displays the current running total in the header of my site so that it appears at the top of every page. This value is updated when the customer adds to the basket, but the problem is that this value is displayed before the...
12
15645
by: Jerad Rose | last post by:
I searched for a while trying to find the answer to this, but to no avail. I am trying to find the best way (or any way) to dynamically show and hide groups of TR's. For example, I have a section of about 6 table rows that all need to be hidden if a certain condition is met. But I don't want to hide the whole table. And, I don't want to...
3
9498
by: ted benedict | last post by:
hi everybody, didn't find this using the search :( this is my problem: i create a dom element dynamically (<span>) and want to assign a class attribute to it such that it has some css style, this works in ie, but not in firefox :( here's the simple code: <div id="somediv"> </div> var div = window.document.getElementById("somediv"); var...
3
2787
by: toodi4 | last post by:
I'm using a javascript that hides and unhides text based on a button click. It works great across static fields on a form. The problem I have is that I'm trying to hide and unhide various fields that are populated on the page by a database. In other words, sometimes there are 4 fields, sometimes 6. I've used various scripts for the...
7
7473
by: abs | last post by:
Hi everyone. Please, check my test code here: http://skocz.pl/jstest . The trouble is that no matter which span element I click, it alerts '3' and I'm wondering why not '1' for the first span, '2' for second and '3' for third ? Anybody has any idea ? Best regards, ABS
2
2529
by: Ed Jay | last post by:
I'm dynamically creating several form input elements: mValue = integer constant; for(var j = 0; j < mValue; j++) { target = "imgCn"+ j; eName = "myFile"; eName = eName+jj; document.getElementById(target).innerHTML = "<input type = 'file' name="+eName+" value=''>text"; }
1
1823
by: pstephen01010101 | last post by:
I've ran out of debugging ideas. If anyone knows why this won't run in IE 6 please let me know. It works fine in Fire Fox 2.0.0.3 and Netscape (version unknown). I suspect there is something basic about IE and Javascript that I'm wholly unaware of. I've edited the HTML code to include just the essential elements because it exceeded the allowed...
2
2507
by: rickl2790 | last post by:
Hi All I am putting a form together and I need to be able to hide or display elements of the form based on what is selected with a select. The form is a passenger details entry form and the number of passenger entry elements depends on what was selected in a select. The HTML is as follows <tr> <td width="124"><span class="sectorlabel">...
5
20022
by: Summercool | last post by:
wow... i didn't know that, for <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <span style="width: 100px; background: yellow">a</span>b <div style="width: 100px; background: yellow">a</div>b
0
7682
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7935
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7449
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6009
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5351
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
5069
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
3465
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1911
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
1037
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.