Query Posts based upon options selected in a Category Dropdown

If you’re using AJAX initiated onchange, you don’t really need the submit button. If you want to use one anyway, your JS needs a .click() handler to initiate the AJAX.

How to setup AJAX in the WP environment is covered starting here and runs on for several pages:
https://developer.www.ads-software.com/plugins/javascript/

You’ll want to initiate the AJAX server request using the POST method. Then the selected sport will be in $_POST in your PHP AJAX callback, keyed under the dropdown field’s assigned name attribute.

You may query for the appropriate posts using WP_Query class as usual. When you loop through the results, output your table HTML like you would for a web page. Just realize this data is collected by the AJAX jQuery function into a single variable, it does not automatically appear on screen.

That single variable is passed to the jQuery response handler. Here you can set the response as the inner HTML of a container that was initially output for this purpose.

None of this probably makes much sense unless you’ve become familiar with doing AJAX within WP according to the linked article. The whole AJAX process can be challenging to setup at first. Once you have the basic framework working, altering it to do more complex tasks becomes easier.

Debugging AJAX PHP callbacks can be difficult. I like to setup a page template as a testbed that calls the AJAX callback directly without using jQuery or admin-ajax.php. This allows us to fine tune the PHP code as we normally would outside of the AJAX process. Then when you call the function through AJAX you can be confident the output will be as expected.

bcworkz,
Thanks for the direction and explanation.
So I’ve spent the last 12hrs learning about how ajax works with wordpress and I’ve made some progress, but I’m still stuck trying to figure out what to do next.

I checked the console log and I can see that the slug of my custom taxonomy is being passed to the javascript file. However, I’m not sure how I can pass that slug back to php as a variable so that I can use it to run a query to generate my output.

This is what my code looks like that generates the dropdown

$categories = get_terms(array('taxonomy' => 'sports_roster_category'));
  		  $select = "<select name='cat' id='cat' class='postform'>n";
  		  $select.= "<option value='-1'>Select category</option>n";

		  foreach($categories as $category){
			if($category->count > 0){
				$select.= "<option value='".$category->slug."'>".$category->name."</option>";
			}
		  }

		  $select.= "</select>";

		  echo $select; { ?>
          <img src="<?php echo admin_url('/images/wpspin_light.gif'); ?>" id="roster_loading" class="waiting" style="display:none;" />

     </div>
     <div id="roster_results"></div>
		<?php	}

This is my javascript code. By viewing the console log, I can see that when I select an option in the dropdown, that the selection is being passed to javascript

jQuery(document).ready(function($) {
	var sel = document.getElementById('cat');
	var slug = sel;

	$('#cat').change(function(){
		 $('#roster_loading').show();
		 data = {
			 action: 'roster_get_results',
			 roster_nonce: roster_vars.roster_nonce,

		};
		 $.post(ajaxurl, data, function(response) {
		 	$('#roster_results').html(response);
			$('#roster_loading').hide();
	});
		 console.log( slug.value );
		 return false;
	 });

});

What I can’t figure out how to do, is pass the “var slug” back to php as variable so that I can use it in my query to display the results based upon which dropdown category is selected.

Add your value to the data array

data = {
   sport: slug.value,
   action: 'roster_get_results',
   ...

In PHP get the value with $_POST['sport']

bcworkz…
Very sorry for the delay in getting back.
Thanks for your help on this issue.

I was trying things similar to your suggestion, but i wasn’t adding the .value. Once I did that, everything worked perfectly.

Thanks again!!

You’re most welcome. Those silly little details will get you every time ??