1

Ok I have been doing some research here and I am not sure on how to solve this problem as most of the ajax and wordpress topics seem different to mine. Pretty much I have a site

http://dev.touch-akl.com/childsplay/

and in the blogs section it shows the three latest blogs with a more stuff link that I want to load in the next 3 posts with ajax.

My jQuery is as follows

loadPosts();

function loadPosts(){

        var $loadBtn = $('.ajax-load a');
        var $loadCont = $('#ajax-content');
        var pageTitle = document.title;


        $loadBtn.live("click",function(e){
            e.preventDefault();

            var sourceTarget = '#ajax-content .the-posts';
            $this = $(this);
            pageUrl=$this.attr('href');

            $loadCont.fadeTo(500,0);

            $loadCont.load(pageUrl+" "+sourceTarget, function(){

                $loadCont.fadeTo(500,1);

                        if(window.history.replaceState){
                     document.title = pageTitle;
                     window.history.replaceState(null, pageTitle, pageUrl);
                   }                                

                        //loadJQUERY(sourceTarget);
            }); // end ajax load    

        });     // end click function

}

and the html 

        <div id="ajax-content">
            <div class="the-posts">

                <?php
                // START A QUERY OF THE NEWS ITEM POSTS AND LOOP THAT THANGGGG
                if ( get_query_var('paged') ) $paged = get_query_var('paged');  
                if ( get_query_var('page') ) $paged = get_query_var('page');

                query_posts('posts_per_page=3&paged=' . $paged);

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

                    <article class="three columns">
                        <h3>The Most Recent Post</h3>
                        <img class="blog-image" src="<?php bloginfo('template_url');?>/images/blog/blogs-post.jpg" alt="Childsplay">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                        <a href="#">Read More</a>
                    </article>

            <?php endwhile; ?>

                    <div class="navigation">
                        <span class="left ajax-load"><? previous_posts_link('&larr; More Stuff') ?></span>
                        <span class="right ajax-load"><? next_posts_link('More Stuff &rarr;') ?></span>
                    </div>      

            <?php else : endif; ?> 
            <?php wp_reset_query(); // reset the query ?>   

        </div>
    </div>

It seems like it cannot find the page even though the permalink is set to the default of what the wordpress next posts button is.

Is my way of ajax not very good for wordpress? I have seen people use other ways but I dont quite understand them.

Chris G-Jones
  • 596
  • 4
  • 13
  • 26
  • I get this message in the console GET http://dev.touch-akl.com/childsplay/page/2/.the-posts – Chris G-Jones Nov 16 '12 at 00:24
  • Are you getting the first 3 posts on page load? – VIDesignz Nov 16 '12 at 03:44
  • Yes. Also when the "more stuff" button is clicked, and the url changes over to page 2, I can then refresh the page and the next content comes in and then If you click the back arrow the posts work. – Chris G-Jones Nov 18 '12 at 20:33
  • Also I get a 404 Not Found error when trying to load the posts. Wondering if my problem is similar too this guys? http://stackoverflow.com/questions/3445270/jquery-ajax-returning-404-error-but-correct-response – Chris G-Jones Nov 18 '12 at 21:24

1 Answers1

0

If you want to consider using plugin then theres a ton. Heres what Ive found so far. Maybe this would help you This one is a step by step process http://www.mygeekpal.com/creating-an-ajax-powered-pagination-in-wordpress/

This one is nice too but the concept is different http://wordpress.org/extend/plugins/ajax-pagination/screenshots/

loQ
  • 2,147
  • 18
  • 21