Question

I have a table that is being updated by Ajax. I want to do something when new data is added to it, but since the change is in appearance, it should be done by the preloaded JS rather than Ajax returned JS.

I am looking for something like $('table tr').length.change( ... ), So I can do something like this

$('table tr').length.change( function() {
  if ($('table tr').length>1) $('table').show() else $('table').hide()
}

The Ajax-returned JS will do something like this (say in Rails)

$('table').append('<tr> <td><%= @person.name %></td> <td><%= @person.age %></td> </tr>')

(in Rails this will be in some /app/views/container_name/method_name.js.erb)

Answer 1

You could use a pub-sub approach.

$('table')
   .append('<tr> <td><%= @person.name %></td> <td><%= @person.age %></td> </tr>')
   .trigger('tableModified');

Then in your layout/design,

$('table').on('tableModified',function(){
    if ($('tr', this).length>1) $(this).show() else $(this).hide()
});

This way your table code doesn’t have to be aware of your layout/design or anything else that may need to know when the table is modified.