Wordpress Filter multiple drop-down taxonomies to display custom field via ajax Wordpress Filter multiple drop-down taxonomies to display custom field via ajax wordpress wordpress

Wordpress Filter multiple drop-down taxonomies to display custom field via ajax


php ajax wordpress custom-post-type taxonomy

I think the best solution is to use PHP to generate the data-set and use for example AngularJS to show on client site.

JavaScript

angular.module('app', []).controller('controller', [  '$scope',  '$attrs',  function ($scope, $attrs) {    $scope.data=JSON.parse($attrs.selects);    $scope.region = {};    $scope.city = {};    $scope.loadCitys = function () {      $scope.region = JSON.parse($scope.region);    };    $scope.loadPosts = function () {      $scope.city = JSON.parse($scope.city);    };  }]);

And HTML

<!DOCTYPE html><html ng-app="app">  <head>    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>    <link rel="stylesheet" href="style.css" />  </head>  <body ng-controller="controller" data-selects='[{"name":"Region 1","citys":[{"name":"City 1","posts":[{"title":"Post 1","id":1},{"title":"Post 2","id":2}]}]},{"name":"Region 2","citys":[{"name":"City 2","posts":[{"title":"Post 3","id":3},{"title":"Post 4","id":4}]},{"name":"City 3","posts":[{"title":"Post 5","id":5},{"title":"Post 6","id":6}]}]}]'>    <div>      Region: {{region.name}} <br>      City: {{city.name}}    </div>    <select ng-model="region" ng-change="loadCitys()">      <option ng-repeat="tregion in data" value="{{tregion}}">{{tregion.name}}</option>    </select>    <select ng-model="city" ng-change="loadPosts()">      <option ng-repeat="tcity in region.citys" value="{{tcity}}">{{tcity.name}}</option>    </select>    <select ng-model="post">      <option ng-repeat="tpost in city.posts" value="{{tpost}}">{{tpost.title}}</option>    </select>    <script src="script.js"></script>  </body></html>

Living example: https://plnkr.co/edit/gyzCxMpn9luAcGsLZHYD

(You have to finalize it)

php ajax wordpress custom-post-type taxonomy

FacetWP does what you want but might even be better than what you've laid out - AJAX updates to a data set based on taxonomy filters. You'd have both dropdowns showing regions and cities, users could toggle what they need. If you wanted to do the dependent dropdown concept, you can make a custom facet.

Usage is straightforward - here is how to use it with WP_query:

<?php  // 1- Setup WP_query variable to get all your content  // Logic here is descending alphabetical of all content  // FacetWP handles granular search winnowing  // Note the facetwp array item  $args = array(    'posts_per_page' => 9999,    'post_type' => array('new-cpt', 'work-featured'),    'orderby' => 'rand',    'facetwp' => true, // so we can hook into facetwp via functions.php  );  $the_query = new WP_Query( $args );  // 2- Setup new loop  if($the_query->have_posts()) {    while($the_query->have_posts()) :      $the_query->the_post();      // do your thing         endwhile;  }  wp_reset_postdata();?>

Once you setup the taxonomies in wp-admin, you can output the taxonomy filters right into your code (maybe a sidebar or wherever you need it):

<?php echo facetwp_display( 'facet', 'region' ); ?><?php echo facetwp_display( 'facet', 'cities' ); ?>

Another note - since you are using custom post-types, you will have to add a custom filter to your functions.php file:

// Adding in custom filter for FacetWP to detect custom WP_Query on facet pagefunction my_facetwp_is_main_query( $is_main_query, $query ) {    if ( isset( $query->query_vars['facetwp'] ) ) {        $is_main_query = true;    }    return $is_main_query;}add_filter( 'facetwp_is_main_query', 'my_facetwp_is_main_query', 10, 2 );

php ajax wordpress custom-post-type taxonomy

It's hard to figure out your real world problem but I will try my best:

Let me visualize what you're trying to archive:

Show code snippet