jEditable - Change table cell CSS after update

SQLGuru

Hi,

I have noticed in the samples that the table cell changes background colour and border after an update.
I am trying to get the same effect to happen, but it does not seem to be working for me.

Can anyone perhaps assist in helping me get my code working, please.

I have created a stand-alone style as such:
td.selected { border: 1px solid #F00;background-color:#FF0000; }

On line 14 of my code is where I am attempting to toggle the css class of the table cell.
I can confirm that the code itself is working as I have tested it multiple times with both success and failure messages coming back.
Everything seems to function correctly, it is just the cell highlighting that I want to get working.

If at all possible, could we clear all the styles of all the cells and then just change the css of the one just edited?
I am only allowing the users to edit one cell at a time.

My code is as such


[code]
$(document).ready(function () {
$('#unittable').dataTable().makeEditable({
sUpdateURL: "DataHandler.ashx",
"aoColumns": [
null,
{ // make
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
$(this).toggleClass('selected');
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // model
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // engine
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // year
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // colour
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
}
]
});
});
[/code]

girishmr

You need to use fnCreatedCell

SQLGuru

Thank you for you reply...
I have implemented this in a manner which I think is correct, but nothing happens.
Please see line 21 of the following code:

[code]
$(document).ready(function () {
$('#unittable').dataTable().makeEditable({
sUpdateURL: "DataHandler.ashx",
"aoColumns": [
null,
{ // make
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
//$(this).addClass('selected');
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
},
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
alert("here");// $(nTd).css('text-align', 'right')
}
},
{ // model
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // engine
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // year
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
},
{ // colour
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'cancel',
fnOnCellUpdated: function (sStatus, sValue, settings) {
switch (sStatus) {
case "success":
$.jGrowl('Data updated successfully.', { theme: 'success' });
break;
case "failure":
$.jGrowl('Data update failed. Please try again.', { theme: 'error' });
break;
}
}
}
]
});
});
[/code]

SQLGuru

maybe I should state that I am using DataTables 1.8.1 and not 1.9.4 (not an option).
Is there some other sort of work around??

SQLGuru

anyone?? pls....

girishmr

Sorry pal. I haven't used 1.8.1 version and I could not get hold of the source to check if fnCreatedCell is supported or not.

Allan can help you out :)

girishmr

Update:
Got the source - no - fnCreatedCell isnot supported in 1.8.1
Instead using sClass or fnGetCellData might give you results