Load Wordpress posts in chunks 100 at a time with Ajax and Jquery

I would like some help to change a bit og Jquery/Ajax code. The following code loads a new Wordpress post every time i scroll to the bottom

jQuery(function($){
    var page = 1;
    var loading = true;
    var $window = $(window);
    var $content = $("body #ordrene");
    var load_posts = function(){
            $.ajax({
                type       : "GET",
                data       : {numPosts : 1, pageNumber: page},
                dataType   : "html",
                url        : "http://www.mysite.com/wp-content/themes/twentythirteen-child/loopHandler.php",
                beforeSend : function(){
                    if(page != 1){
                        $content.append('<div id="temp_load" style="text-align:center">' +
                            '<img src="../images/ajax-loader.gif" />' +
                            '</div>');
                    }
                },
                success    : function(data){
                    $data = $(data);
                    if($data.length){
                        $data.hide();
                        $content.append($data);
                        $data.fadeIn(500, function(){
                            $("#temp_load").remove();
                            loading = false;
                        });
                    } else {
                        $("#temp_load").remove();
                    }
                },
                error     : function(jqXHR, textStatus, errorThrown) {
                    $("#temp_load").remove();
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
                }
        });
    }
    $window.scroll(function() {
        var content_offset = $content.offset();
        console.log(content_offset.top);
        if(!loading && ($window.scrollTop() +
            $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
                loading = true;
                page++;
                load_posts();
        }
    });
    load_posts();
}); 

On my site i have about 1000 posts, all which i want to display on one page so that i am able to sort them with Jquery Sortable. But the server i am on can't handle that many posts loading i one go, so i would like to ue ajax to break the query to the database up into multiple chunks.

Therefor i would like to alter the code above (or get advice on brand new code) to do the following: On page load, get 100 posts. When the first 100 posts are loaded, fetch 100 more, And so on until all my Wordpress posts are loaded.

If anyone is able to help me, i would really appreciate it!

Anders

UPDATE:

My loopHandler.php file looks like this

<?php
// Our include
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');

// Our variables
$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

echo $numPosts;
echo $page;

$kundenavn = get_the_title();
$category_id = get_cat_ID($kundenavn);

query_posts('cat=' . $category_id . '&posts_per_page=' . $numPosts . '&paged=' . $page);    

if (have_posts()) : while (have_posts()) : the_post(); ?>

    //Content of the loop 

<?php       
endwhile;
endif;

wp_reset_query();
?>

Answers


You could try something like this:

jQuery(function($) {
  var page = 1;
  var loading = true;
  var $window = $(window);
  var $content = $("body #ordrene");
  var load_posts = function() {
    console.log("Loading posts, page is:",page);
    $.ajax({
      type: "GET",
      data: {numPosts: 100, pageNumber: page}, //changed this
      dataType: "html",
      url: "http://www.kundelogg.no/wp-content/themes/twentythirteen-child/loopHandler.php",
      beforeSend: function() {
        if (page !== 1) {
          $content.append('<div id="temp_load" style="text-align:center">' +
                  '<img src="../images/ajax-loader.gif" />' +
                  '</div>');
        }
      },
      success: function(data) {
        console.log("Received data, length is:",data.length);
        $data = $(data);
        if ($data.length) {
          $data.hide();
          $content.append($data);
          $data.fadeIn(500, function() {
            $("#temp_load").remove();
            loading = false;
          });
        } else {
          $("#temp_load").remove();
        }
        if (data === "")//make sure php returns empty string if no more posts
          return;
        pageNumber++;//added this
        load_posts();//added this
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $("#temp_load").remove();
        alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
      }
    });
  };
  load_posts();
});

Need Your Help

how to call the function in python?

python json python-2.7

scriptPath = os.path.abspath(__file__)

Adding exceptions to regexp patern in ruby

ruby regex markdown ruby-2.0

I wrote this regexp to convert a string into an HTML tag. It matches [img foo] and a third optional (left or right) argument at the end. For example,[img foo left].