У меня есть страница Jquery Mobile, на которую я загружаю форму через AJAX. I Я задаю размеры страницы с помощью плагина, который вычисляет размеры ПОСЛЕ запуска Ajax и обновления макета (по крайней мере, нижеприведенные консоли появляются позже).
Мне нужно получить высоту элемента, который получил содержание, но что бы я ни пытался, я получаю только мусор (~ 169 пикселей вместо каких-то 1200 пикселей)
Вот мой код:
(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')) ;
};
}
...
Если я не использую какой-либо AJAX, это работает правильно. при динамическом добавлении содержимого через AJAX все консоли срабатывают после AJAX, но возвращают только ложные значения.
Вопрос:
Как я могу надежно получить высоту элемента контента после обновления AJAX? Я попытался установить 10-секундный тайм-аут после Ajax, чтобы подождать, пока все не будет там. Без разницы, через 10 секунд высота элемента контента все еще неверна.
Спасибо за помощь!
РЕДАКТИРОВАТЬ:
Хотя консоль регистрируется ПОСЛЕ загрузки AJAX, я думаю, что функция срабатывает раньше, поэтому она рассчитывается на основе размеров до AJAX. Я думаю перезапустить, используя это:
$(window).on('dimensionchange', function(){
self.ome();
})
И запустить
$(window).trigger('dimensionchange')
в моем обработчике успеха AJAX. Не идеально, но думаю сойдет.
РЕДАКТИРОВАТЬ2:
Готово. @HolgerDSchauf был прав.При первом запуске функции я установил ложные значения, а затем, после входа AJAX, ложные значения все еще были установлены. Сейчас я исправляю это так:
Ajax Success:
...
// cleanup dimensions
$(window).trigger( 'dimensionclear');
...
window.setTimeout(function() {
target.removeClass('.fade.in');
// recalculate
$(window).trigger('dimensionchange');
},250);
В моем плагине:
$(window).on('dimensionchange', function(){
self.ome();
});
$(window).on('dimensionclear', function(){
self.ome("clear");
});
И в функции OME:
// cleanup
if ( from == "clear") {
contents.css({'height':'', 'max-height':''})
return;
}
Работает как шарм.