wordpress jquery mobile theme load more posts problem?
-
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.