Jquery Mobile 1.2RC-1読み込みメッセージが表示されない

Question

最初のアプリケーション/サイトの初期化中、ユーザーが#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クローム、サファリ、Firefoxの、オペラを実行するのiDeviceでテスト。

jQueryのモバイル1.2 RC-1

私は、単一のページテンプレートを使用して、別のページ＃idをへの移行後、リストにサーバーのデータを注入しています。

ノー成功を収めて試してみた：

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

    $.mobile.loading('show') 

}) 

$アヤックス（）が成功したトリガーと私は、サーバーのデータを変更することができるように完了し、それが一貫してアプリケーション内で変更されています。

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

Answer 1

これは私が最初に隠されたとshowpageloadingメッセージが表示されている場合、これらは、それを表示し、それを隠すために2つのカスタム関数ですされ、クラス=「my_style」と私のコンテンツにdiv要素を追加して、私がやったことです：

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

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

、これは私が関数と呼ば方法です：$.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true);と$.mobile.hideCustomPageLoadingMsg();

私のコードとあなたのもう一つの違いは、私はAJAX呼び出しを入れて、内部にその関数を呼び出したということです。生きる：

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の定義でそれらを置き換えることができるということです。

ハッピーハッキング！