0

I am using ajax to filter a custom post type. I want to add a "reset" button that destroys the ajax session and shows all posts instead of the filter.

The filters are activated on change with query. Code attached.

jQuery

(function ($) {
    $(document).ready(function () {

jQuery(function($){
    $('#filter').change(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('.message').text('Applying Filters...');          },
            success:function(data){
                filter.find('.message').text('');                $('#response').html(data);
            }
        });
        return false;
    });

});
});
})(jQuery);

Form

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">

    <?php global $post;
    $args = array( 'post_type' => 'staff', 'numberposts' => -1, 'orderby' => 'title', 'order' => 'asc');

    $myposts = get_posts($args);
      echo '<select name="namefilter"><option value="">Search By Name</option>';
    foreach ($myposts as $post) : setup_postdata($post);
      echo '<option value="' . $post->post_name . '">' . $post->post_title . '</option>';
    endforeach;
      echo '</select>';
    wp_reset_postdata();?>

    <?php
        if ($terms = get_terms('team_group', 'orderby=name')) :
            echo '<select name="teamfilter"><option value="">Search By Group</option>';
            foreach ($terms as $term) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';
        endif;
    ?>
    <?php
        if ($terms = get_terms('expertise', 'orderby=name')) :
            echo '<select name="expertisefilter"><option value="">Search By Area of Expertise</option>';
            foreach ($terms as $term) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';
        endif;
    ?>

    <!-- <button>Apply filters</button> -->
    <div class="message"></div>
    <input type="hidden" name="action" value="customfilter">
<input type="reset" id="configreset" value="Reset">
</form>
<div id="response">

</div>

PHP Function

function my_filters() {

$args = array(
    'orderby'        => 'title',
    'post_type'      => 'staff',
    'posts_per_page' => -1,
);


// Has to be empty() becuase there is a default answer. So even if nothing was picked, isset() will return true.
if ( !empty($_POST['namefilter'])) {
  $args['name'] = $_POST['namefilter'];

};

// Only Team Filter
if ( !empty($_POST['teamfilter']) && empty($_POST['expertisefilter'])) {
  $args['tax_query'] = array(

        array(
          'taxonomy' => 'team_group',
          'field'    => 'id',
          'terms'    => $_POST['teamfilter']
        ),


  );
};

// Only expertise Filter
if ( empty($_POST['teamfilter']) && !empty($_POST['expertisefilter'])) {
  $args['tax_query'] = array(

        array(
          'taxonomy' => 'expertise',
          'field'    => 'id',
          'terms'    => $_POST['expertisefilter']
        ),


  );
};


// Both taxonomies
if ( !empty($_POST['teamfilter']) && !empty($_POST['expertisefilter'])) {
  $args['tax_query'] = array(
      'relation'       => 'AND',
          array(
            'taxonomy' => 'team_group',
            'field'    => 'id',
            'terms'    => $_POST['teamfilter']
          ),
          array(
            'taxonomy' => 'expertise',
            'field'    => 'id',
            'terms'    => $_POST['expertisefilter']
          )

    );
};

        $query = new WP_Query($args);

        if ($query->have_posts()) :
            while ($query->have_posts()): $query->the_post(); ?>

              //Display my content here

            <?php endwhile;

        wp_reset_postdata(); else :
            echo 'No posts found';
        endif;

        die();
    }

    add_action('wp_ajax_nopriv_customfilter', 'my_filters');
    add_action('wp_ajax_customfilter', 'my_filters');

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.