title: how to get the height of an element after inserting content via AJAX?
body: <p>I have a Jquery Mobile page into which I'm loading a form via AJAX. I'm setting the page dimensions using a plugin, which calculates dimensions AFTER the Ajax has run and the layout has been updated (at least the below consoles come in afterwards).</p>
  
  <p>I need to get the height of the element that received the content, but no matter what I try, I'm just getting rubbish ( ~ 169px instead of some 1200px) </p>
  
  <p>Here is my code:</p>
  
  <pre><code>(inside plugin)
  some: function(){
  
      var self = this,
      o = self.options,
      wrap = $('div:jqmData(wrapper="true").ui-page-active').last(),
      // elements
      panels = wrap.find('.ui-panel.ui-panel-active').filter(':not(.ui-popover)'),
      pages = panels.find('.ui-page'),
      contents = pages.find('.ui-content');
  
      // maxHeight contents
      for ( var i = 0; i &lt; contents.length; i++){         
          ct = contents.eq(i);
  
          console.log( ct );
          console.log( ct.css("height") )
          console.log( ct.height() );
          console.log( ct.outerHeight() );    
      // max
      if ( ct.css("height") &gt; parseFloat( o._iPadFixHeight ) ){
          o._iPadFixHeight = parseFloat( ct.css("height") ) + parseFloat( ct.css('padding-top')) +  parseFloat( ct.css('padding-bottom')) ;
          };
      }
       ...
  </code></pre>
  
  <p>If I'm not using any AJAX this works correctly. If I'm adding content dynamically via AJAX, the consoles all fire after the AJAX, but still only return false values.</p>
  
  <p><strong>Question</strong>:<br>
  How can I reliably get the content element height after an AJAX update? I tried setting a 10sec timeout after Ajax to wait until everything is there. No difference, after 10sec the content element height is still not correct.</p>
  
  <p>Thanks for help!</p>
  
  <p><strong>EDIT</strong>:<br>
  Although the consoles log AFTER the AJAX load, I think the function is firing before, so it's calcualting based on pre-AJAX dimensions. I'm thinking to re-fire using this:</p>
  
  <pre><code>$(window).on('dimensionchange', function(){             
      self.ome();
      })
  </code></pre>
  
  <p>And triggering </p>
  
  <p>$(window).trigger('dimensionchange') </p>
  
  <p>in my AJAX success handler. Not perfect, but I guess this will do.</p>
  
  <p><strong>EDIT2:</strong><br>
  Got it to work. @HolgerDSchauf was correct. On my first function run, I set the false values and then after AJAX came in, the false value were still set. I'm now fixing it like this:</p>
  
  <p>Ajax Success:</p>
  
  <pre><code>...
  // cleanup dimensions
  $(window).trigger( 'dimensionclear');
  ...
  window.setTimeout(function() {
     target.removeClass('.fade.in');
     // recalculate
     $(window).trigger('dimensionchange');    
     },250);
  </code></pre>
  
  <p>In my plugin:</p>
  
  <pre><code>$(window).on('dimensionchange', function(){ 
       self.ome();
       });
  $(window).on('dimensionclear', function(){
       self.ome("clear");
       });    
  </code></pre>
  
  <p>And in OME function:</p>
  
  <pre><code>// cleanup
  if ( from == "clear") {
     contents.css({'height':'', 'max-height':''})
     return;
     }
  </code></pre>
  
  <p>Works like a charm. </p>