jQuery - add rows to table from AJAX response

[Bryce Martin]

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?

$(this).after("<tr class='expanded'><td colspan='4'><table class='insert' border='0' cellpadding='0' cellspacing='0'
 width='95%'><thead class='theadinsert'><tr><th>Line</th><th>Date</th><th>Amount</th><th>User</th></tr></thead><tbody id="+thisorder+"></tbody></table></td></tr>");
$.getJSON("Lines",{order:thisorder},function(jsonString){
  $(tbodyID).html.each(jsonString, function(i){"<tr><td>" + 
jsonString[i].line + "</td><td>" + jsonString[i].date + 
"</td><td>" + jsonString[i].amount + "</td><td>" + 
jsonString[i].user + "</td></tr>"});
});

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]

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.

$(this).after("<tr class='expanded'><td colspan='4'><table class='insert' border='0' cellpadding='0' cellspacing='0' width='95%'><thead class='theadinsert'><tr><th>Line</th><th>Date</th><th>Amount</th><th>User</th></tr></thead><tbody 
id="+thisorder+"></tbody></table></td></tr>");
  $.getJSON("Lines",{order:thisorder},function(jsonString){
     $.each(jsonString, function(i){
        $(tbodyID).html($(tbodyID).html() + "<tr><td>" + jsonString[i].line +
          "</td><td>" + jsonString[i].date + "</td><td>" + jsonString[i].amount +
          "</td><td>" + jsonString[i].user + "</td></tr>");
 
});
});

[ 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]

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]

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

$(tbodyID).html($(tbodyID).html() + "my next row of html code");

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

 string += "another string";

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]

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]

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<HTML>
<HEAD>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="IBM Software Development Platform" />
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="SimpleTable.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery112.js"></script>     
<script type="text/javascript" src="interface.js"></script>     
<script type="text/javascript">    
                        
$(document).ready(function() 
{
        var tblclass;   
        var order; 
$('#main').SlideInUp('slow');
 
$('.stripeMe tr').click( function(){
var sibling = $(this).next('tr');
var thisorder = $(this).children('td:first').text();
var myID = $(this).attr("id");
var tbodyID = '#'+ thisorder;

if(sibling.is('.expanded')){
sibling.toggle();
}
else{
$(this).after("<tr class='expanded'><td colspan='4'><table class='insert' border='0' cellpadding='0' cellspacing='0' width='95%'><thead class='theadinsert'><tr><th>Line</th><th>Date</th><th>Amount</th><th>User</th></tr></thead><tbody id="+thisorder+"></tbody></table></td></tr>");
$.getJSON("Lines",{order:thisorder},function(jsonString){
$.each(jsonString, function(i){
$(tbodyID).html($(tbodyID).html() + "<tr><td>" + jsonString[i].line + "</td><td>" + jsonString[i].date + "</td><td>" + jsonString[i].amount + "</td><td>" + jsonString[i].user + "</td></tr>");
});
});
};
});
 
$('.stripeMe tr').hover(function(){
tblclass = $(this).attr('class');
$(this).removeClass().addClass('over');
},function(){
$(this).removeClass().attr('class',tblclass);
});

$('.stripeMe tr:even').addClass("even");
$('.stripeMe tr :-o	 dd').addClass("odd");
 
}); 
                                 
 </script>   
<TITLE>SimpleTable.jsp</TITLE>
</HEAD>
<BODY>
<div class="main" id="main">
<table width="500px" border="0" cellpadding="0" cellspacing="0" >
<thead class="main">
<tr>
<th>Order</th>
<th> # of Lines </th>
<th>Purchase Order</th>
<th> Cust # </th>
</tr>
</thead>
<tbody class="stripeMe">
<tr>
<td >466776</td>
<td>4</td>
<td>4228</td>
<td>50096</td>
</tr>
<tr>
<td >566852</td>
<td>4</td>
<td>4228</td>
<td>50096</td>
</tr>
</tbody>
</table>
</div>
</BODY>
</HTML>

I really appreciate you looking at this.

[Bryce Martin]

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

$(#id).html($(#id).html() + "some html code"));

cause a problem.

Any thoughts? I'm going to look into those alternate methods you suggested Bear.

[Bryce Martin]

I ended up using an appendTo().

$(mystring).appendTo(tbodyID);

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]

Originally posted by Bryce Martin:
This is going to knock the socks off the users

Which is our goal!

[Uzbek Jon]

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:

addTableRow($('#myTable'));
addTableRow($('.myTables'));