CODEWITHSUNDEEP
jqueryjsonjquery-mobile
Steven Kinnear
Steven Kinnear

Reputation: 412

Creating dynamic list view in jquery mobile not working?

When trying to create a dynamic listview on the fly i get this

what i get

here is my json

{"eventid":["61","23"],"name":["Clare Birthday","Mums Birthday"],"enddate":["Sat 27th April 2013","Wed 19th June 2013"]}

and here is my code.

<script type="text/javascript">
                                $(function(){
                                    var items="";
                                        $.getJSON("ajaxResponder.php?method=check-events",function(data){
                                            $("#contacts").html(
                                            '<li data-role="list-divider" role="heading">Live Events</li>'+
                                                $.each(data,function(index,item){
                                                    '<li><a href="check-events-details?eventid='+item.eventid+'" data-transition="slide">'+item.name+ 
                                                    '<p>End Date: '+item.enddate+'</p></li>'
                                                }));
                                            $("#contacts").listview("refresh");
                                        });
                                });

                        </script>

            <div data-role="fieldcontain">
            <ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
            </ul>
            </div>

can anyone see where i am going wrong?

Upvotes: 1

Views: 1065

Answers (1)

Omar
Omar

Reputation: 31732

The problem is, you aren't reading the Array correctly. The below solution is bases on assumption that you want to create two list items with links to id. There are many ways to read arrays, it depends on how you want to output the data.

var object = {
 "eventid": ["61", "23"],
 "name": ["Clare Birthday", "Mums Birthday"],
 "enddate": ["Sat 27th April 2013", "Wed 19th June 2013"]
};

First, you need to convert JSON object to an Array.

var array = [object];

And then loop inside it. I used for statement here to loop twice.

for (var i = 0; i < 2; i++) {
 $.each(array, function (index, values) {
  var events = values.eventid;
  var names = values.name;
  var enddates = values.enddate;
  $('[data-role="listview"]').append('<li><a href=link"' + events[i] + '"> ' + names[i] + ' - ' + enddates[i] + '</a></li>');
  $('[data-role="listview"]').listview('refresh');
 });
}

Demo

Note: Element id should start with a letter not a number.

Upvotes: 1

Related Questions