jquery mobileを使ってdivをリフレッシュする

私はphongapとjquery mobileを使ってJSONを使ってワードプレスブログの最近の投稿をリストアップし、記事をクリックしてからあなたは完全な投稿です。私のコードはすべての記事をリストすることができますが、問題は、div内の完全な記事を表示するはずのコードが機能していないことです。私は次のコードを持っている：jquery mobileを使ってdivをリフレッシュする

<html>  
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script> 
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
<script src="phonegap.js" type="text/javascript"></script> 

<script> 
function onBodyLoad(){  
    document.addEventListener("deviceready",onDeviceReady,false); } 

$(function(){ 
    $.ajax({ 
     url: "http://blog.smartapplications.co.zw/?json=get_recent_posts", 
     dataType: 'jsonp', 
     success: function(json_results){ 
      console.log(json_results); 
      // Need to add UL on AJAX call or formatting of userlist is not displayed 
      $('#blogList').append('<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b"></ul>'); 
      listItems = $('#blogList').find('ul'); 
      $.each(json_results.posts, function(key) { 
       html = '<h3><a href="#post_id_'+json_results.posts[key].id+'">'+json_results.posts[key].title+'</a></h3>'; 


       listItems.append('<li>'+html+'</li>'); 
      }); 
      // Need to refresh list after AJAX call 
      $('#blogList ul').listview(); 

      $.each(json_results.posts, function(key){ 
        div_html='<div data-role="page" id="#post_id_'+json_results. posts[key].id+'"><div data-role="header"><h1>'+json_results. posts[key].title +'</h1></div><div data-role="content ">'+json_results. posts[key].text+'</div></div>'; 
        $('#content_blog').html(div_html); 
        }); 

     } 
    }); 
}) 

</script> 

</head> 
<body onload = "onBodyLoad();"> 
<div data-role="page" id="page"> 
    <div data-role="header"> 
     <h1>Home</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview"> 
      <li><a href="#page1">Latest Articles</a></li> 
     </ul>  
    </div> 

</div> 

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>Latest Articles</h1> 
    </div> 
    <div data-role="blog_content" style="padding:0px;"> 
    <div id="blogList"></div> 
    </div> 
</div> 



<div id="content_blog" data-role="slider"> 
</div> 
</div> 
</body> 
</html>

出典

2012-02-23 user1227793

jquery.mobile-1.0a3を使っている理由は何ですか？あなたは常に最新の – ghostCoder

は

$('#blogList ul').listview("refresh");

代わりの

$('#blogList ul').listview();

出典

2012-02-23 08:35:15 ghostCoder

あなたは間違ってそれをやっているをやってみてください！ここに：

$('#blogList').append('<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b"></ul>');

あなたは<ul>タグの内側にあるべき

listItems.append('<li>'+html+'</li>');

<li>を追加している、その後閉じます。

出典

2012-02-23 08:36:36 Ocelot

jquery mobileを使ってdivをリフレッシュする

答えて

関連する問題