[Wonder-disc] for example, adding a row to a table, ajax-ishly

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 454-5900

So, I know that this is probably not the way to do what I want. Fine.  
There are lots and lots of ways to do what I want. Fine. Without  
premble, I am just trying to create a single-page app with a table of  
static info. Click on a link and, ajax-ishly, a row is added.

I came up with something that seemed to be a sensible way to do this.  
Yet it behaves oddly. I was hoping I realized something about using  
the component, and then I see I am wrong, but not why. I am using the  
AjaxUpdateComponent.

Here is the class javadoc:

	"observeFieldID requires ERExtensions, specifically ERXWOForm"

Wow. Well, it must be very simple to understand. it would make sense,  
for instance, that if you have an AjaxUpdateContainer, and an  
AjaxUpdateLink, then clicking on the link would put some stuff that  
you add to the appendRespose() at the place where the  
AjaxUpdateContainer is. Makes a little bit of sense, no?

Yet, this is not what it does. Here is what I have. So, what is the  
idea behind what the component is doing? Any suggestions would be  
appreciated.

- ray

First Try:

Main.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Adding Rows to a Table</title></head>
<body>

<wo:AjaxUpdateLink action="$update" updateContainerID="ExtraRowID">Add  
New Row</wo:AjaxUpdateLink>

<table border="1">
	<tr>
		<th>First</th>
		<th>Second</th>
		<th>Third</th>
	</tr>
	<tr>
		<td>row 1, col 1</td>
		<td>row 1, col 2</td>
		<td>row 1, col 3</td>		
	</tr>
	<wo:AjaxUpdateContainer id="ExtraRowID" />
</table>

</body></html>

from the Main.java:

public class Main extends ERXComponent {

	public Main(WOContext context) {
		super(context);
	}

	String rows = "";
	int nextRow = 2;

	public WOActionResults update() {

		String newRow = "<tr>";
		newRow += "<td>row "+nextRow+", col 1</td>";
		newRow += "<td>row "+nextRow+", col 2</td>";
		newRow += "<td>row "+nextRow+", col 3</td>";
		newRow += "</tr>";

		System.out.println("new row: \""+newRow+"\"");

		rows += newRow;
		this.context().response().appendContentString(rows);
		nextRow++;

		return null;
	}
}

Launch and then click "Add New Row" twice.

Result:

So, the idea that "the stuff you append gets put into the document at  
the container" is obviously wrong.

Next Try:

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Adding Rows to a Table</title></head>
<body>

<wo:AjaxUpdateLink action="$update" updateContainerID="ExtraRowID">Add  
New Row</wo:AjaxUpdateLink>

<table border="1">
	<tr>
		<th>First</th>
		<th>Second</th>
		<th>Third</th>
	</tr>
	<tr>
		<td>row 1, col 1</td>
		<td>row 1, col 2</td>
		<td>row 1, col 3</td>		
	</tr>
	<tr><td colspan="4"><wo:AjaxUpdateContainer id="ExtraRowID" /></td></ 
tr>
</table>

</body></html>

java:

	(same as before)

Result:

Launch and then click "Add New Row" twice.

Any other things to try? Should I just randomly try things until  
something works?