、あなたはIDを格納するリスト項目にdata-attributes
を追加することができますまたは任意のあなたが特定のリスト項目のためつかむれるデータを識別するために使用します。その
<ul data-role="listview" id="my-listview">
<li data-id="3348"><img src="/css/images/loading.gif" /></li>
</ul>
注意をあなたの場合jQuery Mobile読み込みスピナーのGIFバージョンを使用すると、それ自体でアニメートされます。
次に、各リスト項目にデータを追加するために、各AJAX要求のコールバック関数を使用することができます。
//cache all list-items
var $listItems = $('#my-listview').children();
//loop through each list-item
$.each($listItems, function (index, element) {
//cache this specific list-item for later use (in the callback)
var $listItem = $listItems.eq(index);
$.ajax({
url : 'some-script.php',
data : { id : $(this).attr('data-id') },
type : 'post',
success : function (response) {
//if the server returns valid HTML, we can just append it to the list-item
$listItem.find('img').replaceWith(response);
},
error : function (jqXHR, textStatus, errorThrown) {
/*Don't forget to handle errors*/
$listItem.find('img').replaceWith('<span>An error occured, please try again later.</span>');
}
});
});
全体のこれはしかし、応答のdoesnでIMGの交換、非常によく動作しているようですどんなヒントもしないでください。 – user485659
これを解決するために私の答えが更新されました。基本的に、AJAXコールバックはHTMLを間違った場所に追加していました。これを修正するために、スピナーイメージをサーバーレスポンスのHTMLに置き換えるコードを変更しました。この方法で、AJAXが返すHTMLを適切な場所に配置します。 – Jasper