だから、私は phonegap+jqm アプリケーションでしばらく働いていました。Androidフォン、ブラックベリーシミュレーター(os7)、およびブラックベリーデバイス(os5)でテストしています。私のアプリケーションは、ajax 呼び出しを使用して Web サービスからいくつかのデータをフェッチし、そのデータを使用して、そのデータを表示することのみを目的としていくつかのページを動的に作成します。
機能: Ajax 呼び出しが成功し、データが期待どおりに取得されます。また、jqm スタイルも正しく適用されます (通常のトリガー "create" と "refresh" を使用)。アプリケーション全体は、私の Android デバイスと os7 の bb シミュレーターでうまく動作します。
機能しないもの: 動的に作成および追加された要素は表示されず、代わりに古い要素 (削除されているはず) がそこに残ります。これは、os5 で bb をテストした場合にのみ発生します。
さて、いくつかのコード。ajax 呼び出しを開始するときは、いくつかの関数を使用してすべてを完了します。これは、各ページまたはページの標準的な手順です。
呼び出しからデータを受信すると、応答が特定のハンドラーに渡され、応答からデータを取得するジョブが実行されます。
function processListElements(response){
alert("processListElements Start"); // THIS IS EXECUTED
$('#anagTableList li[data-role="button"]').remove();
$(response).find('return').each(function(){
alert("inside responseFind"); // THIS IS NEVER SHOWN
var myNewLI=getFormattedLI($(this).find('codice').text(),$(this).find('responsabile').text());
$('#anagTableList').append(myNewLI).listview('refresh');
});
$('#tablePage').trigger('create');
$('#anagTableList').listview('refresh');
alert("processListElements End"); // THIS IS SHOWN!
}
ご覧のとおり、新しいアイテムは、要素を正しくフォーマットする別の関数で作成されます。
function getFormattedLI(codice,responsabile){
var myFormattedLI = '<li data-role="button" data-icon="arrow-r" data-iconpos="right">'+
'<p>'+codice+' - '+responsabile+'<\/p>'+
'<\/li>';
return myFormattedLI;
}
最後に、このページのマークアップは次のとおりです。
<div id='tablePage' data-role="page">
<div data-theme="a" data-role="header">
<h1 >Commesse Tigre</h1>
</div><!-- /header -->
<ul id='anagTableList' data-filter="true" data-theme="a" data-role="listview" data-inset="true">
<a href="#" id="advancedSearch" data-theme="c" style="color:#FF8C90;text-decoration:none">advanced search</a>
<li id='tableHeader' data-role="header">CODICE - RESPONSABILE - ANNO</li>
</ul>
<div data-theme="a" data-role="footer">
<div class="ui-grid-b">
<div class="ui-block-a"><a href="#" id="pageLeft" data-role="button" data-icon="arrow-l" data-iconpos="notext" style="margin-top:7px;">Previous page</a></div>
<div class="ui-block-b" style="text-align:center;margin-top:15px;">Page<p id='currentPage' style="display:inline">1</p> of <p style="display:inline" id='totalPages'>2</p></div>
<div class="ui-block-c"><a href="#" id="pageRight" data-role="button" data-icon="arrow-r" data-iconpos="notext" style="float: right;margin-top:7px;">Next page</a></div>
</div><!-- /footer -->
</div>
では、ページを変更しても新しいリスト項目が表示されないのはなぜですか? 私は何か間違ったことをしていますか?
私はしばらくこれに苦労してきましたが、解決策が見つかりません。また、長い質問で申し訳ありません:)
編集 1: 長い間、すべての jquery 関数を純粋な JavaScript に変更しようとしました。何も変わっていません(これに大きな期待を寄せていたわけではありません)
編集2:まだこれに苦労しており、毎回奇妙になります。私はいくつかのテスト アプリケーションを実行してきましたが、まったく同じように動作し (ul に新しい li が追加されます)、要素がまだ表示されない上記のコードを含むアプリケーションを除いて、すべて動作します。
編集 3: response.find 関数内のすべてが実行されないことがわかりましたが、コードはブロックされないため、関数内にアラートを配置しても表示されません。よりよく説明するためにコードを編集しました。
編集 4: 「検索」機能が「戻り」ノードを見つけていないと言っても過言ではないと思います。応答は第 2 軸の Web サービスから来ており、各戻りノードは「ns:return」としてタグ付けされています。これは、私の Android デバイスと bb7 デバイスでは問題ではありませんが、明らかに私の bb5 デバイスでは問題です。検索を「ns:return」に変更しても何も解決しません。私はとても疲れている。ヘルプ!
編集 5 (最後): 問題を解決できませんでしたが、見つけました。この問題は、jquery または javascript で名前空間を持つノードを見つけることができるようになりました。SO にはこの問題に対処するための多くの質問がありますが、jQuery 1.7 がすべての回避策を破っているため、今まで何もうまくいきませんでした。