Access other cells in row that was edited

Ebbs

Hi All,

I'm relatively new to JQuery and I love it! JEditable is awesome, but I just have one or two questions about it...

Basically what I am trying to do is to be able to dynamically add new row to the table. However, I have run into the problem of how to add an id to the new . The reason for this is that after I added the row, I have to add the new values to the DB and if there are any subsequent edits to any of the cells in the new row, I have to make those changes to the DB. At the moment, when I have added a new row and edit it, the id of that is returns as null. Therefore it is absolutely critical to have an ID for that row.

The way around this I think is to add a column containing the ID, but it should be hidden. That aside, I am having trouble accessing that specific cell.

For e.g. If I have 4 cells in a row, cell 1 being the ID, cell 2 - 4 has arbitrary values. Say I edit cell 4, how to I access cell 1 for the ajax post to the server side?

I am using VS 2010 with C#. My code follows:

[code]

$(document).ready(function () {
/* Init DataTables */
var oTable = $('#example').dataTable();

/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable('editable_ajax.aspx', {
"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'),
"column": oTable.fnGetPosition(this)[2]
};
},
"height": "14px"
});
});






Column A


Column B


Column C


Column D






Sample A


Sample B


Sample C


Sample D






Column A


Column B


Column C


Column D






+ resource:    

function addbutton() {
var oTable = $('#example').dataTable();

var a = oTable.fnAddData(['New Resource', '0', '0.0', 'Please change a value to save']);

$('td', oTable.fnGetNodes()).editable('add_ajax.aspx', {
"callback": function (sValue, y) {
var aPos = oTable.fnGetPosition(this);

var result = jQuery.parseJSON(sValue);

oTable.fnUpdate([result["A"], result["B"], result["C"], result["D"]], aPos[0], aPos[1]); /* Row */
},
"submitdata": function (value, settings) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition(this)[2]
};
}
});
}


[/code]


I hope I have provided a full enough picture of what I am trying to achieve. Thanks in advance for any help.

-Ebbs

Ebbs

Code behind is:

[code]
this.Response.Clear();
this.Response.Cache.SetNoStore();
this.Response.Cache.SetExpires(DateTime.Now);
this.Response.StatusCode = 200;

string rowId = this.Request.Form["row_id"];
string colId = this.Request.Form["column"];
string value = this.Request.Form["value"];

Test test = new Test();

test.A = "a";
test.B = "b";
test.C = "c";
test.D = "d";

string js = JSON.ToJSON(test);

this.Response.Write(js);

this.Response.End();

public class Test
{
private string a = string.Empty;
private string b = string.Empty;
private string c = string.Empty;
private string d = string.Empty;

public string A
{
get { return a; }
set { a = value; }
}

public string B
{
get { return b; }
set { b = value; }
}

public string C
{
get { return c; }
set { c = value; }
}

public string D
{
get { return d; }
set { d = value; }
}
}

public static class JSON
{
public static string ToJSON(this object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
}

public static string ToJSON(this object obj, int recursionDepth)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.RecursionLimit = recursionDepth;
return serializer.Serialize(obj);
}
}
[/code]

Ebbs

I have found this piece of code:
[code]
"test": oTable.find('td:first')[0].innerHTML
[/code]
It only retrieves the left, topmost column. Any idea on how I would use something like this for the row that was edited?

Ebbs

[code]
"row": oTable.fnGetData(oTable.fnGetPosition(this)[0]).toString()
[/code]

The above code will select the entire row that you are editing and comma separate the different columns. If you have a fixed column amount, this will allow you to split the string into a string array in code.