I have been working with a Jquery Mobile page and I am facing an issue when loading a form via AJAX. The plugin I am using to set the page dimensions calculates them after the AJAX call has completed and the layout has been updated. However, the height of the element that received the content is not being accurately retrieved (it shows around 169px instead of the expected 1200px).
Below is the code snippet I am using:
(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')) ;
};
}
...
When I do not use AJAX, everything works correctly. However, when adding content dynamically via AJAX, the retrieved values are inaccurate even though the consoles log after the AJAX call.
Question:
How can I reliably get the content element height after an AJAX update? I have tried setting a 10 second timeout after the AJAX call to wait for everything to load, but the height is still incorrect even after 10 seconds.
Any help would be appreciated!
EDIT:
Even though the consoles log after the AJAX load, it seems like the function is firing before the update, causing it to calculate based on pre-AJAX dimensions. I am considering re-firing the function using this:
$(window).on('dimensionchange', function(){
self.ome();
})
And triggering it in my AJAX success handler.
EDIT2:
I have now fixed the issue. It turns out that the function was setting false values initially and not updating them after the AJAX call. Here's how I fixed it:
In the AJAX Success function:
...
// 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 the OME function:
// cleanup
if ( from == "clear") {
contents.css({'height':'', 'max-height':''})
return;
}
Now it works perfectly.