Tag: reset

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');