Question

I have an AJAX grid which refreshes every 60 seconds showing new rows. It’s a very basic XMLHttpRequest() grid which pulls data from a php file. I’ve checked all the internet but still haven’t found a solution to how to implement this jQuery highlight effect on newly added rows after each refreshing:
http://docs.jquery.com/UI/Effects/Highlight:

What would be the best strategy?

Answer 1

Output new rows from your server with an extra class, say tohighlight. In your ajax success handler (in the JS), do something like:

...
success: function(data) {

  // ... your code to refresh the grid with new rows etc..

  // highlight new rows
  $('.tohighlight').highlight();

  // remove the tohighlight class, so these rows wont be highlighted after your next refresh
  $('.tohighlight').removeClass('tohighlight');

}
...