Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > IE6 won't hide dynamically created span elements

Reply
Thread Tools

IE6 won't hide dynamically created span elements

 
 
Nicholas Couch
Guest
Posts: n/a
 
      09-17-2004
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.getElementById(nm).style;

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
 
Reply With Quote
 
 
 
 
john henry bonham
Guest
Posts: n/a
 
      09-17-2004
Nicholas Couch wrote:


> this.style = document.getElementById(nm).style;


That should be 'nm' ...

this.style = document.getElementById('nm').style;

I can only guess that's your problem without actually looking at the code.
 
Reply With Quote
 
 
 
 
Fred Oz
Guest
Posts: n/a
 
      09-17-2004
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.getElementById(nm).style;
>
> 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.display='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
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      09-17-2004
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.


 
Reply With Quote
 
Nicholas Couch
Guest
Posts: n/a
 
      09-17-2004
Fred Oz <(E-Mail Removed)> wrote in message news:<414aa137$0$24385$(E-Mail Removed)>...
> 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.getElementById(nm).style;
> >
> > 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.display='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
 
Reply With Quote
 
Nicholas Couch
Guest
Posts: n/a
 
      09-17-2004
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.selectedIndex].text
var v = posSel.options[posSel.selectedIndex].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.createElement(newElem);
// finally, append the new element to the prefs element
pr.obj.appendChild(newel);
// ???
newel.setAttribute("ID", "pref" + v);
newel.setAttribute("style", "display:block;");
// create an anchor element for the new element
var an = document.createElement("a");
// append the anchor to the new element
newel.appendChild(an);
an.setAttribute("href", "javascript:drop_pref(\"pref" + v + "\")");
an.setAttribute("title", "delete");
// create a new IMG element to go with the anchor
var newimg = document.createElement("img");
// append the image to the anchor
an.appendChild(newimg);
newimg.setAttribute("src", "/common/images/delete_small.gif");
newimg.setAttribute("border", "0");
newimg.setAttribute("alt", "delete");
// create a TextNode element for the new element and append it
var txt = document.createTextNode(" " + base + " - " + p);
newel.appendChild(txt);
// create a line break and append that
var br = document.createElement("br");
newel.appendChild(br);
}

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

function getObj(nm)
{
if (document.getElementById)
{
this.obj = document.getElementById(nm);
this.style = document.getElementById(nm).style;
}
else if (document.layers)
{
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!
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      09-17-2004
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.setAttribute("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.appendChild(an);
> an.setAttribute("href",
> "javascript:drop_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.removeChild(this.parent Node);

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

Richard.


 
Reply With Quote
 
Nicholas Couch
Guest
Posts: n/a
 
      09-17-2004
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.display = "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!
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      09-17-2004
Nicholas Couch wrote:
> Well, Richard, you're absolutely right - I should
> have included my code in my first post.


Yes you should, you would have had fixed code at least 4 hours sooner.
As should all the other individuals posting questions to this group who
don't know enough to appreciate that there are 50-odd ways of screwing
most things up and that it is impossible to tell which actually applies
without seeing the code and its context. (While we can all guess, and
even guess correctly sometimes, it is frustrating to be being
continually asked to guess when code is all that is needed for
certantly.)

<snip>
> ... . I read in Danny Goodman's book ...

<snip>

Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.

<snip>
> One thing still puzzles me. When I try to set the display
> style of my new span with
>
> newel.style = "display:block;";


The reason that I specifically stated that the properties that should be
defined directly on the element instead of using setAttribute are the
HTML attribute-corresponding properties defined in the _HTML_ DOM
specification was that other attributes are handled differently. The -
style - property of a DOM element (that implements the
ElementCSSInlineStyle interface) refers to an object implementing the
CSSStyleDeclaration interface from the W3C CSS DOM specification. Where
it is defined as a read-only property (the - style - property of the
element, not the CSSStyleDeclaration interface's properties).

The ElementCSSInlineStyle interface is formalisation of behaviour
originating in IE 4 and well supported in modern browsers. When an
element is created it already has a - style - property that refers to an
object, so it is best to set the properties of that object to the
desired values (or to set the - className - property of the element
itself, to have it acquire as set of style properties defined in CSS
elsewhere).

> 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.display = "block";
>
> and that worked too, so I kept it.


Yes that works, but it is a bit illogical to create a SPAN element (the
semantically neutral inline element intended for little more than the
application of CSS) and then give it a "block" display property, when
you could create a DIV element (the semantically neutral block element)
and just let its display property default to "block" as normal.

> 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,


Any created element (at least on modern browsers) will have a - style -
property from the moment of its creation, that represents the current
state of its inline style, as an object with named properties.

> 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?


It is normal to set the properties related to inline style on the object
provided not through the use of setAttribute('style' ,' ... ');

Richard.


 
Reply With Quote
 
Nicholas Couch
Guest
Posts: n/a
 
      09-17-2004
Richard Cornford wrote:
>
> <snip>
>
>>... . I read in Danny Goodman's book ...

>
> <snip>
>
> Danny Goodman's books are out of date and teach practices that are
> positively harmful for cross-browser scripting.
>
> <snip>
>


Virtually any book in the computing field is likely to be out of date
shortly after publication. I have the second edition of "Dynamic HTML,
the Definitive Reference," published in 2002. I gather you would not
consider it definitive, but is it really that out of date only two years
later? What would be a better resource for a confessed javascript noob?

BC





*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stéphane Klein Python 2 03-30-2010 12:35 AM
Re: I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stefan Behnel Python 0 03-29-2010 08:14 PM
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
Managing ViewState of a dynamically created Custom Composite Server Control -(where the original is also dynamically created) dickster ASP .Net Building Controls 0 12-08-2005 09:32 AM



Advertisments