I am trying to append my JSON datas into the content page but the datas are not loaded. When I use console.log I can see the data appearing.
JS:
$(document).on('pagebeforeshow', '#blogposts', function() {
//$.mobile.showPageLoadingMsg();
$.ajax({
url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
dataType: "json",
jsonpCallback: 'successCallback',
async: true,
beforeSend: function() { $.mobile.showPageLoadingMsg(true); },
complete: function() { $.mobile.hidePageLoadingMsg(); },
success:function(data){
$.each(data.posts, function(i, val) {
console.log(val.title);
$('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo('#postList');
return (i !== 4);
console.log('#postlist');
});
},
error: function(data) {
alert("Data not found");
}
});
});
HTML:
<!-- Page: Blog Posts -->
<div id="blogposts" data-role="page">
<div data-role="header" data-position="fixed">
<h2>My Blog Posts</h2>
</div><!-- header -->
<div data-role="content">
<ul id="postlist"> </ul><!-- content -->
</div>
<div class="load-more">Load More Posts...</div>
</div><!-- page -->
