wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Funny innerHTML behavior Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Funny innerHTML behavior" Watch "Funny innerHTML behavior" New topic
Author

Funny innerHTML behavior

Jayesh Lalwani
Ranch Hand

Joined: Nov 05, 2004
Posts: 502
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 ]
Marc Larochelle
Greenhorn

Joined: Sep 16, 2005
Posts: 14
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

Joined: Nov 05, 2004
Posts: 502
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 ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60773
    
  65

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Jayesh Lalwani
Ranch Hand

Joined: Nov 05, 2004
Posts: 502
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

Joined: Jan 10, 2002
Posts: 60773
    
  65

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

Joined: Nov 05, 2004
Posts: 502
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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: Funny innerHTML behavior
 
Similar Threads
div tag problem
Ajax Calls not refereshed.
Java Script in AJAX response
spaces while populating using s:iterator
JavaScript problem with IE