Internet Explorer: Expected Identifier

Today, I got feedback about a bug in an application in which I did some minor alterations not long ago. The application gives several rather long lists containing names and as it was often quite difficult to tell which list you are viewing after scrolling down a little bit, I was asked to do something about it. There was no easier way than to show only the first ten names of each list and put the rest in a hidden container, which is shown with help of a “show more” link.

see more / hide » »
...list....

And just a few lines of jQuery that do the magic.

$(document).ready(function() {
			$('a.show_hidden_list').click(function(e){
				e.preventDefault();
				var class = this.id.replace('i_', "");
				$(".show_"+ class +"").toggle();
			});
	});

Every time you click a link with show_hidden_list class, a function is called that first of all prevents the usual behaviour of a link, then gets the name of the desired div from the current link’s id and stores it in a variable called class. The name of this variable was chosen because it is the name of the actual class that will be shown with help of jQuery.

Everything worked fine until I received feedback from a client that it’s not working in IE8, spitting out “Expected Identifier” error. I usually test things I do in all major browsers, but might have forgotten this time with such a tiny change. Now, on closer look I found out IE6 had troubles as well as IE8 (with compatibility mode on).

After some tempering, I discovered that Internet Explorer considers the word class to be reserved and that is what was causing troubles. Could have anticipated something like this so shame on me. Anyway, all I had to do then was to change the name of the variable.

 $(document).ready(function() {
			$('a.show_hidden_list').click(function(e){
				e.preventDefault();
				var just_other_name = this.id.replace('i_', "");
				$(".show_"+ just_other_name +"").toggle();
			});
	});