Coding AJAXified pages drives me nuts!

The little inconsistencies between the way IE, and Firefox handle various DOM requests will drive me mad one day. Why can't we just all code to the standard? :(

For example, I wanted to have a collapsible table which displays list of entries. You click on a 'remove' checkbox next to one entry, and it goes away as the table neatly collapses to fill in the gap. In the background you have asynchronous call to remove this row from the db. One would think that the hardest part would be the db call. But that was easy!

First you create the http request object:

request_o = new ActiveXObject("Microsoft.XMLHTTP"); // IE
request_o = new XMLHttpRequest(); // everyone else

Then I send a post request to a php script (here aptly named ajax_request_handler.php..

request_o.open('post', 'ajax_request_handler.php');
request_o.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request_o.http.send('rowid=' + rowid);

This works like an oridinary post request from a web form (ie. php can access the sent value via $_POST["rowid"]).

At this point I don't care about error handling. If there was some error then the php script will fail quietly and no harm is done.

The hard part was collapsing the table! What I initially did is I marked the tr tags with id's representing row numbers:

<tr id="row_1"> ... </tr>

Then I have onChange javascript call to handle the reformatting and AJAX call:

<input type='checkbox' name='remove' onChange='removeRow("row_1");'>

I implement this function in Javascript:

function removeRow(rowid)
{
document.getElementByID(rowid).innerHTML="";
}

So in effect the contents of the <ltr> tag are set to an empty string. Should work, eh? It did work but only on IE! FF refused to cooperate - and I'm not sure why. I know that the browser does implement the innerHTML property. I could for example grab all the code inside the <tr> tag but I could not erease it. Any clue why?

After several hours of agonizing over this, and constant browser flipping (fix some code, test in IE, test in FF, fix some code, etc...) I gave up and decided to change approach. Instead of removing the information, I would just hide it:

document.getElementByID(rowid).style.display="none";

This is not necessarily what I initially had in mind but it works in both browsers. Good enough for me. When the user refreshes the page the hidden entries will be gone anyway, because they were removed from the DB via AJAX call.

Of course, it was still far from perfect. FF and IE handle the onChange attribute differently! In FF, when I click on the checkbox the entry is removed and collapsed immediately. In IE however it sticks around. I have to click on the checkbox, and then click on something else for onChange to be registered. Gah!

I didn't know that. I don't use fucking IE! I thought that for checkboxes onChange is handled the same way as onClick - immidiately. I guess MS developers thought differently. So I changed my onChange to onClick just to be consistent.

So far everything seems to work correctly. Sigh.. Why does client side coding have to be so painful?

Tags: ajax, javascript, programming, web, web development, collapsible tables, dynamic pages