WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Ajax post listing (5 posts)

  1. draver
    Member
    Posted 4 years 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.

  2. draver
    Member
    Posted 4 years ago #

    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?

  3. draver
    Member
    Posted 4 years 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...

  4. mikrolux
    Member
    Posted 4 years ago #

    hello!

    could you post the full code
    how to use this function?

  5. federiko.navarro
    Member
    Posted 3 years ago #

    "could you post the full code. how to use this function?" - same question. I really need it right now. I'm doing ajax web project.

Topic Closed

This topic has been closed to new replies.

About this Topic