Win a copy of Java 9 Modularity: Patterns and Practices for Developing Maintainable Applications this week in the Java 9 forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

jQuery - add rows to table from AJAX response  RSS feed

 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm soooo close to getting this. There is just one little piece that I can't seem to see so I'm asking for help from you jQuery experts.

I can add a table, and change the id on the tbody since it will be unique, and then use that unique id to get the jQuery object that is that tbody element. Now here is where it gets tricky. Once I have the tbody I need to add rows inside of it based on the json response I've gotten. Here is what I have so far. This will only change one row. I know this, I'm just having a hard time figuring out how to arrange it so that it adds a new row instead of overwriting the current one. It just replaces the .html of the element with the next iteration through the json. How do I get it to add another row in there instead of overwriting the current .html?



sorry about how wide it is. Its the only way i can get firebug to stop yelling.

[ January 11, 2008: Message edited by: Bear Bibeault ]
[ January 11, 2008: Message edited by: Bryce Martin ]
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well I got it to work! One problem. It only works in FF2. I can't get it to work right in IE6. IE6 is what it NEEDS to work for. Here is how I did it.



[ January 11, 2008: Message edited by: Bryce Martin ]

[ January 11, 2008: Message edited by: Bryce Martin ]

[ January 11, 2008: Message edited by: Bryce Martin ]
[ January 11, 2008: Message edited by: Bryce Martin ]
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66256
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Bryce Martin:
IHow do I get it to add another row in there instead of overwriting the current .html?

$().html() will replace the entire contents. It's like assigning to innerHTML. you should investigate other methods like append(), appendTo(), insertAfter(), insertBefore() and so on.

sorry about how wide it is. Its the only way i can get firebug to stop yelling.

Huh?

Also, when posting code, please use spaces instead of tabs for indenting.
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Bear,

I'll look into those methods you mentioned. I tried to clean up the post above a bit. You can see that I did a

I guess I would look at this as an equivalent to doing a

Is there something that is faster?

And this doesn't seem to be working in IE6. Is there a known bug with the .html?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66256
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Bryce Martin:
Is there something that is faster?

I imagine that one of the insert functions would be more efficient, but that's dependent on too many factors to make a definitive guess.

And this doesn't seem to be working in IE6. Is there a known bug with the .html?

Not that I am aware of. Could you pare it down to a minimal example that shows the non-working code?
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm going to include the whole JSP. That way you understand everything about this. Its very straight forward. In this example I have two table rows. The order in row 1 will produce 10 new lines when clicked. The order in the second row only produces 1 new line when clicked. When using FF2 they both work great but when using IE6 the second order will put out its 1 row just fine, but the first order with 10 rows only displays the new header for the table I insert. No rows show up.

Here is the code.



I really appreciate you looking at this.
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So this morning I decided to add an alert box to test that the json object/string is still intact when using it in IE6. And it is. But what I discovered is that the my code displays the first row of data, but when I rewrite the $().html() it goes away. So the problem I'm having with IE6 would have to have something to do with rewriting the innerHtml?? Like I said before, it works fine in FF2, but now, only the first row shows. All subsequent executions of cause a problem.

Any thoughts? I'm going to look into those alternate methods you suggested Bear.
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I ended up using an appendTo().

I built the string which is a row of data and called it mystring. Then it made that syntax really clean and concise. It works great now. I've very excited to expand this just a little bit more now so that the first table gets loaded via jstl and java beans from a servlet. This example is very close to being ready for a tutorial and to be implemented into my big project.

Thanks for all the help. This is going to knock the socks off the users

Bryce
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66256
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Bryce Martin:
This is going to knock the socks off the users

Which is our goal!
 
Uzbek Jon
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bryce Martin wrote:... This example is very close to being ready for a tutorial and to be implemented into my big project.

I came to this page through google and thought I share a post called "jQuery - add rows to table" that I found useful. It has very nice javascript function that uses jQuery that lets you easily add a row to your tables that have or don't have <tbody> and row spans.

Example usage:

 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!