ajaxCFC update for DRWUtil.AddRows
A recent message in the ajaxCFC group asked about the DRWUtil.addRows() function; the truth is that I had never used it. I include the utils library because there are other elements that I find useful, but I had never given the addRows a try.
Enough said, since I include the file, I guess I need to support the built-in functionality, but the addRows out-of-the-box was accepting arrays and objects. I serialize the ColdFusion queries into a more complex object which was not recognized by the addRows function, so I modified it to add wddx support. When you pass a wddx object to addRows it will now automatically populate your table, even without the need to cell functions (like the array or object methods).
You can find an example here, and download the latest release (0.63) with the code changes, example, and updated documentation from the projects page.
I'd like to thank again Joe Walker for his great effort in putting DRW together, and I will email him the changes to add wddx support for his next release.
Enough said, since I include the file, I guess I need to support the built-in functionality, but the addRows out-of-the-box was accepting arrays and objects. I serialize the ColdFusion queries into a more complex object which was not recognized by the addRows function, so I modified it to add wddx support. When you pass a wddx object to addRows it will now automatically populate your table, even without the need to cell functions (like the array or object methods).
You can find an example here, and download the latest release (0.63) with the code changes, example, and updated documentation from the projects page.
I'd like to thank again Joe Walker for his great effort in putting DRW together, and I will email him the changes to add wddx support for his next release.
TrackBacks
There are no trackbacks for this entry.
Trackback URL for this entry:
http://www.robgonda.com/blog/trackback.cfm?E0AA1CA5-3048-7431-E43BF0804966D5EE
http://www.robgonda.com/blog/trackback.cfm?E0AA1CA5-3048-7431-E43BF0804966D5EE
I downloaded your ajaxCFC recently and it is really great. I was trying to put up a little application with that had a little problem. I am using the new DWRUtil.addRows() function. I am getting four columns from a database table and showing them on a html table. So far so good. Now I want to get the table row_id and generate a html link inside the html table for each row. How is that possible?
When I looked into the utils.js I found that you added this line:
Line #717: td.appendChild(document.createTextNode(data[col][rowNum]));
I changed it to: td.innerHTML = data[col][rowNum]; AND it worked!!
Here is the query I am using inside the CFC:
SELECT FirstName, LastName, Company, '<a href="~">Edit</a>' as Link FROM Member_table
Now this is just an idea. Definitely you have a better idea or way of doing things. Please let me know. Thanks.
CONCAT('<a href="page.cfm?ID=',UID,'">edit</a>') as Link
Perhaps you have any idea how to allow applying sylesheets to the addRows function? My idea is that the options object you pass can contain several key items. Now it allows you to trigger on or off the labels, so you can add them yourself or have addRows add them for you. I was think that you can pass a header, base, odd/even css classes, and addRows could apply them for you ...
Thoughts?
a) Here is a function call I made
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'updateMemberInfo', ID, FN, LN, Ttl, Com, A1, A2, Ctry, Zip, afterUpdate);
If I add one more parameter to the function, I get a JS error 'Invalid Syntax'. Is there a limitation of number of parameters to the _execute fn? Or it is something JS specific?
b) addRows() does not work with FireFox 1.5 (DOM ?)
In my example, I am applying css to table, thead, tfoot. Only tbody is being generated by addRows. I like to have css for alternate rows for sure. But keep it simple, do not give too much options....
<code>
var param = new Array();
param[0] = document.all.editPRList_ID.value;
param[1] = document.all.editFirstName.value;
param[2] = document.all.editLastName.value;
Inside my CFC method I had to reference the valus like this:
UPDATE PRList SET
FirstName = <cfqueryparam value="#arguments.args[1][2]#" cfsqltype="CF_SQL_VARCHAR"/>,
LastName = <cfqueryparam value="#arguments.args[1][3]#" cfsqltype="CF_SQL_VARCHAR"/>
WHERE
PRList_ID = <cfqueryparam value="#arguments.args[1][1]#" cfsqltype="cf_sql_integer"/>
</code>
One thing to remember, in JS the array index start at 0 and in ColdFusion it starts at 1. So for param[0] i am referencing it as arguments.args[1][1] and so on...
Rob, anything on addRows() not working with Firefox?
Firefox is my preferred browser and everything works there first. Then I check for IE, Opera, Mozilla, Netscape, and Safari.
Can you see this example?
http://www.robgonda.com/blog/projects/ajaxcfc/exam...
Is there a way to add styles to:
function getMyResult (r) {
var getFirstName = function (thisRow) {
return thisRow.fname;
}
DWRUtil.addRows("someTBodyId", r, [getFirstName], null);
}
I would like alternating rows idealls, or just a way to alter the background color for example.
Any ideas?
Thanks
-Malik
What I have is a page where user can select list of columns they would like to see on the table.
So, based on the items in the selectbox, I need to built query and table. I got everything done but addRows piece.
In your example you hard code the column name like. thisRow.fname, thisRow.lname etc...
and you call [getFirstName, getLastName ...] in the DWRUtil.addRows() function.
Can it be done by looping through the select list, get the column Name and go from there.
Thank you.
DWRUtil.removeAllRows("Preview");
var ColumnList = document.getElementById('AssignedFields'); //list box
var arrColumns = new Array();
var thisRow = $('Preview').insertRow(0);
for (i=0; i<ColumnList.length;i++){
var columnName = ColumnList.options[i].text;
arrColumns[i] = columnName;
var colName = arrColumns[i];
var thisCell = thisRow.insertCell(i);
thisCell.innerHTML = '<b>' + arrColumns[i] + '</b>'; //Header
}
for (j=0; j<myData.getRowCount();j++){
var thisRow = $('Preview').insertRow(j+1);
for (i=0; i<arrColumns.length;i++){
var colName = arrColumns[i].toLowerCase();
var thisCell = thisRow.insertCell(i);
thisCell.innerHTML = myData[colName][j];
}
}
}