Dynamically loading custom posts by category with AJAX

Question

I'm working on this site:

http://www.bajo.co.uk/2012/

...which shows a toy portfolio on the home page. The toys have different categories: Infant, Vehicles, educational etc. When the user clicks the sidebar menu 'Infant', thumbnails for all toys with the category 'Infant' will be listed on the right.

I currently have this set up by using a different page-template for each category with the following custom loop:

<!-- loop to show products list -->
<?php
    $args = array(
    'post_type' => 'products',
    'orderby' => 'title',
    'order' => 'DES',
    'posts_per_page' => 8,
    'paged' => get_query_var ('page'),
    'post_parent' => $parent,
    'category_name' => 'educational'
    ); 
?>

<?php query_posts($args); ?>

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

<li>
    <a href="<?php the_permalink() ?>" class="product_image">
        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
        <span class="overlay"></span>
    </a>
    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>                                
</li>   

<?php endwhile; ?>

<?php else :?>

<p>There are no products to display</p>

<?php endif; ?>

Although this works correctly, every time the user selects a category from the menu, the page is refreshed.

I would like to implement this with AJAX so that the page does not refresh and the products (which are a custom post type) are loaded in dynamically whilst maintaining the pagination.

Any pointers on where to start greatly appreciated.

I'm using:

Wordpress 3.5.1
Custom Post Type UI plugin

Are you asking what would be the approach with AJax and maybe you're new to it, or a common way to do it out of the box with wordpress? I can help with 1, but not with 2. — Stanley_A, Mar 07 '13 at 10:39
I have some experience with AJAX, but am looking for guidance on how the AJAX code would interact with WP to pull the posts by category. Just looking for pointers on the approach - not someone to do my homework for me. — nfrost21, Mar 07 '13 at 10:42

Adib Aroui · Answer 1 · 2013-03-07T11:58:05.870

I still don't have the right to comment, so I put my comment here as an answer maybe it will be helpful.

My approach for such situation is to create a php file file.php which I will address via a parametrer like this file.php?p=infant (fo example)

<?php

$p=$_GET['p']; 

require('../../../wp-load.php');

?>

                            <?php

                            $my_query = new WP_Query();
                            $my_query->query(array( 'post__in' => array($p)));




                            if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); 

                               ?>
    <li>
    <a href="<?php the_permalink() ?>" class="product_image">
        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
        <span class="overlay"></span>
    </a>
    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>                                
</li>  
                                <?php
                            endwhile;
                            endif;


?>

I will create in addition a javascript function which will manage the ajax call like this:

function f(str)
{

$.ajax({  
cache: true,  
   type: "GET",  
   timeout: 5000,   
   url: 'url/to/file.php?p='+str,  
   success: function(msg)  
    {  

                $('#the_div_containing_li').html(msg);

    },  
    error: function(msg)  
    {  

       alert("Your browser broke!");
            return false;
    }  
});


}

Note that you should put your li (and the dynamically loaded content in a div , which I called the_div_containing_li). and onClick on your anchor, call the javascript function f(id of this anchor). you can of course assign to each anchor an id via the wordpress loop.

My advice is to join this answer with this : http://stackoverflow.com/questions/15175020/dynamically-changing-navigation-links-next-and-previous-in-wordpress-via-ajax/15315024#15315024 — Adib Aroui, Mar 09 '13 at 23:12

Dynamically loading custom posts by category with AJAX

1 Answers1