Generate listview with json jquery mobile

Question

I have been trying for a while now to figure out how to generate an listview using json in jquery mobile. I have found a lot of examples on the net, but I'm fairly new with json and can't figure out what I am doing wrong?

Here is the page generating the json( test.php):

$matches = array(
        array('title' => 'Portugal Open', 'id' => 23),
        array('title' => 'Mallorca Invitational', 'id' => 87));
echo $json = json_encode($matches);

And here is how I'm trying to generate the listview:

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$(document).ready(function(){

        $.getJSON("test.php",function(data) {
                $.each(data.posts, function(i,data){

                $('#matches').children('ul').append('<li><a href="#">'+data.title+'</a></li>');

                });
            }
        );
        return false;
    });
});
</script>

</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content" id="matches">  
        <ul data-role="listview">

        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

I don't get anything in my listview and I can't figure out why!?

Please help and thanks in advance :-)

After you append the items, at the end of your function add this $('[data-role=listview]').listview('refresh'); — Omar
– Omar, Commented Apr 15, 2013 at 21:10

Saurabh · Accepted Answer · 2013-10-24 18:01:58Z

1

Try this code,

 $(document).on('pageshow', '#page', function(){

       $("#page div:jqmData(role=content) #matches ul").empty();

        $.getJSON("test.php",function(data) {

            $.each(data.posts, function(i,data){

              var html="";
              html+="<li><a href='#'>"+data.title+"</a></li>";

              $("#page div:jqmData(role=content) #matches ul").append(html);

            });
        $("#page div:jqmData(role=content) #matches ul:visible").listview("refresh");

        });

    return false;               

 });

have fun!!

answered Oct 24, 2013 at 18:01

Saurabh

2541 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generate listview with json jquery mobile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related