News Pages from WordPress JSON in jQuery Mobile

1 Views

I’m getting started with jQuery Mobile and PhoneGap. I have an app that I want to display the five most recent posts from a WordPress blog, and when you click one it loads the content of that post in a new page. Using the JSON api plugin I was able to spit out a list of the titles of the most recent posts.

What I’m stuck on is making those titles into links that will load new pages with their respective content. I’ve read the JQM documentation on dynamic page generation but I’m a bit lost.

Read More

My current code looks like the following: 

var urlNews="http://wordpress-site.com/";
$.getJSON(urlNews,function(json){
        $.each(json.posts,function(i,post){
            $("#recentNews").append(
            '<li><a href="#dont-know-what-to-put-here" class="ui-link">'+post.title+'</a></li>'
         );
      });
      $('#recentNews li:gt(4)').remove();
});

I’ve tried adapting the sample code from the official documentation here, but haven’t had any luck.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. This is the code that I’m using to display content from a WordPress blog:

        var MYBLOG_LIMIT = 7;
var MYWRAPPER_CLASS = 'homeblog';

var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+"/api/get_recent_posts/";f+="?count="+d+"&page="+e+"&callback=?";jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};

var blog = WP.open('http://www.endofphotography.com/');

blog.posts().all(function(posts){
    for(var i = 0; i < posts.length; i++){
        jQuery('.'+MYWRAPPER_CLASS).append(function(){
    return (posts[i].content) ? '<div class="lastpost_title" href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></div><div href="'+posts[i].url+'">'+posts[i].content+'<br>'+posts[i].date+'</div><br><hr><br>' : '<div href="'+posts[i].url+'"><h4>'+posts[i].date+'</h4></div>';
   });
  }
});

    I had the opposite problem and was trying to disable links. Particularly, for images. I didn’t want the user to be scrolling on their mobile and accidentally clicking a link and sending them out of the app. You can control this by editing the HTML markup in your WordPress admin account for Posts. I did this manually.

    For the Titles, as a temporary solution since I don’t believe they are clickable by default using JSON API, I would do something like this manually in the WordPress Editor:

      <a href="#YourLink"><h4>Click here to read full article</h4></a>