I have a search and filter in a wordpress site that I have inherited and need to fix, but I cannot get it to work correctly. Here is what it needs to do: three dropdowns, 2 which are conditional, 1st dropdown pulls top level category and second dropdown populates second level category once 1st dropdown has been selected. I have this working. But when the results are pulled, only the first selection pulls the correct results (if selecting another selection the results show all results from that category). I think the issue is that I need to have the dropdown values as unique ids for the second dropdown which has the same option value for any selection.
Here is the code for the conditional dropdowns (which do work):
[php]
// DOMContentLoaded
var jQuery = jQuery.noConflict();
jQuery(document).ready(function($) {
// all the quicksand and filtering stuff
$(function() {
// bind dropdowns in the form
var $filterphases = $('#filter select[name="phases"]');
var $filtertypes = $('#filter select[name="phases2"]');
var $filterpclass = $('#filter select[name="pclass"]');
// get the first collection
var $applications = $('#applications');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$('select').change(
function() {
$(this).addClass('animate');
if ($($filterphases).val() == '0'){
if ($($filtertypes).val() == '0'){
if ($($filterpclass).val() == '0'){
//0-0-0
var $filteredData = $data.find('div');
} else {
//0-0-1
var $filteredData = $data.find('div[data-pclass=' + $($filterpclass).val() + ']' );
}
} else {
if ($($filterpclass).val() == '0'){
//0-1-0
var $filteredData = $data.find('div[training-phase=' + $($filtertypes).val() + ']' );
} else {
//0-1-1
var $filteredData = $data.find('div[training-phase=' + $($filtertypes).val() + ']' + 'div[data-pclass=' + $($filterpclass).val() + ']');
}
}
} else {
if ($($filtertypes).val() == '0'){
if ($($filterpclass).val() == '0'){
//1-0-0
var $filteredData = $data.find('div[data-phases=' + $($filterphases).val() + ']' );
} else {
//1-0-1
var $filteredData = $data.find('div[data-phases=' + $($filterphases).val() + ']' + 'div[data-pclass=' + $($filterpclass).val() + ']');
}
} else {
if ($($filterpclass).val() == '0'){
//1-1-0
var $filteredData = $data.find('div[data-phases=' + $($filterphases).val() + ']' + 'div[training-phase=' + $($filtertypes).val() + ']');
} else {
//1-1-1
var $filteredData = $data.find('div[data-phases=' + $($filterphases).val() + ']' + 'div[training-phase=' + $($filtertypes).val() + ']' + 'div[data-pclass=' + $($filterpclass).val() + ']');
}
}
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 1000,
adjustHeight: true,
adjustWidth: false,
atomic: false
});
});
});
// conditional dropdowns
$('.drop-phase').change(function(){
var drop = $('.drop-phase option:selected').attr('class');
//alert (drop);
//var drop = $('.drop-resource option:selected').alert (drop);
$('.drop-noselect').hide();
$('.currentdrop').hide().removeClass('currentdrop');
$('.'+drop).show().addClass('currentdrop');
});
});
</script>
<!-- stuff -->
<?php
$phases = get_terms('training_phase');
$types = get_terms('asset_type');
$classes = get_terms('classification');
//$phases2 = get_terms('training_phase',array('hide_empty'=>tue,'exclude'=>array(330)));
//$phases2 = get_terms('training_phase',array('hide_empty'=>true));
$phases2 = get_terms('training_phase');
?>
<?php //print_r($types); ?>
<?php //print_r($classes); ?>
<div class="row dropdown-wrapper">
<form id="filter">
<div class="four columns spot-dropdown">
<select class="drop-phase" name="phases">
<option value="0">Select Asset Category</option>
<?php foreach ($phases as $phase) {
if ($phase->parent == '0') {
echo '<option value="'.$phase->slug.'" class="select-'.$phase->term_id.'">'.$phase->name.'</option>';
}
} ?>
</select>
</div>
<div class="four columns spot-dropdown">
<?php foreach ($phases2 as $phase) {
if ($phase->parent == '0') {
echo '<select name="phases2" class="drop-'.$phase->term_id.' drop-resource select-'.$phase->term_id.'">';
echo '<option value="0">Select Asset Resource</option>';
}
foreach ($phases2 as $p) {
if ($p->parent != '0' && $p->parent == $phase->term_id) {
//echo '<option value="'.$phase->term_id.'">'.$p->name.'</option>';
echo '<option value="'.$p->slug.'">'.$p->name.'</option>';
}
}
//if ($phase->parent == '0') {
echo '</select>';
//}
} ?>
<select class="drop-noselect" name="types">
<option value="0">Select an Asset Category First...</option>
</select>
</div>
<div class="four columns spot-dropdown">
<select name="pclass">
<option value="0">Select Product Classification</option>
<?php foreach ($classes as $class) {
echo '<option value="'.$class->slug.'">'.$class->name.'</option>';
} ?>
</select>
</div>
</form>
</div> <!-- .dropdown-wrapper -->
<?php //foreach ($classes as $class) { print_r($class); }?>
<div class="row">
<div id="applications" class="twelve columns spot-entry">
<?php query_posts(array('posts_per_page'=>-1,'post_type'=>array('spot_asset'))); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php load_module($post->ID); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
[/php]
Here is the code for module.php (the results):
[php]<?php
function load_module($pid,$loc,$term) {
$tphases = wp_get_post_terms($pid,'training_phase');
$mtypes = wp_get_post_terms($pid, 'asset_type');
$pclasses = wp_get_post_terms($pid, 'classification');
$tphases2 = wp_get_post_terms($pid, 'training_phase');
//print_r( $tphases2 );
global $wp_query;
$parent = $wp_query->post->post_parent;
$parent_type = get_post_type($parent);
if (get_post_type() == 'attachment' && $parent_type == 'spot_asset') {
$is_asset_attachment = true;
}
if (!wp_attachment_is_image($pid) && get_post_type() == 'attachment') {
$media_not_image = true;
}
?>
<div <?php if($is_asset_attachment == true || $media_not_image == true) { echo 'style=""'; } ?> class="animate block <?php echo $tphases[0]->slug; ?> <?php if ($mtypes[0]->slug == 'sequence') { echo 'sequence-block'; } ?>" data-id="<?php echo $pid; ?>" data-phases="<?php echo $tphases[0]->slug; ?>" data-types="<?php echo $mtypes[0]->slug; ?>" data-pclass="<?php echo $pclasses[0]->slug; ?>" training-phase="<?php foreach ($tphases2 as $phase) {if ($phase->parent == '0') {echo '';} foreach ($tphases2 as $p) {if ($p->parent != '0' && $p->parent == $phase->term_id) {echo $p->slug;}}} ?>">
<div class="block-title">
<?php
if ('spot_manual' == get_post_type()) {
echo 'Training Manual';
} elseif ('attachment' == get_post_type()) {
echo 'REFERENCE & TOOLS';
//echo '(REFERENCE & TOOLS)';
} elseif($tphases[0]->name == '') {
echo 'Module';
} else {
echo $tphases[0]->name;
//echo $p->name;
} ?>
</div>
<div class="block-content">
<?php
if (get_post_type() == 'attachment' && wp_attachment_is_image($pid)) { ?>
<div class="block-icon illustration"></div>
<?php } else { ?>
<div class="block-icon-<?php echo $tphases[0]->slug; ?> "></div>
<?php } ?>
<div class="asset-title">
<?php
$title = get_the_title();
$titlelen = strlen($title);
if ($titlelen < 50) {
echo $title;
} else {
$title = substr($title,0,50).'...';
echo $title;
}
?>
</div>
<div class="asset-desc">
<?php
//echo $pid.' ';
//echo $parent_type.' - '.$parent.' - '.$pid.' - ';
if (get_field('download_or_static_content') == 'Download' && get_post_type() == 'spot_asset') {
echo 'Click the link below to download this resource.';
} elseif ('spot_manual' == get_post_type()) {
echo 'Client the link below to view this chapter.';
} elseif (wp_attachment_is_image($pid)) {
echo 'Click the link below to view this image.';
} elseif (get_field('asset_location') == 'External' ) {
if (get_the_content() == '') {
if (get_field('external_source')) {
echo 'Click the link below to visit this resource on '.get_field('external_source').'.';
} else {
echo 'Click the link below to visit this resource.';
}
} else {
the_excerpt();
}
} else {
the_excerpt();
}
?>
</div>
<div class="asset-link">
<?php if ($mtypes[0]->slug == 'url') { ?>
<a href="<?php the_field('external_url'); ?>" target="_blank">View Resource ></a>
<?php } elseif (get_field('download_or_static_content') == 'Download') { ?>
<a href="<?php the_field('file'); ?>" target="_blank">Download Resource ></a>
<?php } elseif (get_post_type() == 'attachment' && wp_attachment_is_image($pid)) { $p = get_post($pid); ?>
<a rel="#resource-<?php echo $pid; ?>" href="#" >View Illustration ></a>
<div class="simple_overlay" style=" width: 775px; postion: absolute; left: 50%; margin-left: -410px;" id="resource-<?php echo $pid; ?>">
<div class="search-head resource-head"><?php echo $p->post_title; ?></div>
<img style="width:775px;" alt="" src="<?php
$isrc = wp_get_attachment_image_src($pid,'full');
echo get_bloginfo('template_directory').'/rhgthumb.php?src='.$isrc[0].'&w=775&zc=1"'; ?>" />
<div class="search-desc resource-desc"><?php echo $p->post_content; ?></div>
</div>
<script>
jQuery(document).ready(function() {
jQuery("a[rel]").overlay();
});
</script>
<?php } elseif (get_field('download_or_static_content') == 'Static Content') { ?>
<a href="<?php the_permalink(); ?>">View Resource ></a>
<?php } elseif (get_field('asset_location') == 'External') { ?>
<a href="<?php the_field('external_url'); ?>" target="_blank">View Resource ></a>
<?php } elseif (get_field('download_or_static_content') == 'Existing Resource') { ?>
<a href="<?php the_field('existing_resource_url'); ?>">View Resource ></a>
<?php } elseif ('spot_manual' == get_post_type()) { ?>
<a href="<?php the_permalink(); ?>">View Chapter ></a>
<?php } ?>
</div>
</div>
</div>
[/php]
I would appreciate any help on this, I just cannot figure it out!!
Thank you!!