Load WordPress posts using jQuery

Question

I have a page setup with the following code:

    <?PHP

        get_header();

    ?>

    <div class="wrapper clearfix">

        <div class="clearfix">

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

            <div class="page-header">

                <h2 class="section_title"><?php the_title(); ?></h2>

            </div>

            <?php endwhile; endif; ?>

            <div class="filter">
                <p>Filter :</p>
                <?php 
                //list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin)

                $taxonomy     = 'portfolio_tag';
                $orderby      = 'name'; 
                $show_count   = 0;      // 1 for yes, 0 for no
                $pad_counts   = 0;      // 1 for yes, 0 for no
                $hierarchical = 1;      // 1 for yes, 0 for no
                $title        = '';
                $hide_empty   = 0;

                $args = array(
                  'taxonomy'     => $taxonomy,
                  'orderby'      => $orderby,
                  'show_count'   => $show_count,
                  'pad_counts'   => $pad_counts,
                  'hierarchical' => $hierarchical,
                  'title_li'     => $title,
                  'hide_empty'   => $hide_empty
                );
                ?>

                <ul>
                <li class="current-cat"><a title="View all posts" href="<?php bloginfo('url'); ?>/portfolio/">All</a></li>
                <?php wp_list_categories( $args ); ?>
                </ul>

            </div>              

        </div>

        <div class="description">

        <?php the_content(); ?>

        </div>

        <div class="portfolio-archives">

            <ul class="portfolio-list clearfix">

            <?php $temp = $wp_query; $wp_query= null; ?>        

            <?php $wp_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 999, 'paged' => $paged)); while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

            <?php //$portfolio_query = new WP_Query(array( 'post_type' => 'portfolio' )); while ($portfolio_query->have_posts()) : $portfolio_query->the_post();

            ?>      

                <?PHP

                    if (!($nr++ % 4))
                    {
                        echo '<li class="first">';  
                    }
                    else 
                    {
                        echo '<li>';
                    }
                ?>

                <?php
                if ( has_post_thumbnail() ) { ?>

                    <a title="<?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
                    <h3><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
                    <?php echo get_the_term_list( $post->ID, 'portfolio_tag', '<p class="taxonomy">', ', ', '</p>' ); ?>

                <?php

                } else {

                ?>

                    <a title="<?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="http://dummyimage.com/600x400/ccc/fff&amp;text=x" /></a>
                    <h3><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
                    <?php echo get_the_term_list( $post->ID, 'portfolio_tag', '<p class="taxonomy">', ', ', '</p>' ); ?>

                <?php } ?>

                </li>

            <?php endwhile; ?>

            </ul>

        </div>
        <!-- END div.portfolio-archives -->


        <?php if(function_exists('wp_pagenavi'))
        {
            wp_pagenavi();
        }
        ?>

        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
        </div>

        <?php $wp_query = null; $wp_query = $temp; ?>


    </div>
    <!-- END div.clearfix -->

    <?PHP

        get_footer();

    ?>

It basically spits out all my posts for a custom post type called portfolio. I have created a custom taxonomy for this type which allows me to tag posts with filters. A user can click a link on the top right and see only posts within that filter.

What I would like to do is make it so that using jQuery it loads in those posts instead of taking the user off to the page (and if they dont have javascript on it would just load the page as normal).

This is an example of what I want working: http://adamfoster.me.uk (THIS IS NOT MY WEBSITE) if you click the links (which are custom taxonomies) on the right it changes the posts above.

Can anyone help?

Answer 1

Could use some code from WordPress › AJAX Page Loader 1.5 « WordPress Plugins

Answer 2

Pretty simple. You'll need to do several things.

1) Div place holder for where you want to update the stuff. For this example let's call it "placeHolder" 2) jQuery post method to fire off anytime a filter is clicked. So if you've styled your filters with a particular style, let's say "classFilter" then an example would be: $('.classFilter').click(function(){ .... 3) PHP to process your posts. Simply change the query to filter by post (e.g. query_posts('tag=tag1+tag2+tag3'); ) and return the resulting set. If you chose to post as json, then an example would be, after you looped your posts into a variable (e.g. $posts['posts']) : return json_encode($posts) 4) And back to your jQuery post method...in the function(data) part, make sure you set your 'placeHolder' html to data.posts