Basically the idea was to see a dynamic html table underneath every country/city text field, that suggests the possible values the user is typing.

Everything is generated appending child elements through javascript and removing them when needed.

As usual no problems with Firefox, but I had to battle a lot to understand the problem with Internet Explorer.

Basically the code was correctly appended inside the right element, but wasn’t visible using IE!

I could for example alert the innerHTML of the newly created table, but still couldn’t see it on the browser output.

The code I was using was:


// creating table
var mytable = document.createElement('table');
mytable.setAttribute('id','this_table_id');
mytable.className = 'my_class';
 
// creating row
var tr = document.createElement('tr');
tr.className = 'new_row';
tr.onclick = function() { do_something(); }
 
// creating td
var td = document.createElement('td');
td.innerHTML = "My Td Content";
// adding the td inside the row
tr.appendChild(td);
 
// adding the row inside the table
mytable.appendChild(tr)
 
var body = document.getElementById('my_page_body');
// adding the new table inside the page body
body.appendChild(mytable);
 


After few tests and headaches, I had a quick look at MSDN website and noticed that a lot of examples had the “tbody” tag in each generated table, why? Let’s try…

It worked! Internet Explorer needs the “tbody” tag for a table created through javascript to be visible! Crazy stuff.

The working code will look like:


// creating table
var mytable = document.createElement('table');
mytable.setAttribute('id','this_table_id');
mytable.className = 'my_class';
 
// creating tbody tag
var tbody = document.createElement('tbody');
 
// creating row
var tr = document.createElement('tr');
tr.className = 'new_row';
tr.onclick = function() { do_something(); }
 
// creating td
var td = document.createElement('td');
td.innerHTML = "My Td Content";
 
// adding the td inside the row
tr.appendChild(td);
 
// adding the row inside the tbody
tbody.appendChild(tr);
 
// adding the tbody inside the table
mytable.appendChild(tbody)
var body = document.getElementById('my_page_body');
 
// adding the new table inside the page body
body.appendChild(mytable);
 


Yes, I agree that the tag tbody is part of the w3c standard, but on HTML 4.01 W3C standards it is stated the following:

The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
 

What does it mean? I didn’t need the tbody, and IE forced me to use it! It CAN’T be safely omitted

Another thumb down for IE.

I’m a web developer and what does a web developer do? He tries to make a website work almost everywhere!

Everywhere? According to w3schools browsers stats, the sum of the users of the 2 browsers is about 90% of the whole users, so yeah, everywhere.

Here is the problem: we generally love Firefox, we really do, because there are so many tools for make your life of debugging a website heaps easier than what it would be with other browsers.

A couple of examples? Of course Firebug and the Web Developer addons!
That’s why we generally start with Firefox to build a website, then we check it on Internet Explorer… and bam! Nothing works also if you write code/javascript following every single W3C standard.

So from that point on, developing will be more like crying blood tears to understand a common way to make things work in both the 2 main browsers user by the “internet population”.

But let’s not get into this, there would be too much to talk about, and it would be only a personal view anyway.

Let’s talk about the battle I had to win today…

Objective

I just had to do some pretty basic stuff with checkboxes.

Basically the webpage had a some content (that I couldn’t modify server side) and I had to add some events through javascript on some checkboxes, to be able to display/hide some parts inside the webpage, on check/uncheck action.

I had to obtain the same feature of a normal “onclick” like this:

<div id='myid' onclick='alert("you clicked me!")' />

… dynamically.

Events… what about them?

How everyone knows, Internet Explorer uses its own weird way of handling events… and yeah who says that I am right? W3C standards of course!
(and anyway I’m carrying Firefox’s flag, so there we go )

Anyway going back to the point, everyone knows that there are two
types of event handling:

1) Firefox (W3C compatible):


myDomElement.addEventListener('eventType', function()
  {
    /* some stuff here */
  }, bool
);


2) IE:


myDomElement.attachEvent('theirEventType', function()
  {
    /* some stuff here */
  }
);


…and until here all good…

So a basic “browser detecting” would be something like:


if(window.addEventListener)
{
  /* My W3C Friends */
}
else
{
  /* Evil Browsers */
}


Then I’ve added my dirty little code on it… to attach events on the 2 browsers…


if(window.addEventListener)
{
   myElement.addEventListener('click', function()
     {
       checkboxChange(this, my_array_of_fields);
     }, false
   );
}
else
{
   myElement.attachEvent('onclick', function()
     {
       checkboxChange(this, my_array_of_fields);
     }
   );
}


As said before… I have a look at the result on Firefox… and all works fine… then I move to IE… and THUNDERSTORMS!
The above code (OF COURSE) doesn’t work!

Why? WHY???
After digging for a while I’ve figured out that the name of the object “this” passed to the function

checkboxChange(...)

was not the name of the object I was passing.
I couldn’t even get the right element through the ID, because of another problem there is with IE!

document.getElementById('myId')

IE gets confused, if you have the name of an element, equal to the id of another element and that (not my choice) was the case.
So there we go, we have to find another solution!

Solutions? Workarounds?

Of course the easiest way (and also browser indipendent) is… to use a library that someone “maybe smarter than you” wrote already

For example:

YAHOO one


YAHOO.util.Event.addListener(myElement, 'click', function()
   {
     checkboxChange(this, my_array_of_fields);
   }
);


or my favorite one MooTools


myElement.addEvent('click', function()
   {
     checkboxChange(this, my_array_of_fields);
   }
);


Figuring out that there weren’t other “onclick” events in the page for the element I was applying events on, I’ve decided to don’t use any external javascript library for this project.
I’ve used instead an anonymous function associated to the onclick event listener of my element as below:


myElement.onclick = function ()
{
  checkboxChange(this, my_array_of_fields);
}


This… just for IE of course

For Firefox instead I’m still using the addEventListener!

Hopefully I’ve been helpful to someone with this article

See ya next!