jQuery Datatable add CSS to cell after update

Question

I am trying to add CSS to a cell after a record in my jQuery Datatable is updated. Basically to show the user that the update was successful.

I'm using a BLUR event to send the parameters over to the processing script:

$('#example1').on('blur', 'tr > td > .editForecast', function(e) 
{
  e.preventDefault();
  var forecastnewval = $(this).val();

  $.post('api/inlineEditProcess.php', {forecastnewval:forecastnewval}, function(data)
  {
    changeColor(); // calling this function
    //$(this).css('background-color', 'green'); // I tried this but unsuccessful
  });
});

I'm calling this function:

function changeColor()
{
  $('#example1 tr > td > .editForecast').on('blur', function()
  {
    $(this).css('background-color', 'green');
  });
}

At this point, the user can make the update. But they tab/click off the cell nothing happens. The function only works when they click back into the cell and then tab/click off of it.

I know it has something to do with the fact that I already have a BLUR event going when they initially click into the cell. The function then uses another BLUR event, which explains why they have to click into the cell twice for it work.

I need it to work on the first BLUR event.

As you will see in the initial BLUR event, I did add the code to change the CSS within the $.POST, but that was unsuccessful.

I know I cannot use 2 BLUR events, but I'm not sure what else I can use to get this to work.

Pranav C Balan · Accepted Answer · 2018-01-23 04:37:57Z

3

It thinks its better to use event delegation for listening events of dynamic elements instead of binding event handler each time.

Where you can check value is changed or not by comparing current value with the value attribute.

$('#example1').on('blur', 'tr > td > .editForecast', function(){
  // check value is changed or not
  if(this.value !== $(this).attr('value')){
     $(this).css('background-color', 'green');
  }
});

Or better way would be tracking the current value while focusing the element(using event delegation) and later compare with the tracked value.

// list focus event to track the current value of element
$('#example1').on('focus', 'tr > td > .editForecast', function(){
   $(this).data('value', this.value);
})


$('#example1').on('blur', 'tr > td > .editForecast', function(){
  // compare value with the tracked value
  if(this.value !== $(this).data('value')){
     $(this).css('background-color', 'green');
  }
});

edited Jan 23, 2018 at 4:37

answered Jan 22, 2018 at 14:26

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Beasley Over a year ago

For the most part, your code does answer my question. However, when the parameters get sent over to my processing script, there's a chance the UPDATE might fail. With that said, I only want the cell to turn green IF the update is successful. Therefore, an IF/ELSE within the Post would be necessary. This is where I think your code would not work if placed within the Post. However, your code does indeed answer my question.

Ryan Wilson · Accepted Answer · 2018-01-22 14:24:58Z

-2

For the first event, why not use onFocus(), then use onBlur() for the second event.

answered Jan 22, 2018 at 14:24

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

1 Comment

John Beasley Over a year ago

Well, the UPDATE process shouldn't run until they are finished making their updates and then tab/click off the cell. If I use onFocus, wouldn't the process attempt to run even though the user hasn't made any updates yet?

Collectives™ on Stack Overflow

jQuery Datatable add CSS to cell after update

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related