How to highlight rows in list based on condition

Question

Version 2.3.4

Let's say, I have an items table with some fields, for example: id, name, something, created_at, updated_at, is_dirty. I'm using active scaffold to display a HTML table from it.

class ItemsController < ApplicationController
  layout 'application'
  active_scaffold :item do |c|
    c.columns = [ :id, :name, :something ]
    c.show.columns.add [ :is_dirty, :created_at, :updated_at]
    c.list.per_page = 20
    list.sorting = {:created_at => 'DESC'}
  end
  # ...
end

I have an import functionality driven by an other controller. After the import the affected rows' is_dirty field will become true, the other's is_dirty value remain the same as they were before.

In the list of items I would like to highlight some rows using some irritating color (for example yellow or pink) whose is_dirty field is true. I searched throughout the web and I found only field overrides. I'm not interested in RJS based solutions because of the ridiculous overhead compared to the task to be accomplished.

Any hints are welcome and appreciated, but I will prefer answers that does not base the solution on copying and modifying framework files (but I am still interested in them too). For example having good override names / configuration items would be excellent.

Answer 1

Can you add a css class to the rows when an event is raised? Does this import run via an AJAX call or is it done before the DOM is loaded? If it is run before the DOM is loaded, I personally would add some jQuery to some included js file:

$(document).ready(function() { 
    $('tr').filter(function() { 
        return $(this).attr('is_dirty'); 
    }).addClass('ugly_yellow'); 
}); 

If the import runs via an AJAX call, you could add similar code to a handler.

If you're not using jQuery, I'm sure you can do something similar in Prototype, but I prefer jQuery and suggest that everyone at least try it out :)