putting id into for jeditable
putting id into for jeditable
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) :)
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) :)
This discussion has been closed.
Replies
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
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 ?
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
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.
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 ?
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.
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
Can you post a sample of you code for me? ... oops, just saw you did already :-)
Thanks
Patrick
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
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.
i switch to grailsui and succesfully implement the in line edit through YUI
but never the less datatables rocks !!!
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) .
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
http://www.datatables.net/forums/discussion/1815/using-ajax-i-can039t-use-an-specific-tr-class#Item_9
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);