0

単一ページ アーキテクチャ (html ファイルごとに 1 ページ - 複数の HTML ファイルがあります) を使用するさまざまなページを持つ jquery モバイル Web アプリがあります。「page1」は最初にロードされたページです。ナビゲーション用に他に 4 つのタブ [page2、page3、page4、および page5] があり、これらはすべて page1 のメニューからプリフェッチされています。

ほとんどすべてのページで、AJAX post 呼び出しを使用してアプリケーションとやり取りしています。効率と使いやすさのために、コンテンツを localStorage に保存します。

page1 のコードは次のようになります。

$(document).on('pageshow','#page1', function(){ 

    var postTo = '../api/ajaxreturn.php';
    $.post(postTo, function (data){
        if (localStorage.getItem('ajaxreturn') == JSON.stringify(data)) return;
        else {
          localStorage.setItem('ajaxreturn',JSON.stringify(data));
          //alert(localStorage.getItem('ajaxreturn'))

        }
    }, "json");//end post
     //alert('hi')        

}); // end page1

他のページも同様にコーディングされています。

私が経験した問題は、元の webapp ドキュメントの読み込み時に、情報が localStorage に保存されていないことです。デバッガーをチェックインすると、プリフェッチされたページのすべての localStorage データが保存されていることがわかります。page1 の localStorage を取得するには、任意の page2/3/4/5 をクリックしてから、page1 に戻る必要があります。これにより、「pageshow」関数が再度呼び出され、機能します。

さらに奇妙なのは、アラート ('hi') のコメントを外すと、アラートを数秒間そのままにしておくと、webapp の元のロードで localStorage にデータが表示されることです。

多分それはタイミングの問題に関係していますか？レースコンディション？しかし、「alert（localStorage.getItem（ 'ajaxreturn'））」のコメントを外すと、実際のコンテンツが表示されるため、ajax呼び出しが機能していることはわかっています..だから、それが何であるかわかりません。

どんな助けでも大歓迎です

4

1 に答える 1

0

修正しました!!!

したがって、問題は私が投稿したコードとは何の関係もありませんでした。これは、HTML 内のヘッダー ファイルの順序に関係していました。

ヒント: JQUERY モバイル ガイドラインに厳密に従ってください!!

custom.js ファイルを jquery.js と jquery.mobile.js の間に配置する必要があるというヒントを見逃していました!!!

以前のコードは次のようになりました。

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.swipeButton-1.2.1.js"></script>
<script src="js/ga.js"></script>
<script src="js/custom.js"></script>

正しい方法に変更したとき：

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.swipeButton-1.2.1.js"></script>
<script src="js/ga.js"></script>

custom.js の配置に注意してください (プロジェクトのすべてのカスタム スクリプトが記述されている場所)。

それは私の問題を解決しました。したがって、ヘッダーが正しく設定されていることを必ず確認してください。これにより、何時間もの頭痛の種を節約できます。うまくいけば、これはあなたを助けます!

于 2013-01-11T15:48:02.267 に答える