0

JQuery Mobile リストビューを作成しようとしています (入門ガイドに基づいています)。リスト項目は json データによって入力されます。

基本的には動いています。リストが作成され、適切にスタイル設定されています。しかし、リストには重複が含まれています。json オブジェクトは 2 つしかありませんが、リストには 4 つの項目が含まれています。最後の 2 つは、最初の 2 つの繰り返しです。

json データを再確認し、変数をコンソールに出力しました。両方とも、2 つのオブジェクトのみを含み、重複はありません。

このjquery/javascriptがリストビューに重複したリスト項目を作成するのはなぜですか? 重複を防ぐにはどうすればよいですか?

私の問題は、 jQuery .append() JSON data in a jQuery Mobile list add duplicates when page is refreshed?で説明されている問題に似ている可能性があります。. ただし、提供される唯一のソリューションは重複を防ぐものではなく、重複を除外する方法を説明するだけです。それは非効率なクラッジのようです。

ここに私のjavascript ([ライブバージョン] ( http://dev.mycourtdates.com/jq.html ))::

<!DOCTYPE html>
<html>
<head>
    <title>J 2.1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="content">
        <ul id = "myList" data-role="listview" data-inset="true" data-filter="true">
            <script>
            $.getJSON("http://dev.mycourtdates.com/jsonData.txt?",
                {
                    id: "73125"
                },
                function(data) {
                    var items = [];

                    $.each(data, function(i,ct_setting){
                        items.push('<li><a href="#">' + ct_setting.caseNumber + '</a></li');
                    });
                    console.log(items);
                    $('#myList').append(items).listview('refresh');
                });
            </script>
        </ul>
    </div><!-- /content -->
</body>
</html>

これが私のjsonデータです([ライブバージョン] ( http://dev.mycourtdates.com/jsonData.txt )):

[
   {
      "active":"1",
      "caseNumber":"B 1102907-C",
      "timeDate":"2012-07-31 09:00:00",
      "setting":"JURY TRIAL",
      "location":"H.C. COURT HOUSE ROOM 320",
      "plaintiffs":"STATE OF OHIO",
      "defendants":"EDWARD L HOGAN",
      "attorneyId":"PP68519"
   },
   {
      "active":"",
      "caseNumber":"B 1200563",
      "timeDate":"2012-08-06 09:00:00",
      "setting":"JURY TRIAL",
      "location":"H.C. COURT HOUSE ROOM 320",
      "plaintiffs":"STATE OF OHIO",
      "defendants":"RONALD SILER ",
      "attorneyId":"PP68519"
   }
]
4

1 に答える 1

0

タグ<script>が無効な場所にあります。

このjsfiddleは機能しています:

<div data-role="content">
    <ul id = "myList" data-role="listview" data-inset="true" data-filter="true">
    </ul>
</div>

次の Javascript を<script>ヘッダーのタグに配置する必要があります。

$(document).ready(function() {
    $.getJSON("http://dev.mycourtdates.com/jsonData.txt?",
            {
                id: "73125"
            },
            function(data) {
                var items = [];

                $.each(data, function(i,ct_setting){
                    items.push('<li><a href="#">' + ct_setting.caseNumber + '</a></li');
                });
                console.log(items);
                $('#myList').append(items).listview('refresh');
            });
});

上記のソースに対するアクセス制御ヘッダーの制限のため、フィドルで JSON ソースを変更する必要があったことに注意してください。

于 2013-01-12T05:29:28.907 に答える