This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes Replacing table (using DOM or innerHTML) Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Replacing table (using DOM or innerHTML)" Watch "Replacing table (using DOM or innerHTML)" New topic
Author

Replacing table (using DOM or innerHTML)

Dustin Platter
Greenhorn

Joined: Sep 26, 2012
Posts: 7

Hi all,

I have a JSP page which displays some information, including a table that is generated on an external JavaScript page. I am looking for a function to replace the existing table with a new one. I've tried 'innerHTML = "<TABLE><\TABLE>";' without success. My goal is to be able to call a function via the SelectBox.onChange event, and have it generate a new table to replace the old. I'm fairly new to JavaScript/Java/JSP, but have worked with C# for ~5 years.

Example:

User sees table for StudentX.
User changes selection activating selectBox.onChangeEvent
onChangeEvent calls function replaceTable()

function replaceTable()
{
document.getElementByID("MyTable").innerHTML = myNewTable;
}
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Well your getElementById has the wrong case so that would be error #1.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

Have you run the script with the script debugger enabled? What errors are displayed?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Dustin Platter
Greenhorn

Joined: Sep 26, 2012
Posts: 7

Eric- The text posted was sample text, hence the case not being completely accurate.
Bear- No, I'm unable to run through a debugger as it is a web application, and I am unable to set up a local host environment due to computer restrictions.

I finally resigned myself to deleting the table rows, altering (heavily) my table build code, and adding the new table rows one by one. I've posted it below in case others come across this issue.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

Dustin Platter wrote:Eric- The text posted was sample text, hence the case not being completely accurate.

Please take care not to do that. It just creates red herrings that wastes everyone's time.

Bear- No, I'm unable to run through a debugger as it is a web application, and I am unable to set up a local host environment due to computer restrictions.

Of course you can. Every modern browser has a built-in debugger (Except Firefox which has the Firebug plugin). Learn to use the tools at your disposal.

I finally resigned myself to deleting the table rows, altering (heavily) my table build code, and adding the new table rows one by one. I've posted it below in case others come across this issue.

This is not a solution that anyone else should emulate.

Perhaps you should back up and try to fix the original code instead of just throwing up your hands and giving up?

P.S. Use of jQuery would make something like this almost trivial.
Dustin Platter
Greenhorn

Joined: Sep 26, 2012
Posts: 7

Bear,

1) I misspelled the text I posted in my original but the case was accurate in my code. That is what I was trying to point out. The error is not my capitalization but rather the code itself.
2) With regards to the error message, what I am able to retrieve is 'Unexpected runtime' error on line "....innerHTML = "<TABLE>...</TABLE>". My background is in desktop applications with the Microsoft languages so debugging via browser is new to me (I'm attempting to learn this as I go with little to no guidance, so feel free to suggest improvements).
3) Although I'm not against JQuery, as Java/JSP/Javascript are all new to me I am trying to focus on a limited set of new skills in order to better focus my training and ease my ability to locate an error. As it is when something doesn't work I have 3 languages which could have a syntax error. Adding JQuery would make it 4.

If you have any thoughts on how I would correctly do this I would appreciate it. The "code" below is the only thing I know to try, other then what I did (removing and adding rows) which you pointed out is not best practice.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

Dustin Platter wrote:I misspelled the text I posted in my original but the case was accurate in my code.

Understood. But my point was that sloppy posting wastes time -- yours and ours. Please read AvoidRedHerrings. Thanks.

With regards to the error message, what I am able to retrieve is 'Unexpected runtime' error on line "....innerHTML = "<TABLE>...</TABLE>".

It's be best to post the exact wording of the error message (cut and past is helpful) and to post the exact code. (I see that you did below.)

My background is in desktop applications with the Microsoft languages so debugging via browser is new to me (I'm attempting to learn this as I go with little to no guidance, so feel free to suggest improvements).

Suggestion #1: coming from a Microsoft background, I'll bet you are developing and testing using IE. Don't. You obviously need to test in IE, but I'd use one of Chrome (my choice) or Firefox w/Firebug as my development browser. Make sure that the developer tools console is always open.

Although I'm not against JQuery, as Java/JSP/Javascript are all new to me

For learning purposes, yes, it's a good idea to develop a good grasp of HTML/CSS and JavaScript. You won't be able to use jQuery effectively without that foundation.

When it comes to getting production stuff done, life is just too danged short to not use jQuery to make your code 1/10th the size, 10 times more robust, and in at least half the time.


Your end table tag is missing a character.

Also, use all lowercase for tags. In HTML4/5 it doesn't matter, but makes things easier to read, and, well, makes you look less of a novice.
Dustin Platter
Greenhorn

Joined: Sep 26, 2012
Posts: 7

Unfortunately that is the extent of the error message I receive. I am unable to use "Firebug", as I'm not at liberty to install software on my development machine (as I said I'm pretty restricted).

While I appreciate the many little tips, I don't feel you've address the primary question of 'what is the proper way to reassign a table using the document.getElementById'. You've stated I should go back and 'fix' my original issue, but provided no indication as to if I was even trying to do it correctly. I've explained the two ways I've attempted to do it, and came here for advice from those more knowledgable then I. Yet I have not seen anything as to the 'correct' way to do this.

...(To head this off, the missing tag '>' was an error while editing my post. My code is closed properly)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

Dustin Platter wrote:Unfortunately that is the extent of the error message I receive. I am unable to use "Firebug", as I'm not at liberty to install software on my development machine (as I said I'm pretty restricted).

Use Chrome. Its debugger is built in.

While I appreciate the many little tips, I don't feel you've address the primary question of 'what is the proper way to reassign a table using the document.getElementById'.

I have. innerHTML should work just fine. If it's not you're doing something wrong.

(To head this off, the missing tag '>' was an error while editing my post. My code is closed properly)

Please avoid red herrings like this. There is a Preview feature on the reply page. Use it to proofread your post before submitting.

Now please post the accurate and correct code that's causing the issue.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
The error is you are trying to set the innerHTML of a table with a table. That is not going to happen. You should be adding rows to a tbody.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

Too much work. If the entire table is to be replaced, enclose the table in a <div> and insert the entire table there.

This is why we need to see the code -- to see what you are actually doing, and why it isn't working.
Dustin Platter
Greenhorn

Joined: Sep 26, 2012
Posts: 7

Thank you. Knowing that I can't assign to a table, and rather should be assigning to a Div allowed me to make progress. I've posted what I did below in order to help others.

Bear- Please understand some people will come here with questions after looking for answers elsewhere, and may not be sure exactly where to start (code wise). If they have code great, but if they state that they aren't sure how to do it or where to start it would be helpful to give them a starting point. Had you said early on that '.innerHTML = "<table>...</table>" can't work with a Table element, but rather a Div element it would have made my path forward much more clear. That would have given me a starting point and if it didn't solve my problem outright (which it did), it would have at least allowed me to write some actual code that could then be diagnosed.


Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61066
    
  66

Dustin Platter wrote:Had you said early on that '.innerHTML = "<table>...</table>" can't work with a Table element, but rather a Div element it would have made my path forward much more clear.

Had you shown the actual code, it would have been clear that that was what you were doing. There was no way to discern that at that point.

Glad that you have made progress.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Replacing table (using DOM or innerHTML)