5

AJAX経由でフォームをロードするJquery Mobileページがあります。プラグインを使用してページのサイズを設定しています。プラグインは、Ajax が実行され、レイアウトが更新された後にサイズを計算します (少なくとも、以下のコンソールは後で取得されます)。

コンテンツを受け取った要素の高さを取得する必要がありますが、何をしようとしても、ゴミになります(1200pxではなく〜169px)

これが私のコードです：

(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 の後に起動しますが、それでも false 値しか返しません。

質問:
AJAX の更新後にコンテンツ要素の高さを確実に取得するにはどうすればよいですか? すべてがそこにあるまで待つために、Ajaxの後に10秒のタイムアウトを設定しようとしました。違いはありません.10秒後、コンテンツ要素の高さはまだ正しくありません.

手伝ってくれてありがとう！

編集:
コンソールはAJAXのロード後にログを記録しますが、関数は前に起動していると思うので、AJAX以前のディメンションに基づいて計算しています。これを使用して再起動することを考えています：

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

そしてトリガー

$(window).trigger('dimensionchange')

私のAJAX成功ハンドラーで。完璧ではありませんが、これで十分だと思います。

EDIT2：
動作するようになりました。@HolgerDSchaufは正しかった。最初の関数の実行時に false の値を設定しましたが、AJAX が導入された後も false の値が設定されていました。私は今、次のように修正しています：

アヤックスの成功:

...
// 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;
   }

魅力のように機能します。

4

2 に答える 2

2

この関数を使用して、すべての div の更新されたサイズを維持します。このようなものを使用しますが、ドキュメントの準備ができたら呼び出すことを忘れないでください。

function framing() {
    /*
        Pre         : ready.js, self
        Post            : design.js->framing
        Author          : Enes Ü.
        Date            : 15:30, 05 May 12
        Summary         : framing the page widthly/heightly
        Bugs/TODOs              : Frame heights are anormal and will be fixed. Prior=5
    */


    $("#right_menu").width($("#main").width()-$("#left_menu").width());
    $("#left_menu").height(getWinHeight());
    $("#top_menu").width($("#main").width()-$("#left_menu").width());
    $("#right_menu").height(getWinHeight()-$("#top_menu").height());
    $("#map_container").height(getWinHeight());
    /* 
     ******* lots of lines like above...
     */

    setTimeout(framing,100);
}
于 2012-06-20T11:33:26.607 に答える
1

「wrap、panels、ct」でキャッシュ要素を使用した場合は、このキャッシュされた変数を更新するか、すぐに使用してください

于 2012-06-20T11:26:03.100 に答える