0
<div class="latest_video">
        <!-- We add a form that submits the request the the same page -->
        <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
            <?php
                if( $terms = get_terms( 'category', 'orderby=name' ) ) : // to make it simple I use default categories
                    echo '<select name="categoryfilter"><option>Select category...</option>';
                    foreach ( $terms as $term ) :
                        echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
                    endforeach;
                    echo '</select>';
                endif;
            ?>
            <button>Apply filter</button>
            <input type="hidden" name="action" value="myfilter">
        </form>

        <?php
        function misha_filter_function(){
                    $args = array(
                    'orderby' => 'date', // we will sort posts by date
                    'order' => $_POST['date'], // ASC или DESC
                    'taxonomy' => 'category',
                    'field' => 'id',
                    'terms' => $_POST['categoryfilter'],
                    'post_type' => 'post',
                    'posts_per_page' => 10,
                    'post_status' => 'publish',
                );

                // for taxonomies / categories
                if( isset( $_POST['categoryfilter'] ) )
                    $args['tax_query'] = array(
                        array(
                            'taxonomy' => 'category',
                            'field' => 'id',
                            'terms' => $_POST['categoryfilter'],
                            'post_type' => 'post',
                            'posts_per_page' => 10,
                            'post_status' => 'publish',
                        )
                    );
                // the query
                $the_query = new WP_Query( $args );
            ?>
            <?php if ( $the_query->have_posts() ) : ?>
                <!-- the loop -->
                <ul class="sflex">
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <li class="boxers">
                        <div class="simges"><?php the_post_thumbnail( 'large') ?></div>
                        <div class="stexto">
                            <h4><?php $categories = get_the_category();
                            if ( ! empty( $categories ) ) {
                              echo '<a class="themecolor" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">'  . esc_html( $categories[0]->name ) . '</a>';
                            } ?></h4>
                            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                        </div>
                    </li>
                <?php endwhile; ?>
                </ul>
                <!-- end of the loop -->
                <!-- <?php wp_reset_postdata(); ?> -->
            <?php endif; ?>
        <?php } ?>
        <?php
            add_action('wp_ajax_myfilter', 'misha_filter_function');
            add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');
        ?>
    </div>

I am trying to populate posts based on the category selected with ajax.

I am using this article as a starting point

I have written this is JS file →

('#filter').submit(function(){
    var filter = $('#filter');
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(), // form data
        type:filter.attr('method'), // POST
        beforeSend:function(xhr){
            filter.find('button').text('Processing...'); // changing the button label
        },
        success:function(data){
            filter.find('button').text('Apply filter'); // changing the button label back
            $('#response').html(data); // insert data
        }
    });
    return false;
});

Nothing is populating neither initially nor after category selection. Can someone help me to find where am I going wrong?

Update →

Forget about the category filter posts are not even populating. There seems some fundamental issue.

  • If the misha_filter_function() function actually defined right after the form like that? That hook's not going to run in an AJAX request. – Jacob Peattie May 27 '18 at 9:30
  • Hi there, I have done it like this in single-video.php and this one in functions.php. Can you please specify sir where I am doing a mistake. Do you think that this also has some issue? – The WP Novice May 27 '18 at 9:53

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.