Topic: ajax add row to a table

Hi, maybe not exactly a rails question, sorry in advance, but im trying to use rjs to update a html table and add a row to it. I have used rjs in the past so I dont think its a rjs issue, but more of a IE/Firefox, javascript issue which we are generating.

Here are my scenarios:
- adding row to a table in firefox & IE  - works but formatting is all messed up
- adding embeded table inside of row works and looks good for firefox but is above the row its supposed to be in location, in IE I get an "Object Error" javascript dialog

Should I try a hidden row, then make it visible and add the html?

are there some ajax rules around tables I need to be aware of, if so, what should i do if I want dynamic behavior?


Re: ajax add row to a table

I'd use firebug in firefox to make sure the html your passing it what you meant to actually pass. Also you can observe the javascript. I have has several errors that were easily fixed once I took a look at the generated source.

Rails, Javascript, Actionscript and More.

Re: ajax add row to a table

ok, I took another approach since I was fairly certain I was passing correct stuff (did look quickly at firebug) , instead of adding a row to a table dynamically I put the row there with style display:none, then just replaced the html and made it visible and this seems to work fine on both IE and firefox.

I have heard othr rumors somewhere that html tables are a bit tempermental when adding rows dynamically.

anyway, work around is good for now, if I get time ill try to play more with it and get to the real root cause or show some examples of what I mean at least.

Re: ajax add row to a table

I don't know if this is the best place to put this, but I think I might have had a similar problem. But it looks like there was an easy workaround.

The basic description was that when I had my RJS file do a insert_html or a replace_html on an table element in the document, FF and Safari had no issues but IE (the big piece of crap it is) was causing an RJS error (obj error). Weird. Of course, you only see the RJS error in development mode. In production mode, it just doesn't run that javascript.

IE, just didn't like it when I put the id on the table itself, so I put a <tbody> tag inside the table and put the id on that tbody tag instead of the table. 
W3 schools says if you use the tbody tag, then you must use the corresponding thead and tfoot tags as well.

Which I was happy to do. Now it looks like all three browsers are happy. And IE can now insert and replace table rows into the tables without error.

Hope that helps someone.


Re: ajax add row to a table

IE6/7 table's innerHTML is read-only, so that might be causing the problems.  To get around it, you can usually insert before/after a 'tr' instead of inserting at the top/bottom of a 'table'.

See MS Docs for more info