Question

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).

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)

Here is my 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 < 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") > parseFloat( o._iPadFixHeight ) ){
        o._iPadFixHeight = parseFloat( ct.css("height") ) + parseFloat( ct.css('padding-top')) +  parseFloat( ct.css('padding-bottom')) ;
        };
    }
     ...

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.

Question:
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.

Thanks for help!

EDIT:
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:

$(window).on('dimensionchange', function(){             
    self.ome();
    })

And triggering

$(window).trigger(‘dimensionchange’)

in my AJAX success handler. Not perfect, but I guess this will do.

EDIT2:
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:

Ajax Success:

...
// cleanup dimensions
$(window).trigger( 'dimensionclear');
...
window.setTimeout(function() {
   target.removeClass('.fade.in');
   // recalculate
   $(window).trigger('dimensionchange');    
   },250);

In my plugin:

$(window).on('dimensionchange', function(){ 
     self.ome();
     });
$(window).on('dimensionclear', function(){
     self.ome("clear");
     });    

And in OME function:

// cleanup
if ( from == "clear") {
   contents.css({'height':'', 'max-height':''})
   return;
   }

Works like a charm.

Answer 1

you used an cache element with “wrap, panels, ct” refresh this cached variable or use it instantly