Height of div after appending elements via ajax

Question

Say I do an ajax call to retrieve some json and this data is appended to div #example, and I want to obtain the height of the #example using $('#example').height(). If I obtain the height right away, all the items may not be appended yet. I am trying to obtain the height within the success clause of the ajax call at the end after the appending loops, but the appending action must not be completed yet because I keep getting a smaller height than expected. What is the most favorable course of action to have accurate timing in obtaining the height of #example?

Answer 1

Did you try obtaining the height on success of the ajax call?

$.ajax({
  url: '/example',
  dataType: 'json',
  success: function(data) {
    $('#example').height();
  },
  complete: function(data) {
    $('#example').height();
  }
});

If that still doesn't work, try using a setTimeout for 500 miliseconds to makes sure $('#example') has been populated. I've also heard of "complete" param for ajax.