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
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
$(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; } } } ] }); });