Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82263

jEditable - Change table cell CSS after update

$
0
0
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


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

Viewing all articles
Browse latest Browse all 82263

Trending Articles