0

jqueryモバイルアプリのdivに外部htmlをロードしています。すべてうまくいきますが、もう少しスムーズにしようとしています。

これが私のコードです：

$(document).bind('pagebeforecreate', function (event, ui) {
    if (event.target.id == 'pageViewOrder') {
        //get the page
        $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
            $("#viewOrder_content").html(d.html).trigger("create");
            $.mobile.loading('hide');
        });
    }

何が起こっているのかというと、ajax 呼び出しが終了する前にページが表示されています。この呼び出しが終了する前に jquery mobile がページを表示するのを止める方法はありますか? 現時点ではページが表示され、コンテンツが表示されます。

編集：これは単一のページにロードされています

乾杯、ベン

4

1 に答える 1

0

表示プロセスの停止は簡単です。を呼び出すだけですevent.preventDefault()。問題は、コンテンツを取得したら、プロセスを確実に実行することです。私が実際に行うことは、バインドしpagechange、データを既に取得しているかどうかを確認し、取得していない場合は、プロセスを中断し、データを取得して最初からやり直すことです。はいの場合は、計画どおりに続行します。

var contentRetrieved = false; //will indicate wether the JSON call has already been executed
var contentToDisplay; //data from the JSON call

$(document).live('pagebeforechange', function (event, data) {
    if (( typeof data.toPage === "string" ) && ($.mobile.path.parseUrl(data.toPage).hash == '#pageViewOrder')) {
        if (contentRetrieved) {
           contentRetrieved = false; //content is already retrieved, we proceed with the pagechange
        } else {
           event.preventDefault(); //prevent further page change operations
           $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
                contentToDisplay = {"html":d.html};
                contentRetrieved = true;
                $.mobile.changePage("#pageViewOrder");
            });
        }
    }
});


$(document).bind('pagebeforecreate', function (event, ui) {
    if (event.target.id == 'pageViewOrder') {
        $("#viewOrder_content").html(contentToDisplay.html).trigger("create");
        $.mobile.loading('hide');
    }
});​
于 2012-11-30T13:10:53.063 に答える