IE7 choking! Object doesn't support this property or method

JavaScript
1

My partner put together this piece of Javascript to “un-class” all anchors which were childnodes of list items and add the class “selected” to the anchor that is clicked…


<script type="text/javascript">

function CngClass(obj){

ulist = obj.parentNode.parentNode;

if (ulist.hasChildNodes() ) {
   liElems = ulist.childNodes;
   // Loop through the children
   for(c=0; c < liElems.length; c++) {
      if ( liElems[c].hasChildNodes() ) {
	    aTags = liElems[c].childNodes;
   	    for(a=0;a<aTags.length;a++) {
		  aTags[a].className='';
	    }
	}
   }
}
obj.className='selected'; 
}

</script>

We added the “un-classing” because we were having an issue where if more than one instance of “slider” was used, selecting any other cleared all of them. We needed them to function independently of each other as there could be several per page.

This works great in Firefox and in IE8 but unfortunately, IE7 is choking on line 29, character 5:

aTags[a].className=' ';

Then giving me an “Object doesn’t support this property or method” javascript error. We can’t figure out what’s going on… anyone out there care to try it?

Full Page code here:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" media="screen" href="slider_test.css" />

<title>Privacy UI - Privacy Level Slider</title>

<script type="text/javascript">
/*<![CDATA[*/

function CngClass(obj){

ulist = obj.parentNode.parentNode;

if (ulist.hasChildNodes() ) {
   liElems = ulist.childNodes;
   // Loop through the children
   for(c=0; c < liElems.length; c++) {
      if ( liElems[c].hasChildNodes() ) {
	    aTags = liElems[c].childNodes;
   	    for(a=0;a<aTags.length;a++) {
		  aTags[a].className='';
	    }
	}
   }
}
obj.className='selected'; 
}

/*]]>*/

</script>

</head>

<body>

<!-- begin slider instance 1 -->	
<div id="form1PrivacySlider1" class="slider">
		<ul class="bar">
  			<li class="deny"><a onclick="CngClass(this);" id="POSITION_NOT_ALLOWED" href="javascript:void(0);">Deny</a></li>
 			<li class="askDeny"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_GRANTED" href="javascript:void(0);">Ask Deny</a></li> 
			<li class="askAllow"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_NO_RESPONSE" href="javascript:void(0);">Ask Allow</a></li>
			<li class="notify"><a onclick="CngClass(this);" id="NOTIFY_POSITION" href="javascript:void(0);">Notfiy</a></li>
			<li class="allow"><a onclick="CngClass(this);" id="POSITION_WITHOUT_NOTIFY" href="javascript:void(0);">Allow</a></li>

		</ul>
	</div>
<!-- end slider instance 1 -->

<!-- begin slider instance 2 -->
<div id="form1PrivacySlider2" class="slider">
		<ul class="bar">
  			<li class="deny"><a onclick="CngClass(this);" id="POSITION_NOT_ALLOWED" href="javascript:void(0);">Deny</a></li>
 			<li class="askDeny"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_GRANTED" href="javascript:void(0);">Ask Deny</a></li> 
			<li class="askAllow"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_NO_RESPONSE" href="javascript:void(0);">Ask Allow</a></li>
			<li class="notify"><a onclick="CngClass(this);" id="NOTIFY_POSITION" href="javascript:void(0);">Notfiy</a></li>
			<li class="allow"><a onclick="CngClass(this);" id="POSITION_WITHOUT_NOTIFY" href="javascript:void(0);">Allow</a></li>

		</ul>
	</div>
<!--  end slider instance 2 -->

</body>

</html>

Thanks in advance to anyone who cares to take a shot at this one!

2

It looks like those elements may not all be anchors. Try changing that loop to this:

    for(a=0;a<aTags.length;a++) {
		     if( aTags[a].nodeName == 'A' )
		      aTags[a].className='';		  
	    }
3

We’re currently using ICE Faces for the majority of our page components but we wanted to use a custom interface for setting the privacy level. Purchasing the custom slider component wasn’t an option so we built this. I’ve asked about doing EVERYTHING with JQuery, including what we’re trying to write by hand or use ICE Faces for but so far no luck.

I’ll continue trying to push the JQuery angle, maybe an IE incompatibility will be just the thing to make them go that route.

4

Oh man, your code makes my eyes hurt… Not only that you are not using a JavaScript library (which you should), but you are setting the onclick attribute for each ANCHOR element in the HTML code and you are also using that horrible javascript protocol thingy, or whatever it is called …

Replace this…

<a id=“whatever” onclick=“CngClass(this)” href=“javascript:void(0);”>whatever</a>

with this…

<a id=“whatever” href=“#”>whatever</a>

And then use a JS library to bind the click handler… for example in jQuery the code would be like so…

$(“li > a”).click(function() {

$(this).addClass(“selected”).parent().siblings().children(“a”).removeClass();

});

5

They declined jQuery? What are they nuts? :smiley:

Well, I assume there are rational reasons for a company to hesitate about using a particular library, but wich jQuery it’s just so much harder to think of any reason …