0

私はしばらくの間、jquery モバイルで json を使用してリストビューを生成する方法を見つけようとしています。私はネット上で多くの例を見つけましたが、私はjsonにかなり慣れていないので、何が間違っているのかわかりませんか?

json(test.php) を生成するページは次のとおりです。

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

そして、これが私がリストビューを生成しようとしている方法です:

<!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>

リストビューに何も表示されず、理由がわかりません!?

助けてください、事前に感謝します:-)

4

1 に答える 1

1

このコードを試して、

 $(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;               

 });

楽しんで！！

于 2013-10-24T18:01:58.497 に答える