6

最初のアプリケーション/サイトの初期化中、およびユーザーが #index ページに戻るたびに、JQM 1.2 RC-1 の読み込みメッセージを表示しようとしています。これを行う方法についての私の理解は次のとおりですが、期待どおりに機能していません。これは読み込みメッセージを表示しません。

$('body').on('pagebeforeshow', '#index', function(){

    $.mobile.loading('show')

    $('#index ul li').remove()

    var post_data = {
        action: 'an_action',
        method: 'method'
    }

    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: post_data,
        cache: false,
        dataType: 'text',
        cache: false,
        success: function(response) {

            $('#index ul').append(response)

            $('#index ul').listview('refresh')

            $.mobile.loading('hide')

        },
        error: function(jqXHR, textStatus, errorThrown) {

            console.log( ' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown )

        }
    })  


})

ここで見つけた回避策（stackoverflow）は、ロード時にロードメッセージを表示するように機能します。

$('#index').live('pageshow', function(event) {   //Workaround to show page loading on initial page load

    $.mobile.loading('show')

})

私が経験している問題は、#index に戻ると、読み込み中のメッセージが削除されることもあれば、残ることもあります。

読み込み中のメッセージがアクティブで、リンクをクリックして現在のページを離れると、読み込み中のメッセージは期待どおりに削除されます。同じリンクから #index に戻ると、ブラウザーでページを更新せずに読み込みメッセージが削除されることがあります。

最初のアプリケーション/サイトの読み込み時に読み込みメッセージを表示する別の方法はありますか?

追加情報：

Safari iOS 6 および Chrome、Mac OSX Chrome、Safari、Firefox、Opera を実行している iDevice でテストした結果は同じです。

jQuery モバイル 1.2 RC-1

単一のページ テンプレートを使用し、サーバー データをリストに挿入してから、別のページ ID に移行しています。

私は成功しなかった：

$('#index').live('pageinit', function(event) {   

    $.mobile.loading('show')

})

サーバーデータを変更でき、アプリケーション内で一貫して変更されるため、 $.ajax() は正常にトリガーされて完了しています。

$.mobile.loading('hide') もトリガーされ、応答が成功したため読み込みメッセージを非表示にする必要があるため、これは混乱を招きます。これは、キャッシュの問題ではないと私に信じさせます。

4

1 に答える 1

1

これは私がしたことです。最初は非表示になっているclass="my_style"を使用してコンテンツにdivを追加しました。showpageloadingメッセージが表示されると、次の2つのカスタム関数で表示および非表示になります。

function showCustomPageLoadingMsg(){
    $('.my_style').css('display','inline');
}

function hideCustomPageLoadingMsg(){
    $('.my_style').css('display','none');
}

これが私が関数を呼んだ方法です：$.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); そして $.mobile.hideCustomPageLoadingMsg();

私のコードとあなたのコードのもう1つの違いは、ajax呼び出しと呼び出されたその関数を.live内に配置することです。

function test(){
     $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true);

$('#index ul li').remove()

var post_data = {
    action: 'an_action',
    method: 'method'
  }

$.ajax({
    type: 'POST',
    url: ajaxurl,
    data: post_data,
    cache: false,
    dataType: 'text',
    cache: false,
    success: function(response) {
        $.mobile.hideCustomPageLoadingMsg();
        $('#index ul').append(response)

        $('#index ul').listview('refresh')



      },
    error: function(jqXHR, textStatus, errorThrown) {

        console.log( ' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown )

      }
  })  

}

$('#index').live('pageinit', function(event) {   

test();

});

コードの抜け穴：

  1. 多くのコードで、コード行の最後にセミコロンがありません。;これは標準の区切り文字です。
  2. 成功関数にhtmlコンテンツを追加した後、メッセージを非表示にします。これは前に行う必要があります。
  3. 最後に、関数型プログラミングを採用して、さまざまなシナリオでコードを再利用できるようにします。長期的には、コードを変更する必要がある場合は、1か所でのみ変更を実行します。
  4. もう1つは、関数型プログラミングを使用して、test（）が取得できる変数を導入し、それらをtestの定義に置き換えることができることです。

ハッピーハッキング!!!

于 2012-12-11T10:39:11.237 に答える