AJAXがlistitemsのページロードを呼び出す

Question

現在、私はJQuery Mobile環境で項目リスト（<ul><li>item</li>...</ul>）を持っています。 ここでは、必要な情報が取得されるまでに時間がかかるため、ページが読み込まれたときに各アイテムがAJAXリクエストを送信する方法を探しているので、リスト内の各アイテムについて追加情報を表示したいスピナーはプレースホルダーとして表示されます。 AJAXコールの結果が表示されたら、アイコンがスピナーの代わりに表示されます

私はこれをどのように達成することができますか？あなたのリストで

Answer 1

、あなたは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>'); 
     } 
    }); 
});