Problems with IE - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Problems with IE

DOM & IE

blackeagle2

12:30 pm on Feb 18, 2006 (gmt 0)

10+ Year Member

Hi, I have written a code based on what a member of this forum has given to me, it works fine on Firefox but does not work at all on Internet Explorer


<html>
<head>
<title>Test</title>
</head>
<body>
<script language="Javascript"> 
function getSiblingElm(elm, drn)
{
var strSibling = drn==-1? "previousSibling":"nextSibling";
while( (elm=elm[strSibling]) && elm.nodeType!= 1){}
return elm¦¦null;
}function displayNextElm(elm,boolShow)
{
elm = getSiblingElm(elm)
if(elm) elm.style.display = boolShow? "block":"none";
}
function generateCode(a,b)
{
targete = document.getElementById('targete');
aLink = document.createElement('a');
aLink.setAttribute('onclick','displayNextElm(this,1); return false;');
aLink.setAttribute('href', '#');
aLink.innerHTML = a;
divHidden = document.createElement('div');
divHidden.setAttribute('style','display : none;');
divHidden.innerHTML = b;
targete.appendChild(aLink);
targete.appendChild(divHidden);
}
</script><div id="targete"></div>
<script language="Javascript">
generateCode('Lorem Ipsum','Lorem ipsum dolor sit amet');
</script>
</body>
</html>

Bernard Marx

6:58 pm on Feb 18, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Looks like my junk there, but it's not my fault, but the way it's been used.
..but it's not your fault either. It's Internet Explorer weirdness.

There are 2 reasons it's not working:

1) IE creates global variables out of all element

id

s. So an element can simply be referred to using its

id

as a variable name, rather than using

getElementById

et al (Other browsers quietly do this now too).

If, after the element has been parsed, you try to create your own global variable using that

id

as variable name (often useful) IE chokes. This makes no sense in pure Javascript terms, but it happens.

In your case, the global variable creation is (I suspect) accidental, and unnecessary.

Solution: Turn

targete

into a local variable (and do the same for

elm

,

aLink

, and

divHidden

too while you're there).

2) Because of IE's lazy (and poor) implementation of

setAttribute

, it doesn't work with event handlers and the

class

and

style

attributes.

a) Change this:

aLink.setAttribute('onclick','displayNextElm(this,1); return false;');

to this:

aLink.onclick = linkClick;

Then define

linkClick

outside:

function linkClick()
{
  displayNextElm(this,1); return false;
}

b) IE doesn't like setting style with

setAttribute

either.

Change this:

divHidden.setAttribute("style","display:none");

to this:

divHidden.style.display ="none";

or this:

divHidden.style.cssText = "display:none";

The 2nd option gives you the chance to use CSS syntax again, and to set multiple properties at once.

drhowarddrfine

9:53 pm on Feb 18, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

IE is eight years behind in DOM standards compliance while Firefox and others are reasonably up to date. IE7 will not make any improvements for DOM support.

blackeagle2

1:58 am on Feb 19, 2006 (gmt 0)

10+ Year Member

Yes it was your code, I forgot your name...

Thanks for your help, you were right!
Damn IE sucks ...

prasanth jvrs

7:03 am on Feb 19, 2006 (gmt 0)

10+ Year Member

Hi,

Just for any one for working code in IE.
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="Javascript">
function getSiblingElm(elm, drn)
{
var strSibling = drn==-1? "previousSibling":"nextSibling";
while( (elm=elm[strSibling]) && elm.nodeType!= 1){}
return elm;
}

function displayNextElm(elm,boolShow)
{
alert('entered');
elm = getSiblingElm(elm)
if(elm) elm.style.display = boolShow? "block":"none";
}

function generateCode(a,b)
{
var targete = document.getElementById('targete');
aLink = document.createElement('a');
aLink.onclick=linkClick;
//aLink.setAttribute('onclick','displayNextElm(this,1); return false;');
aLink.setAttribute('href', '#');
aLink.innerHTML = a;

divHidden = document.createElement('div');
divHidden.style.display="none";
//divHidden.setAttribute('style','display : none;');
divHidden.innerHTML = b;

targete.appendChild(aLink);
targete.appendChild(divHidden);

function linkClick() {
displayNextElm(this,1);
return false;
}
}

</script>

<div id="targete"></div>
<script language="Javascript">
generateCode('Lorem Ipsum','Lorem ipsum dolor sit amet');
</script>
</body>
</html>

Thanks
Prasanth J.V.R.S