Home/ Questions/Q 9153509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:17:03+00:00

I am trying to build a JQuery Mobile listview (based on the getting started

  • 0

I am trying to build a JQuery Mobile listview (based on the getting started guide). The list items are populated by json data.

It is basically working. The list is being created and and styled properly. But the list includes duplicates. There are only 2 json objects, but the list includes four items. The last two are repeats of the first two.

I have double checked the json data and output the variables to the console. Both only contain the two objects, without duplicates.

Why is this jquery/javascript creating duplicate list items in the listview? How can I prevent the duplicates?

My problem may be similar to the problem described at jQuery .append() JSON data in a jQuery Mobile list adding duplicates when page is refreshed?. But the only solutions offered don’t prevent the duplicates, they only explain how to filter out the duplicates. That seems like an inefficient kludge.

Here my javascript ([live version] (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>

Here is my json data ([live version] (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"
   }
]
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your <script> tag is in an invalid location.

    This jsfiddle is working:

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

    The following Javascript should be placed in a <script> tag in your header.

    $(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');
            });
});

    Note I had to change the JSON source in the fiddle because of Access Control Header restrictions on your source above.

    • 0