Ajax and WP_Query/tax_query parameter

Question

After doing some extensive research, I've exhausted all my options and decided to actually ask a question here. I'm trying to get a filtered set of posts through AJAX using WP_Query and the tax_query parameter.

I currently have one custom post type called "Vocabulary Terms" and two custom taxonomies called "vocabulary categories" and "difficulty level". Essentially what I want users to do is select a category, then a difficulty level and load any of the posts that are tagged with each. Below are my php functions and js. It seems I can filter by Vocabulary Terms but the second I attempt to pass anything into tax_query, it fails.

Any ideas?

ajax-game-functions.php

function get_game_difficulty() {

// Nonce check
$nonce = $_REQUEST['nonce'];
if (!wp_verify_nonce($nonce, 'ajax_scripts_nonce')) die(__('Busted.'));

global $wpdb;
global $wp_query;
global $post;
global $terms;


$html = "";
$success = false;
$gameCategory = $_REQUEST['gameCategory'];
$gameDifficulty = $_REQUEST['gameDifficulty'];

$html .= '<h2>Listen and repeat each word you hear until you feel comfortable pronouncing each word.</h2>';
$html .= $gameCategory;
$html .= $gameDifficulty;

$html .= '<ul>';
$args = array(
    'numberposts' => 5,
    'post_type' => 'vocabulary_terms',
    'tax_query' => array(
        array(
            'taxonomy' => 'vocabulary_categories',
            'field' => 'slug',
            'terms' => $gameCategory
        )
    )
);
$myposts = get_posts( $args );
foreach( $myposts as $post ) :  setup_postdata($post);
    $title = get_the_title();
    $html .= '<li>'.$title.'</li>';
endforeach;
$html .= '</ul>';

// Build the response...
$success = true;
$response = json_encode(array(
    'success' => $success,
    'html' => $html
));

// Construct and send the response
header("content-type: application/json");
echo $response;
exit;
}
add_action('wp_ajax_nopriv_get_game_difficulty', 'get_game_difficulty' );
add_action('wp_ajax_get_game_difficulty', 'get_game_difficulty' );

ajax-game-scripts.js

$(document).on('click', '#vocabulary-games a.difficulty-level', function() {
//$('#vocabulary-games a.difficulty-level').click(function(){
// Store category slug in variable

var vocab_difficulty = $(this).attr('data-difficulty');
var vocab_cat = $(this).attr('data-category');

// post data to function
$.post(ajax_scripts.ajaxurl, {
    dataType: "jsonp",
    action: 'get_game_difficulty',
    nonce: ajax_scripts.nonce,
    gameDifficulty: vocab_difficulty,
    gameCategory: vocab_cat
  }, function(response) {
    if (response.success===true) {
      $('#vocabulary-games').children().fadeOut('slow',function(){
        //$('#vocabulary-categories').children().hide(1,function(){
          $('#vocabulary-games').append().html(response.html);
        //});
      });
    } else {
      alert('!');
      // Bad Response message
    }
});
  }); // end click

Answer 1

Your code looks fine, but it's failing because your custom taxonomy is not getting registered anywhere in the action hooks of an AJAX call.

My guess is that you are registering your custom taxonomies per the Taxonomies documentation, which tells you to add it to the "init" action hook. However, "init" doesn't get called during an AJAX call. It only gets called during a typical page request or an admin page request (see the Action Reference documentation). (Note: action reference documentation in the codex seems really out of date, it doesn't include any list of actions run during an AJAX request.)

Workaround: where you need access to your custom taxonomies, manually run the init action at the beginning of your ajax function like so:

function get_game_difficulty() {
  do_action("init");

  // Code that relies on custom taxonomies being registered can be used below.
  ...
}
add_action('wp_ajax_nopriv_get_game_difficulty', 'get_game_difficulty' );
add_action('wp_ajax_get_game_difficulty', 'get_game_difficulty' );