Custom query with ajax or some other option to refresh posts based on dropdown menu choices

[aaron4osu]

I have a page that lists all custom posts of type “the-talent”. I have three Dropdowns each with a custom taxonomy (level, location, and specialty). I have a on-click function that grabs the selected values from the dropdown. Each time someone makes a selection I’d like to run a new query with those inputs. Ideally I’d like to do this with ajax and just refresh the section with the posts, but I’m having a hell of a time trying to figure out how to use ajax inside wordpress. I followed a couple tutorials (https://premium.wpmudev.org/blog/load-posts-ajax/) and created a separate js file and added hooks inside the function file as the tutorial suggested, but my ajax never made it back from the server (admin-ajax.php). Not sure what other options are available.

So now I’m back to having everything inside my page-talent.php file.

here is my JS script that grabs the values. at the end of it are the 3 values for (level, location, and specialty).

$(".dropdown-menu li a").click(function (event) {
    var $this = $(this)
    var $dropdown = $this.parents('.dropdown')
    var html = $this.text() + ' <span class="caret"></span>'
    
    $dropdown.find(".btn").html(html);  
    $dropdown.find('a').removeClass('checked');
    $this.addClass('checked');

    var filters = getFilters();

    //var level = filters["level"];
    var level = filters.level;
    var location = filters.location;
    var specialty = filters.specialty;
    
    alert("Level: "+level+" Location: "+location+" Specialty: "+specialty);

    console.log(getFilters());


    event.preventDefault();

    $.ajax({
       url: ajaxpagination.ajaxurl,
       type: 'post',
       data: {
         action: 'ajax_pagination'
       },
       success: function( result ) {
         alert("result"+ result );
       }
        
     })// end ajax
          
          
  })

Here is my working php for the query. I’m trying to foggier out how to add the JS variables to the query below and rerun the query.

$args = array(
  'post_type' => 'the-talent',
  'tax_query' => array(
      'relation' => 'AND',
      array(
          'taxonomy' => 'level',
          'field'    => 'term_id',
          'terms'    => array( '25' ),// replace with var level
      ),
      array(
          'taxonomy' => 'location',
          'field'    => 'term_id',
          'terms'    => array( '20' ),// replace with var location
      ),
      array(
          'taxonomy' => 'specialty',
          'field'    => 'term_id',
          'terms'    => array( '4' ),// replace with var specialty
      ),
      
  ),
);
$talent = new WP_Query( $args );

any suggestions? Any help would be greatly appreciated.

[aaron4osu]

So I made some headway on this, but still could use help with the final part. Now I have it working so there is a query in the admin-ajax.php file. My jQuery function works so that on click the ajax connects to admin-ajax.php, runs the query, comes back to jQuery function and replaces the contents of .posts-area div with the updated query. However the query is hardcoded with static arguments for the level, location, and speciality taxonomy.

A) How do I pass the the javascript variables (var level, var location, var specialty) through to the admin-ajax.php file using this ajax function.

B) How to I add them to the ‘tax_query’ array?

Here is my function inside of the admin-ajax.php file

function get_ajax_posts() {
    // Query Arguments
    $args = array(
      'post_type' => 'the-talent',
      'tax_query' => array(
          'relation' => 'AND',
          array(
              'taxonomy' => 'level',
              'field'    => 'term_id',
              'terms'    => array( '25' ),// needs to be 3 and up? maybe use if statements?
          ),
          array(
              'taxonomy' => 'location',
              'field'    => 'term_id',
              'terms'    => array( '20' ),
          ),
          array(
              'taxonomy' => 'specialty',
              'field'    => 'term_id',
              'terms'    => array( '4' ),
          ),
          
      ),
    );

    // The Query
    $ajaxposts = new WP_Query( $args );

    $response = '';

    // The Query
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
            //$response .= get_template_part('products');

            $response .= 

            $name = get_field('name');
            $main_image = get_field('main_image');

         ?>

        <div class="col-sm-6 col-md-3 talent">
          <div class="talent">
            <a type="button" href="<?php the_permalink() ?>">
             <img class="img-responsive" src="<?php echo $main_image; ?>">
             <h3 class="dark"><?php echo $name; ?></h3> 
            </a>
          </div><!-- close talent -->
        </div><!-- close col -->

       <?php

       ;
        }
    } else {
        $response .= get_template_part('none');
    }

    //echo $response;

    exit; // leave ajax call
}

// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

Here is my jQuery function

(function($) {

  function getFilters () {
    var filters = {}
    
    $('.checked').each(function () {
      filters[this.dataset.filter] = this.dataset.value
    })
    
      return filters
    }

    $(".dropdown-menu li a").click(function (event) {
      var $this = $(this)
      var $dropdown = $this.parents('.dropdown')
      var html = $this.text() + ' <span class="caret"></span>'
      
      $dropdown.find(".btn").html(html);  
      $dropdown.find('a').removeClass('checked');
      $this.addClass('checked');

      var filters = getFilters();

      //var level = filters["level"];
      var level = filters.level;
      var location = filters.location;
      var specialty = filters.specialty;
      
      alert("Level: "+level+" Location: "+location+" Specialty: "+specialty);

      console.log(getFilters());

      event.preventDefault();

      alert("made it up to ajax");
   
      $.ajax({
          type: 'POST',
          url: '<?php echo admin_url('admin-ajax.php');?>',
          dataType: "html", // add data type
          data: { action : 'get_ajax_posts' },
          success: function( response ) {
              console.log( response );

              $( '.posts-area' ).html( response ); 
          }
      });      
    })

})(jQuery);