Filtering inside single-taxonomy.php by terms (ajax) WordPress
- SOLVED
*resolved*
Answers (2)
Reigel Gallarde answers:
try this code....
your current code above replace it with this....
<h1>The People</h1>
<?php if( $terms = get_terms( 'skills', 'orderby=name' ) ) : // t
echo '<select name="skills-filter"><option>Choose skill</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
endforeach;
echo '</select>';
endif; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
$meta_query = array(
array(
'key' => 'places', // name of custom field
'value' => '"' . get_the_ID() . '"', // matches exactly "123", not just 123. This prevents a match for "1234"
'compare' => 'LIKE'
)
);
if( $_GET['skills-filter'] ){
$meta_query[] = array(
'key' => 'skills',
'value' => '"' . $_GET['skills-filter'] . '"',
'compare' => 'LIKE'
);
}
$peoples = get_posts(array(
'post_type' => 'people',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'ID',
'order' => 'ASC',
'meta_query' => $meta_query
));
?>
<?php if( $peoples ): ?>
<div id="people-div" class="ppl-sect">
<div class="pp-archives">
<?php foreach( $peoples as $people ): ?>
<?php
$image = get_field('upload_image', $people->ID);
$name = get_field('name', $people->ID);
$text = get_field('text', $people->ID);
?>
<div class="ppl-box">
<div class="ppl-inner">
<div class="dcmg"><?php
$image = get_field('upload_image', $people->ID);
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?></div>
<div class="dctxt">
<h4><?php echo $name; ?></h4>
<p>
<?php echo substr($text, 0, 100); ?>
</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div></div>
<?php endif; ?>
<?php endwhile; ?>
</div>
then add this to functions.php.. this will do the ajax thing...
add_action('wp_footer', 'ajax_request', 999);
function ajax_request(){
global $wp;
$current_url = add_query_arg( $wp->query_string, '', home_url( $wp->request ) ;
?>
<script>
jQuery(function($){
$('[name=skills-filter]').on('change',function(){
$( "#people-div" ).load( "<?php echo $current_url; ?> #people-div", {'skills-filter': $(this).val()} );
});
});
</script>
<?php
}
let me know if this works or not...
Reigel Gallarde comments:
I added some code... please try and let me know...
changeinthesub comments:
I think there is a missing bracket a wp->request but having that in ensures the page loads but the code doesn't seem to do anything when selecting a skill. The people associated with that place also no longer show.
Reigel Gallarde comments:
can check by viewing the source on the browser and let me know what script it produce?
then paste it here please... you could find it down the bottom...
Reigel Gallarde comments:
can you check also if there are error on the console...
changeinthesub comments:
I changed #people-div to where the results should load but the original nor my changed version works. The output of the script is ::
jQuery(function($){
$('[name=skills-filter]').on('change',function(){
$( ".pp-archives" ).load( "http://www.localtutors.dev/locations/test-location?places=test-location&post_type=places&name=test-location #team", {'skills-filter': $(this).val()} );
});
});
Reigel Gallarde comments:
I see.... but in this,
$( "#people-div" ).load( "<?php echo $current_url; ?> #people-div", {'skills-filter': $(this).val()} );
there are 2 people-div in this line and should be the same....
what this will do is load the the page via ajax and get the element that has an id of people-div.
if you want the <div class="pp-archives">... please add an id here...
like <div id="people-div" class="pp-archives">
and also, ajax will not work if there are errors on the console...
you can also check ajax activities to debug. In google chrome this can be done by pressing F12, clicking Network then cliking XHR. This way you can check if there's ajax happening after changing the selected skill..
changeinthesub comments:
Don't think any ajax is working. I have it on a similar site that's in dev. Can you please PM me with your email and I can get you login to fix this as an urgent job? Happy to pay extra. Thank you!
Reigel Gallarde comments:
I've sent you a message..
Arnav Joy answers:
can you show me url of the page where it is displayed ?
Arnav Joy comments:
please try this code
<h1>The People</h1>
<form action="" method="get">
<?php if( $terms = get_terms( 'skills', 'orderby=name' ) ) : // t
echo '<select name="skills-filter" onchange="this.form.submit()"><option>Choose skill</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
endforeach;
echo '</select>';
endif; ?>
</form>
<?php while ( have_posts() ) : the_post(); ?>
<?php
$args['post_type'] = 'people';
$args['post_status'] = 'publish';
$args['posts_per_page'] = -1;
$args['orderby'] = 'ID';
$args['order'] = 'ASC';
$meta_query[] = array(
'key' => 'places',
'value' => '"' . get_the_ID() . '"',
'compare' => 'LIKE'
);
if( $_GET['skills-filter'] ){
$meta_query[] = array(
'key' => 'skills',
'value' => '"' . get_the_ID() . '"',
'compare' => 'LIKE'
);
}
$args['meta_query'] = $meta_query;
$peoples = get_posts( $args );
?>
<?php if( $peoples ): ?>
<div class="ppl-sect">
<div class="pp-archives">
<?php foreach( $peoples as $people ): ?>
<?php
$image = get_field('upload_image', $people->ID);
$name = get_field('name', $people->ID);
$text = get_field('text', $people->ID);
?>
<div class="ppl-box">
<div class="ppl-inner">
<div class="dcmg"><?php
$image = get_field('upload_image', $people->ID);
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?></div>
<div class="dctxt">
<h4><?php echo $name; ?></h4>
<p>
<?php echo substr($text, 0, 100); ?>
</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div></div>
<?php endif; ?>
<?php endwhile; ?>
</div>
I have added meta query with key as "skills" so for the new taxonomy please change this key as you have
changeinthesub comments:
On a local dev site but see attached the working example - it all works just need the skills filter to display the people as per skill :)
changeinthesub comments:
This adds the select filter ID to the url and reloads the page but no people show. On initial page load no people are showing either anymore. I may be doing something wrong in the code though as you mention changing the meta_query. Do you mean in this bit > $args['meta_query'] = $meta_query;
What field should the 'meta_query' be referencing?
changeinthesub comments:
Probably on the right track if we fix this :)
changeinthesub comments:
Sorry - the original page load does show the people tagged with that location :) the filtering just doesn't show any though the url changes. Sorry for the confusion.