обновить div с помощью jquery mobile - PullRequest
Новая
       34

обновить div с помощью jquery mobile

0 голосов
/ 23 февраля 2012

Я использую phongap и jquery mobile для создания приложения, которое должно использовать JSON, чтобы вывести список последних сообщений в блоге WordPress, а затем позволить вам щелкнуть статью, а затем перейти на страницу, которая показывает вам полный пост. Мой код может перечислить все статьи, но проблема в том, что код, который должен отображать всю статью в 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>

Ответы [ 2 ]

3 голосов
/ 23 февраля 2012

попробуйте сделать 

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

вместо 

$('#blogList ul').listview();
0 голосов
/ 23 февраля 2012

Вы делаете это неправильно!здесь: 

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

вы закрываете, затем добавляете 

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

<li> должно быть внутри тега <ul>.

...