Editing table elements using Ajax and Javascript

Last night, while working on Ajax and Javascript, I came across a strange problem. The code which I had written worked smoothly in Firefox, but in IE it just didn’t show up. During debugging, I found out that the problem was there

document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText

which I had picked up from the tutorial here.

After some slogging, it became clear to me, that since the tutorial works fine, the way I was implementing it must have had some problems. Half an hour later, I found out that the problem occurred because innerHTML is read only, because of which IE was giving an error.

There were a lot of people who had encountered the same problem before, but somehow I didn’t think anybody was able to explain it really well.

How the issue got resolved is this:
The tr value is read only, but you can edit the td values. So to edit values inside a table, you don’t need to create or delete cells, but edit the innerHTML value for tr.

Here is what the edited line looks like:

In index.php, I added an id value for the td element I wanted to change.
Followed by this line in the javascript. Here ‘changevalue’ is the id tag of the td element.
document.all.changevalue.innerHTML = response;

And now it works like a charm..

This entry was tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>