Wordpress Post show in phonegap
Here Full Script Code with Demo
================================================================================================================================================
<script type="text/javascript">
jQuery(document).ready(function($) {
$.get( "your site name/wp-json/wp/v2/posts", function( data ) {
$.each( data, function( i, val ) {
$( "#app" ).append(
'<li class="swipeout">'+
'<div class="swipeout-content item-content">' +
'<div class="post_entry">' +
'<div class="post_details">'+
'<h2><a href="blog-single.html" onclick="myFunction(' + val.id + ')">' + val.title.rendered + '</a></h2>' +
<!-- '<h2>' + val.id + '</h2>' + -->
'<div ><img width="100%" src="' + val.better_featured_image.source_url + '"/></div>' +
'<p>' + val.excerpt.rendered + '</p>' +
'<span class="post_date">' + val.date + '</span><br />' +
'<span class="post_author">by <a href="#">' + val.author + '</a></span><br />' +
'<span class="post_comments"><a href="#">' + val.comment_status + '</a></span>' +
'</div>'+
'<div class="post_swipe"><img src="images/swipe_more.png" alt="" title="" /></div>'+
'</div>'+
'</div>'+
'<div class="swipeout-actions-right">'+
'<a href="#" class="action1 open-popup" data-popup=".popup-social"><img src="images/icons/white/heart.png" alt="" title="" /></a>'+
'</div>'+
'</li>'
);
});
});
});
</script>
=================================================================================================================================================
<script>
function myFunction(id) {
//alert("I am an alert box!");
//$( "#app" ).html('hi');
//alert(id);
//exit;
//console.log()
$.get( "your site name/wp-json/wp/v2/posts/"+id, function( data ) {
//console.log(data.title.rendered+"ravi");
//var app1=$.ajax({url:"/blog-single.html",async:false});
$( "#app1" ).html(
'<li class="swipeout">'+
'<h2 class="page_subtitle">' + data.title.rendered + '</a></h2>' +
'<div class="post_single">'+
'<div ><img width="100%" src="' + data.better_featured_image.source_url + '"/></div>' +
'<blockquote>' + data.content.rendered + '<blockquote>' +
'<span class="post_date">' + data.date + '</span><br />' +
'<span class="post_author">by <a href="#">' + data.author + '</a></span><br />' +
'<span class="post_comments"><a href="#">' + data.comment_status + '</a></span>' +
'</div>'+
'</li>'
);
});
}
</script>
================================================================================================================================================
<div class="list-block">
<ul class="posts" data-role="listview" id="app">
</ul>
</div>
================================================================================================================================================
Here Full Script Code with Demo
================================================================================================================================================
<script type="text/javascript">
jQuery(document).ready(function($) {
$.get( "your site name/wp-json/wp/v2/posts", function( data ) {
$.each( data, function( i, val ) {
$( "#app" ).append(
'<li class="swipeout">'+
'<div class="swipeout-content item-content">' +
'<div class="post_entry">' +
'<div class="post_details">'+
'<h2><a href="blog-single.html" onclick="myFunction(' + val.id + ')">' + val.title.rendered + '</a></h2>' +
<!-- '<h2>' + val.id + '</h2>' + -->
'<div ><img width="100%" src="' + val.better_featured_image.source_url + '"/></div>' +
'<p>' + val.excerpt.rendered + '</p>' +
'<span class="post_date">' + val.date + '</span><br />' +
'<span class="post_author">by <a href="#">' + val.author + '</a></span><br />' +
'<span class="post_comments"><a href="#">' + val.comment_status + '</a></span>' +
'</div>'+
'<div class="post_swipe"><img src="images/swipe_more.png" alt="" title="" /></div>'+
'</div>'+
'</div>'+
'<div class="swipeout-actions-right">'+
'<a href="#" class="action1 open-popup" data-popup=".popup-social"><img src="images/icons/white/heart.png" alt="" title="" /></a>'+
'</div>'+
'</li>'
);
});
});
});
</script>
=================================================================================================================================================
<script>
function myFunction(id) {
//alert("I am an alert box!");
//$( "#app" ).html('hi');
//alert(id);
//exit;
//console.log()
$.get( "your site name/wp-json/wp/v2/posts/"+id, function( data ) {
//console.log(data.title.rendered+"ravi");
//var app1=$.ajax({url:"/blog-single.html",async:false});
$( "#app1" ).html(
'<li class="swipeout">'+
'<h2 class="page_subtitle">' + data.title.rendered + '</a></h2>' +
'<div class="post_single">'+
'<div ><img width="100%" src="' + data.better_featured_image.source_url + '"/></div>' +
'<blockquote>' + data.content.rendered + '<blockquote>' +
'<span class="post_date">' + data.date + '</span><br />' +
'<span class="post_author">by <a href="#">' + data.author + '</a></span><br />' +
'<span class="post_comments"><a href="#">' + data.comment_status + '</a></span>' +
'</div>'+
'</li>'
);
});
}
</script>
================================================================================================================================================
<div class="list-block">
<ul class="posts" data-role="listview" id="app">
</ul>
</div>
================================================================================================================================================
Watch Demo Video here : https://youtu.be/sV9kydy4d24
1.Go to your mobile device where the PhoneGap Developer App is running, enter the server address on the main screen and tap Connect.
2.You should see the connection occur followed by a success message as shown below. If you receive an error of any kind, ensure once again that you are connected to the same network on both your device and computer. You could also check the issue tracker and PhoneGap Google Groups list for further help.
1.Go to your mobile device where the PhoneGap Developer App is running, enter the server address on the main screen and tap Connect.
3.Once the PhoneGap Developer app connects, it will load and display your application as shown below:
4.Here you can see WordPress Post, here two post 1. Phone-gap build, 2. Hello World.
5. Here you can see this is a "single-blog.html page", when you click on name of the post, after post open in another page.
You Can also watch video here:
Comments
Post a Comment