I have made new wordpress theme based on jquery mobile using this course - easy-development-with-jquery-mobile and i want to add load more button which load the posts via ajax i tried tried to use this plugin load-next-wordpress-posts-with-ajax from problogdesign.com
But it breaks the style of the jquery mobile as it uses place-holder in order not to overwrite the previous posts. you can grab the theme here
The modifed version of the plugin in load-posts.js file
jQuery(document).ready(function($) {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(pbd_alp.startPage) + 1;
// The maximum number of pages the current query can return.
var max = parseInt(pbd_alp.maxPages);
// The link of the next page of posts.
var nextLink = pbd_alp.nextLink;
/**
* Replace the traditional navigation with our own,
* but only if there is at least one page of new posts to load.
*/
if(pageNum <= max) {
// Insert the "More Posts" link.
$('#postsListView')
.append('<li class="pbd-alp-placeholder-'+ pageNum +'"></li>')
//.append('<a id="load-posts-button" href="#" data-role="button">المزيد من المواضيع</a>');
// Remove the traditional navigation.
$('.nav_previous').remove();
$('#coursecount').remove();
$('#showmore').remove();
}
/**
* Load new posts when the link is clicked.
*/
$('#load-posts-button').click(function() {
// Are there more posts to load?
if(pageNum <= max) {
// Show that we're working.
$(this).text('جاري التحميل...');
$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .special',
function() {
// Update page number and nextLink.
pageNum++;
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
// Add a new placeholder, for when user clicks again.
$('#load-posts-button')
.before('<li data-role="list-divider" class="pbd-alp-placeholder-'+ pageNum +'"></li>')
// Update the button message.
if(pageNum <= max) {
$('#load-posts-button').text('المزيد من المواضيع');
} else {
$('#load-posts-button').text('لا يوجد المزيد من المواضيع.');
}
}
);
} else {
$('#load-posts-button').append('.');
}
return false;
});
