putting id into for jeditable

haah

Hello
I am having an issues on how should i put the primary key into the if i pass the aaData back from the action i fired? I am using sAjaxSource. jeditable plugin requires id to save the changes.

(question from a totally newbie for javascript and web design) :)

pwc1011

Hello haah,

Just put the id value in a column and don't display the column. The column will then be available in the aaData row.

This is one of Allan's examples on hiding a column: http://datatables.net/examples/basic_init/hidden_columns.html

If you're new, I recommend getting really familiar with all the examples. There is much to learn there!

Good luck,
Patrick

haah

hello pwc1011
but according to the example in i would need the id to be inside the instead of
what should i do to put it in the ?

pwc1011

My apologies. I better understand what you are asking now.

In this case, id is the attribute of the element . Once the data is returned and the table is drawn, before it is displayed, you would want to loop through each row and get the id from the column data and set the attribute id of the row (tr). Another options is as the row is built.

If you look at this example: http://datatables.net/examples/advanced_init/row_callback.html
you'll see that a callback is made after each row is built. The callback contains a pointer to the row and aData, which contains the data for the row just built. Get your id from aData (for the following example, assume it's the first column, which would mean aData[0]), get the id value for the row data and set the id for the row element .

[code]

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* set tr id. assume the id is in the first column of data */
var id = aRow[0];
$(nRow).find("tr").attr("id",id);
return nRow;

[/code]

Let me know if that works.

Patrick

haah

Hello patrick
Thanks for the solution
the var id= aRow[0] should have been var id = aData[0]
i tried your code but i think the find is not finding the because the datatables puts in and

i try running $(nRow).find("tr.odd") or $(nRow).find("tr.even") but it still doesn't find the data.

haah

ok got it
what i did is just append the id into every
$(nRow).attr("id",id);

here my head
[code]

var oTable;

$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#people-table tbody tr td').editable( '${createLink (action:'save', controller:'testMap')}', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Init DataTables */


oTable = $('#people-table').dataTable({
"sAjaxSource":'${createLink (action:'returnJSON')}',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
}
});
});

[/code]

now my question is that when i click the cell it doesn't become editable ?

pwc1011

Well, I had hoped I was helping you, but I wonder.... :)

does setting the attribute on nRow put it on the tr? Did you use firebug or something and make sure? I'll take a look tomorrow (eastern time). I haven't done the edit like you're doing, but I will look.

haah

hello
yup you are definitely helping me.
i check through firebug and the id is within the tr.
here's a snapshot of my html
[code]

[/code]

so i am not sure why the script is not turning the cell into editable

pwc1011

hello haah,

Can you post a sample of you code for me? ... oops, just saw you did already :-)

Thanks
Patrick

pwc1011

haah,

I don't see the problem. I haven't used it, but your code looks enough like Allan's.
- Have you tried to step through the code using firebug? Are you getting any errors.
- When you look at the console in firebug, is it being submitted?
- What are the params sent and the return values? Look at the traffic flowing (if it's flowing) and look to see that it's finding the right url.

Have you done all that?

Patrick

jemison

I have a similar script that do that.
I did it like this:
[code]
function fnOpenCloseAndEdit ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/images/details_open.png";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
/* Open this row */
this.src = "/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );

$('#table tbody tr td:nth-child(8)').editable( '/link/editNote/', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
height: "14px",
"submitdata":function (settings, self) {
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnSettings().aoData[ aPos[0] ]._aData;
return {idBatch: aData[2]}; //take value from third column
}

} );


}
oTable = $('#table').dataTable({
...
"fnDrawCallback": fnOpenCloseAndEdit
});
[/code]
In my case, my edit col was the 8nth col.

haah

thanks for all the help guys i really appreaciate it.

i switch to grailsui and succesfully implement the in line edit through YUI

but never the less datatables rocks !!!

patriklindstrom

I have the same question as haah originally had. I used JEdittable without serverside processing and it worked fine. Every html table cell that I wanted to edit had a primary key as a ID.
But now when use serversida paging and all data is collected as JSON from the server it will not work. I can set the class of the row in aoColumns "sClass": "masked". But how can I easily set the ID of the row that should be edited. After it is edited it is sent back to the server with the tablecell ID as the primarykey for the update. (see http://www.appelsiini.net/projects/jeditable for ref) .

allan

What I would suggest you do is modify your server-side processing script slightly to return "DT_RowId" with either row and DataTables will apply that value as the row ID automatically.

Have a look at this example to see that in action: http://datatables.net/release-datatables/examples/server_side/ids.html . If you look down the page a little you'll see the JSON return from the server in the second code block - this is updated dynamically as the table is redrawn for sorting etc - useful to see the format that is returned.

Regards,
Allan

patriklindstrom

thank you Allan Ill try that tonight. I also found this article that made the jeditable become editable.
http://www.datatables.net/forums/discussion/1815/using-ajax-i-can039t-use-an-specific-tr-class#Item_9

patriklindstrom

yes it worked fine. On the serverside MVC3 in C#
I just added two columns to view representation of my businessobject.
public class DataTablesRow :DCArrival
{

public string DT_RowId { get; set; } //"DT_RowId": "row_7",
public string DT_RowClass { get; set; } //"DT_RowClass": "gradeA"

public DataTablesRow(DCArrival bizObject,string aRowCssClass=null)
{

PropertyInfo[] fields = typeof(DCArrival).GetProperties();
foreach (PropertyInfo pi in fields)
pi.SetValue(this, pi.GetValue(bizObject, null), null);
this.DT_RowId = bizObject.DCArrivalKey;
if (aRowCssClass != null)
{
this.DT_RowClass = aRowCssClass;
}
}
}

then when I return the JSon from ServiceController it gets serialized correctly
var returnData = new DataTables();
foreach (var dRow in listAllViewModel.DCArrToShow)
{
returnData.aaData.Add(new DataTablesRow(dRow));
}

returnData.iTotalDisplayRecords = 11;//hardcoded while testing
returnData.iTotalRecords = 11;;//hardcoded while testing
returnData.sEcho = iSecho;
// TODO check article on vulnerability http://haacked.com/archive/2009/06/25/json-hijacking.aspx

return Json(returnData, JsonRequestBehavior.AllowGet);