jquery - Wordpress - Filtering Custom Post Type by multiple Custom Taxonomies on front end while displaying all the results on first page load

Question

This question is based on another question: Wordpress - Filtering Custom Post Type by multiple Custom Taxonomies on front end

That question is already solved but on that function it only loads the posts when "Apply Filter" button is clicked. Is there a way to display all the posts from the post type initially when the page is loaded? Then when a user select an option and click on "Apply Filters" it then filter results based on user selected filter.

My question is how do I keep all the posts displayed when the page is rendered?

Here is my code:

AJAX

    add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE}
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

function misha_filter_function(){
  $taxonomies = get_taxonomies();;
  $args = array(
      'post_type' => 'restaurant',
      'orderby' => 'date',
      'order'    => 'DESC',
  );
  $relation = 'AND';
  $params = array();
  $args['tax_query']['relation'] = $relation;

  foreach ( $taxonomies as $tax ) {
      if( isset( $_POST[ $tax . 'filter' ] ) && !empty( $_POST[ $tax . '_filter' ] ) ) {
          $args['tax_query'][] = array(
                  'taxonomy' => $tax,
                  'field' => 'id',
                  'terms' => $_POST[ $tax . 'filter' ],
              );
      }
      }

  $query = new WP_Query( $args );

  if( $query->have_posts() ) :
      while( $query->have_posts() ): $query->the_post();
          echo '<h5>' . $query->post->post_title . '</h5>';
      endwhile;
      wp_reset_postdata();
  else :
      echo 'No posts found';
  endif;

  die();
};

JS

jQuery(function($) {
$('#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
            $('#loop').html(data); // insert data
        }

    });
    return false;
});

});

HTML

<form action="<?php echo admin_url('admin-ajax.php'); ?>" method="POST" id="filter">
                              <?php
                                  if( $terms = get_terms( array(
                                      'taxonomy' => 'restaurant_category',
                                  ) ) ) :
                                      echo '<select name="tax1filter"><option value="">Select tax1...</option>';
                                      foreach ( $terms as $term ) :
                                          echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
                                      endforeach;
                                      echo '</select>';
                                  endif;

                                  if( $terms = get_terms( array(
                                      'taxonomy' => 'restaurant_location',
                                  ) ) ) :
                                      echo '<select name="tax2filter"><option value="">Select tax2...</option>';
                                      foreach ( $terms as $term ) :
                                          echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
                                      endforeach;
                                      echo '</select>';
                                  endif;
                              ?>
                              <button>Apply filter</button>
                              <input type="hidden" name="action" value="myfilter">
                          </form>
                          <div id="loop"></div>

question from:https://stackoverflow.com/questions/65865141/wordpress-filtering-custom-post-type-by-multiple-custom-taxonomies-on-front-en

Answer 1

Waitting for answers