0

I'm having trouble getting this Ajax tutorial to work - if anyone is able to help me figure this out it would be much appreciated. I followed the instructions step by step and have gone over the code numerous times wihtout any progress.

When I select the cateogries the posts don't filter by category/taxonomy - all the posts just stay present on the page.

Here's also a github with my project files: https://github.com/guyku/WordPressAjax_RyanMcGovern_Lesson

index.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

  <body>

    <div id="content">
     <?php include('content.php'); ?>
    </div>

  </body>
</html>

content.php:

<div class="js-filter">
    <?php

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1
        );

        $query = new WP_Query($args);

        if($query->have_posts()) :
            while($query->have_posts()) : $query->the_post();
                the_title('<h2>', '</h2>');
                the_content('<p>', '</p>');
            endwhile;
            endif;
            wp_reset_postdata(); ?>
</div>

<div class="categories">
    <ul>
        <li class="js-filter-item"><a href="<?= home_url(); ?>">All</a></li>
<?php 
$cat_args = array(
    'exclude' => array(1),
    'option_all' => 'All'
);

$categories = get_categories($cat_args);

foreach($categories as $cat) : ?>
    <li class="js-filter-item"><a data-category="<?= $cat->term_id; ?>" href="<?= get_category_link($cat->term_id); ?>"><?= $cat->name; ?></a></li>
<?php endforeach; ?>
</ul>
</div>

scripts.js:

(function($){

    $(document).ready(function(){
        $(document).on('click', '.js-filter-item > a', function(e){
            e.preventDefault();

            var category = $(this).data('category');

            $.ajax({
                url:wp_ajax.ajax_url,
                data: { action: 'filter', category: category },
                type: 'post',
                success: function(result) {
                    $('.js-filter').html(result);
                },
                error: function(result) {
                    console.warn(result);
                }
            });
        });
    });

})(jQuery);

scripts.php:

<?php
/*
* Enqueue scripts.js if file scripts.js exists
*/
function load_scripts() {

    wp_enqueue_script('ajax', get_template_directory_uri() . 'scripts.js', array('jquery'), NULL, true);

    wp_localize_script('ajax' , 'wp_ajax',
        array('ajax_url' => admin_url('admin-ajax.php'))
        );

}

add_action( 'wp_enqueue_scripts', 'load_scripts');

?>

example.php:

<?php

add_action( 'wp_ajax_nopriv_filter', 'filter_ajax' );
add_action( 'wp_ajax_filter', 'filter_ajax' );

function filter_ajax() {


$category = $_POST['category'];

$args = array(
        'post_type' => 'post',
        'posts_per_page' => -1
        );

if(isset($category)) {
    $args['category__in'] = array($category);
}

        $query = new WP_Query($args);

        if($query->have_posts()) :
            while($query->have_posts()) : $query->the_post();
                the_title('<h2>', '</h2>');
                the_content('<p>', '</p>');
            endwhile;
        endif;
            wp_reset_postdata(); 


    die();
}
?>

functions.php:

<?php

require_once('scripts.php');
require_once('example.php');

?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.