I have taken over support of a Python CGI application, no big deal seems like an ok code base and the fixes seem simple. The first fix that needed to be done was a very simple change to some wording which required me to change a cgi file so I made the change tested it and it all worked on my dev system so I then uploaded the file over FTP to the server and nothing worked. So after lots of debugging trying all sorts of things, I remembered something about the binary and ASCII transfer settings for FTP. Mine was set to binary so I switched it over to ASCII uploaded the file again and sure enough everything worked again.

So as a word of advice when working with CGI and FTP always check your transfer settings, had I done this when I started I wouldn’t have wasted hours of my night.

Finding a fix for the dynamic table row problem, I started to use the insertRow() functionality which did solve the problem in FireFox. So I would call insertRow() on the table then returned in the table row object that I then used innerHTML to add all the relevant code to produce the inputs and labels. This was tested and worked great in FF, this type of solution was wanted instead of adding each cell because there were Ajax calls used to generate some of the drop down inputs.

When it came to testing with IE6 and IE7 here came the problem there was a strange error when ever the rows were being added. So I did some digging and I finally found the following.

**Note **In Internet Explorer, the innerText and innerHTML properties are read-only on the tr object.

This came from MSDN, available <a href=http://msdn2.microsoft.com/en-us/library/ms532998.aspx”>here</a>. So great now I’m faced with finding a workaround or redeveloping all the Ajax based menus. I could switch to JSON or returning JavaScript and running eval on it, but that would mean either redoing all the static parts of the system or having two separate pieces of code to do the same thing which is never good.

So if your going to be adding dynamic rows to tables with inputs I’ve ruled out using innerHTML on both the table element and the tr. Check back soon and I’ll see if I can find a workaround or if I end up using a different method to generate my rows.

Update
View a workaround here

I’ve been building a web based application that uses Ajax and other JavaScript extensively. While working with adding rows to tables dynamically I’ve found the wrong way to do it and thought I should share. When adding rows to tables if the rows are simply data this method will work fine, but when the rows contain form inputs there is a problem.

This will add a new row no problem.

    var elm = document.getElementById("tableone");
    var old = elm.innerHTML;
    elm.innerHTML = old + "<tr><td>Sample</td></tr>";

But if we add some inputs we start getting problems.

    var elm = document.getElementById("tableone");
    var old = elm.innerHTML;
    count++;
    elm.innerHTML = old + "<tr><td><input type='text' name='test"+count+"' id='text"+count+"' /></td></tr>";

When we add one row then enter a value in the input then, the user hit a plus button to add another row the data that was entered is lost. So this is how not to do dynamic tables with inputs, more to follow on how to fix this problem.