How do I update table using postJSON

[Jay Abrahm]

Does anyone has code snippets for updating tables using postJSON

	<table id="example">
	<thead>
		<tr>
			<th>Report Name</th>
			<th>Report Description</th>
		</tr>
	</thead>
	<tbody>
	<c:forEach var='item' items='${plantIdReports}'>
	<tr class="gradeTest" >
	<td><c:out value='${item.reportName}'/></a></td>
	<td><c:out value='${item.reportDsc}'/></td>
	</tr>
	</c:forEach>

[Bear Bibeault]

Why would you use postJSON for such a task? And, you haven't really said anything about what you are trying to do or what problems you are having. Also, please do not post JSP markup in an HTML forum -- it's meaningless in this context.

Please put as much effort into making your posts as you would like people to take in answering them.

[Jay Abrahm]

My technology stack consists of Spring MVC 3.0 and it has a lot of support for postJSON. I have used a combination of jQuery/postJSON for some transactions like displaying combobox downdrop values and such.

Using the same wiring I was able to load data from the server into the client for loaded my jQuery datatable which already has preloaded data but I was unable to update the Spring items in the table and refreshing the table with new values.

Sorry about the jsp code fragments here. It was just to show where I was planning to use the javascript code. I can post this in the jsp forum if it makes more sense there.

[Bear Bibeault]

No. If it's a client side issue, it should be posted here, but with the generated client-side HTML. JavaScript doesn't know anything about the JSP markup.

[Gregg Bolinger]

Jay Abrahm wrote:My technology stack consists of Spring MVC 3.0 and it has a lot of support for postJSON. I have used a combination of jQuery/postJSON for some transactions like displaying combobox downdrop values and such.

Just because there is a lot of support for something, doesn't mean you should go out of your way to use it. Using postJSON for something like select values (HTML has no such thing as a dropdown) makes sense. Simple key/value pairs of data. But for something more complex, like a table, it is a lot easier to return HTML fragments. For example, on an application I am working on I have a table...

<table>
<thead>
   ....header columns
</thead>
<tbody>
</tbody>
</table>

I issue an Ajax request to the server where my controller simply forwards the request to the JSP that renders my table row:

<tr>
   <td>column 1</td>
   <td>column 2</td>
   <td>column 3</td> 
   <td>column 4</td>
</tr>

Then I just use the jQuery's append() method to add it to my TBODY element. Really simple and zero manual processing of data on the client. If you're needs a more complex then I highly recommend something like jqGrid.

[Jay Abrahm]

@ Gregg Bolinger -- Thanks, I did just that. jQuery build up html fragments. I just need to clear up some bugs in the code and I should be all good.

$(document).ready(function() {
	$("#dropdown").change(function() {
		$('#resetButton').attr("disabled", true);
		getData();
	});
});

function getData() {
	$.getJSON("app/getData", { plantId: $('#dropdownName').val()  }, function(data) {		
		if(data.length == 0) {
			alert("No data for selected plant");
		}
		setRow(data);
		/* Init the table */
		oTable = $('#example').dataTable({
			"bJQueryUI":true
		});    
		$('#resetButton').attr("disabled", false);
   	});		
}


function setReports(reports)
{
  //$('#example').remove();
  $.each(reports, function(i,report){
  	$('#example tr:last').after('<tr class="gradeTest" ><td></td><td></td><td></td></tr>');
    $("#plantListing #example tbody tr:eq(" + i +") td:eq(0)").html(
      report.reportName
    );
    $("#plantListing #example tbody tr:eq(" + i +") td:eq(1)").html(
      report.reportDsc
    );
    $("#plantListing #example tbody tr:eq(" + i +") td:eq(2)").html(
      report.reportCUID
    );
  });
}

// Inside the jsp which contains the table
$(document).ready(function() {
	/* Init the table */
	oTable = $('#example').dataTable({
		"bJQueryUI":true
	});
} );

1. After adding new rows the html table is no longer recognized as a data table.
2. If I duplicate the datatable initialization code, I get a error message that it is already initialized.
3. I need to add logic to add new rows (which I dont think is too difficult)

Thanks

[Gregg Bolinger]

Ahhhh, new information. Are you using a dataTable plugin? If so, then absolutely adding rows to it might make it not work. The plugin should have a means for you to add rows through it's API. If it doesn't then you need to find a better plugin.

[Jay Abrahm]

Its not that I withheld info :-). I just started using it then since it had a feature that I was looking for (a slick search on table data).

Mostly, javascript is all about looking in the right direction. I tried to persist with using the html fragments but you were right I had to use the API to add rows....

Thanks again Gregg .... It all looks good !!

$(document).ready(function() {
	$("#comboBox").change(function() {
		oTable.fnClearTable(0);
		$.getJSON("app/getData", { Id: $('#Name').val()  }, function(data) {
			$.each(data, function(i,row){
			oTable.fnAddData( [row.Name,row.Dsc] );
		});
	});
});