DWR addRows() with Element ID's

Question

Calling All DWR Gurus!

I am currently using reverse Ajax to add data to a table in a web page dynamically.

When I run the following method:

public static void addRows(String tableBdId, String[][] data) {
    Util dwrUtil = new Util(getSessionForPage()); // Get all page sessions
    dwrUtil.addRows(tableBdId, data);
}

The new row gets created in my web page as required.

However, in order to update these newly created values later on the tags need to have an element ID for me to access.

I have had a look at the DWR javadoc and you can specify some additional options see http://directwebremoting.org/dwr/browser/addRows , but this makes little sense to me, the documentation is very sparse.

If anyone could give me a clue as to how I could specify the element id's for the created td elements I would be most grateful. Alternatively if anyone knows of an alternative approach I would be keen to know.

Kind Regards

Karl

Answer 1

The closest I could get was to pass in some arguments to give the element an id. See below:

    public static void addRows(String tableBdId, String[] data, String rowId) {

    Util dwrUtil = new Util(getSessionForPage()); // Get all page sessions

    // Create the options, which is needed to add a row ID
    String options = "{" +
            "  rowCreator:function(options) {" +
            "    var row = document.createElement(\"tr\");" +
            "     row.setAttribute('id','" + rowId + "'); " +
                    "    return row;" +
                            "  }," +
            "  cellCreator:function(options) {" +
            "    var td = document.createElement(\"td\");" +
            "    return td;" +
                 "  }," +
            "  escapeHtml:true\"}";


    // Wrap the supplied row into an array to match the API
    String[][] args1 = new String[][] { data };
    dwrUtil.addRows(tableBdId, args1, options);

Answer 2

Is this line of your code really working??

dwrUtil.addRows(tableBdId, data);

The DWR addRows method needs at least 3 parameters of 4 to work, they are:

1. id: The id of the table element (preferably a tbody element);
2. array: Array (or object from DWR 1.1) containing one entry for each row in the updated table;
3. cellfuncs: An array of functions (one per column) for extracting cell data from the passed row data;
4. options: An object containing various options.

The id, array and cellfuncs are required, and in your case, you'll have to pass the options also because you want to customize the row creation and set the TD id's. check it out:

Inside the options argument, you need to use one parameter called "cellCreator" to inform your own way to create the td html element. Check it out:

// Use the cellFuncs var to set the values you want to display inside the table rows
// the syntax is object.property
// use one function(data) for each property you need to show on your table.
var cellFuncs = [
		         	function(data) { return data.name_of_the_first_object_property ,
		         	function(data) { return data.name_of_the_second_object_property; } 
		         	];											
											
DWRUtil.addRows(
				tableBdId, 
				data, 
				cellFuncs, 
				{
					  // This function is used for you customize the generated td element
					  cellCreator:function(options) {
							var td = document.createElement("td");
							// setting the td element id using the rowIndex
							// just implement your own id bellow
							td.id = options.rowIndex;
							return td;
					 }
				});