0

<ul><li>item</li>...</ul>現在、JQuery Mobile 環境に項目 ( ) のリストがあります。必要な情報が取得されるまでに時間がかかる可能性があるため、リスト内の各項目の追加情報を表示したいと思います。ページが読み込まれたときに各項目が AJAX 要求を送信し、その間にその方法を探しています。スピナーはプレースホルダーとして表示されます。AJAX 呼び出しの結果が表示されると、スピナーの代わりにアイコンが表示されます。

これを達成する方法について何か提案はありますか?

4

1 に答える 1

1

リストでは、リストアイテムに追加data-attributesしてIDを保存したり、特定のリストアイテム用に取得するデータを識別するために使用したりすることができます。

<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>');
        }
    });
});
于 2012-04-24T19:13:38.863 に答える