• 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;
    });

  • The topic ‘wordpress jquery mobile theme load more posts problem?’ is closed to new replies.