Need Assistance - jQuery / Datatables / JEditable - Record Details being Editable

ssemrau

I'm a bit new to all of these libraries so please bear with me - let me try to explain:

I have Datatables working fine, I'm employing the hide/show technique for record details, and I'm applying jEditable but I'm running into a snag when I try to get the record details to be 'editable'. Main record info becomes editable upon click with no problem.

I thought with just adding the same class name to the inner table td elements would do it - nope. Anyone have any insight on what I may be doing wrong or need to do?

--HTML file containing the table --
[code]




Name
Role
Email
Username(s)
Post
Action




.... loading data ....





Name
Role
Email
Username(s)
Post
Action



[/code]
-- And the contents of the js file --
[code]
var oTable, urlStatus = 'active';

/* Function that formats for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += '';
sOut += 'Address:';
sOut += ''+aData[6]+'';
sOut += 'Username:';
sOut += ''+aData[9]+'';
sOut += '';
sOut += '';
sOut += 'Phone Number:';
sOut += ''+aData[7]+'';
sOut += 'OpenNet Username:';
sOut += ''+aData[10]+'';
sOut += '';
sOut += '';
sOut += 'Cell Number:';
sOut += ''+aData[8]+'';
sOut += 'Inventory Last Signed:';
sOut += ''+aData[11]+'';
sOut += '';
sOut += '';
sOut += ' ';
sOut += ' ';
sOut += 'Last Accessed:';
sOut += ''+aData[12]+'';
sOut += '';
sOut += '';
return sOut;
}
/* setup URL status param switch for dataTables param */
if (document.URL.indexOf('all') > 0){
urlStatus = 'all';
}
else if (document.URL.indexOf('inactive') > 0){
urlStatus = 'inactive';
}
else {
urlStatus = 'active';
}
/* Prep jQuery and DataTables */
$(document).ready(function(){
oTable = $('#dyntable2').dataTable({
"sAjaxSource": "../../com/users.cfc?method=getJsonUsers&status="+urlStatus,
"sAjaxDataProp": "DATA",
"sPaginationType": "full_numbers",

/* Apply the jEditable handlers to the table */
"fnDrawCallback": function () {
$('.edit').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
/* Redraw the table from the new data on the server */
oTable.fnDraw();
},
"height": "14px"
} );
},


/* Here we define for all rows;
* For column 1 (aTargets array 0) that it is going to have an image for hide/show
* for column 7 ( aTargets array 6) that it is going to display images for action
*/
"aoColumnDefs":[
{
"sClass": "center",
"bSortable": false,
"mRender": function(data,type,row) {
return data
+'';
},
"aTargets": [0]
},
{
"sClass": "center",
"bSortable": false,
"mRender": function(data,type,row){
return data
+ '  ';
},
"aTargets": [6]
}
]

/* Here we define individual column definitions */

,
"aoColumns":[
null,
{"sClass": "edit"},
{"sClass": "edit"},
{"sClass": "edit"},
{"sClass": "edit"},
{"sClass": "edit"},
null
]
});


/* Function to change between 'hide' and 'show' */
$('#dyntable2 tbody td img').live('click', function() {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr))
{
/* If statement necessary to avoid applying open/close function to last 'action' column of images */
if (this.src.indexOf("close") > 0) {
/* This row is already open - close it */
this.src = "../../images/datatables/details_open.png";
this.title = "Show additional User Information";
oTable.fnClose(nTr);
}
}
else
{
/* If statement necessary to avoid applying open/close function to last 'action' column of images */
if (this.src.indexOf("open") > 0) {
/* Open this row */
this.src = "../../images/datatables/details_close.png";
this.title = "Hide additional User Information";
oTable.fnOpen(nTr, fnFormatDetails(nTr), '');
}

}
});
});
[/code]

As this is being developed in an offline development environment that I cannot make available, I can't link to a live demo.


Thanks in advance for any help on this as I can't seem to find anything on the net right now.