Win a copy of Pragmatic AI this week in the Artificial Intelligence forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Jeanne Boyarsky
  • Liutauras Vilda
  • Campbell Ritchie
  • Tim Cooke
  • Bear Bibeault
Sheriffs:
  • Paul Clapham
  • Junilu Lacar
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Ganesh Patekar
  • Tim Moores
  • Pete Letkeman
  • Stephan van Hulst
Bartenders:
  • Carey Brown
  • Tim Holloway
  • Joe Ess

Funny innerHTML behavior  RSS feed

 
Ranch Hand
Posts: 502
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm trying to dynamically generate a table in Javascript. I have a DIV tag inside a TABLE tag. I'm dynamically generating the TR/TD tags as a string and setting the innerHTML of the DIV to the generated string. For some reason, the browser is removing the opening TR and TD tag, and my rows aren't being displayed.

Here's my code



In my onLoad, I am calling insert multiple times. I am sure insert works correctly. However, whe I call drawTable, the second alert shows < TR >< TD >Mr. Smith< /TD >< TD >1< /TD >< TD >10/10/2000< /TD >< TD >Java< /TD >< /TR > which is correct, but the third alert shows Mr. Smith< /TD >< TD >1< /TD >< TD >10/10/2000< /TD >< TD >Java< /TD >< /TR > . The opening TR and TD tags are removed

I am using IE. I know :roll:

[ September 17, 2005: Message edited by: Jayesh Lalwani ]

[ September 17, 2005: Message edited by: Jayesh Lalwani ]
[ September 17, 2005: Message edited by: Jayesh Lalwani ]
 
Greenhorn
Posts: 14
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try with the insertRow method. Here is an example :
http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow
 
Jayesh Lalwani
Ranch Hand
Posts: 502
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I know about the insertRow. I don't want to use the insertRow method. The reason is that I'm trying to write a custom JSP tag that can populate any HTML tag using Javascript objects. So, for example, my JSP code will be like this



Similarily, if I want to populate a Select, it would be like this


So, my bright idea was to have my custom tag generate a DIV tag and also some javascript that will populate the Div tag with the correct HTML. It would be the equivalent of the iterator tag, except that the iteration would be done on the client side, not the server side. It doesn't work

[ September 17, 2005: Message edited by: Jayesh Lalwani ]
[ September 17, 2005: Message edited by: Jayesh Lalwani ]
 
Author and ninkuma
Marshal
Posts: 66789
168
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Two points: 1) a div directly inside a table is incorrect HTML. 2) Why on earth would you defer formatting to the client when you are using JSP? Makes no sense to me.
 
Jayesh Lalwani
Ranch Hand
Posts: 502
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:
Two points: 1) a div directly inside a table is incorrect HTML. 2) Why on earth would you defer formatting to the client when you are using JSP? Makes no sense to me.



Ouch!! so my idea won't work after all So, much for a generic client-side iterator component. I'll have to make something specific for table. I'll have to add support for other elements later. Ouch, Ouch, Ouch

Formatting is done on the client side is because we want the user to sort/filter the data on the client side before the data is uploaded to the server. The user will add as many rows as s/he wants on the client side and all the rows will be sent to the server when the user submits the form. The Javascript code that I posted was a very simplified version of the final thing. The final product will have a lot more javascript methods for sorting/filtering etc etc

Anyways, don't want to hijack my own thread too much. I was hoping I could have a generic client-side Javascript iterator. Looks like if there is a way, I can't figure it out. Thanks for the info
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66789
168
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well there's probably a way to do it -- it just depends upon how much client-side complexity you want to get into. Your componenets would just have to smart enough to not generate invalid html.
 
Jayesh Lalwani
Ranch Hand
Posts: 502
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It's fine if it's complex. It's going to be reused in many pages, and if I can write a generic iterator then I might be able to save time

Does it have anything to do with HTML DOM model? I was thinking I could still do it sing createElement/appendChild, but my custom tag will have to parse the HTML in the body of the custom tag
 
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Just a quick glance over the discussion, you can not have any other tags inside of a tableto have it render correctly and be proper HTML/XHTML syntax.

You really should be using the insert row as mentioned or the createElement.

Eric
 
Consider Paul's rocket mass heater.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!