Ajax post listing

Resolved draver
(@draver)

16 years, 5 months ago

Hello. I’m trying to show a number of posts on the first page (index) using ajax.
I’ve tried all the possible things to make this, but i don’t know how to get dynamically the posts.
The problem is this: i know how to get the posts from a specific category because i made a lot of featured content, but when i have 100 posts and i want to load them, the site will be blocked because of size of the text.
So, how can i load a number of posts from a category, and when i press “next” or “previous” button (can be different than next_posts_link or previous_posts_link), using ajax, it will be displayed previous 5 or next 5 posts, sorted by date?
I’m using jquery as javascript library for the menu and featured content.

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

(@draver)

Ok, i managed to load the content from the first page using AJAX but i’m stuck at a point.
This is the javascript

var $j = jQuery.noConflict(); 

$j(function(){

    var page = 1;
	var max_page= 0;
    if (page=1){$j("#new").hide();}
    $j("#content").load("lorem-ipsum/page/"+page);
    $j("#old").click(function(){
        page = page+1;
        $j("#content")
            .fadeOut("slow")
            .load("lorem-ipsum/page/"+page, function() {
                $j(this).fadeIn("slow");
				if (page >0){$j("#new").show()}
                 else {$j("#new").show();}

		max_page = page;
		  });

        return false;

    });
  $j("#new").click(function(){
        page = max_page-1;
        $j("#content")
            .fadeOut("slow")
            .load("lorem-ipsum/page/"+page, function() {
                $j(this).fadeIn("slow");

				 });

        return false;

    });
});

});

And this is the navigation (located in the header.php):

<a href="#">Old Posts</a>
<a href="#">New Posts</a>

The “lorem-ipsum” page it’s just a template in wich are displayed the last 5 posts.
My problem is here: when the user is on the last page with the posts and there are no “old posts”, i want to make it to disappear. For the “next posts” was simple.
So my question is: how can i count the number of post and us the array in the javascript?

Thread Starter

draver

(@draver)

16 years, 5 months ago

Ok, i figured out how to do it. This is the final code from header.php

<script>

$(function(){
    var maxpage = new Array("<?php echo $wp_query->max_num_pages; ?>");
    var nr = 0;
    var page = 1;
	$("#new").hide();
    $("#content").load("lorem-ipsum/page/"+page);
    $("#old").click(function(){
        page = page+1;
        $("#content")
            .fadeOut("normal")
            .load("lorem-ipsum/page/"+page, function() {
                $(this).fadeIn("normal");
   				nr = nr +1;
				if (page > 1){$("#new").show();}else{$("#new").hide();}
				if (page < maxpage){$("#old").show();}else{$("#old").hide();}

		  });
        return false;

    });
  $("#new").click(function(){
        page=nr;
        $("#content")
            .fadeOut("normal")
            .load("lorem-ipsum/page/"+page, function() {

				$(this).fadeIn("normal");
				if(page > 1){$("#new").show();} else{$("#new").hide();}
				if (page < maxpage){$("#old").show();}else{$("#old").hide();}
				nr=nr-1;

				 });
        return false;

    });
});
</script>

Thanks for support…