Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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;
});
share|improve this question
I had the exact same requirements to get a jquery mobile paginated list with a "Show More" button appended to the end of the list and data to be returned via Ajax calls. This is the plugin that I developed and use - give it a try: listomatic.stakbit.com – Staker Mar 21 at 2:10

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.