0

I'm having some problems trying to fix my category drop down on the website i'm developing. Basically one drop down filters has "Sort by Location" and the second one is "Sort by Price" The first one is working correctly which is "Sort by Location" but the second one doesn't. It is loading all the post and not filtering properly.

Here is the link -

http://digitalspin.ph/federalland/?page_id=23

Here is my code

HTML-

<div class="filter_container">
        <?php wp_dropdown_categories( $args_cat1 ); ?> 
</div>

<div class="filter_container">
        <?php wp_dropdown_categories( $args_cat2 ); ?> 
</div>

JS-

<!--DROPDOWN SORT CATEGORY 1 -->
<script type="text/javascript">
var dropdown = document.getElementById("cat1");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
</script>


<!--DROPDOWN SORT CATEGORY 2-->
<script type="text/javascript">
var dropdown = document.getElementById("cat2");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
</script>

Functions.php

//LOCATION FILTER

$args_cat2 = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID', 
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1, 
'child_of'           => 0,
'exclude'            => '1,2,3,4,32,33,34,35,36,37',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0, 
'name'               => 'cat2',
'id'                 => 'cat2',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'category',
'hide_if_empty'      => false,
'walker'             => ''
);

//PRICE FILTER

$args_cat1 = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID', 
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1, 
'child_of'           => 0,
'exclude'            => '1,2,3,4,23,24,25,26,27,28,29,30,31',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0, 
'name'               => 'cat1',
'id'                 => 'cat1',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'category',
'hide_if_empty'      => false,
'walker'             => ''
);

Here is a javascript error from firebug-

TypeError: dropdown is null
dropdown.onchange = onCatChange;

Whenever i pick a category in "Sort by Price" it display all the post from "Sort by Location" which is category ID 23

----UPDATED CODE ----

<!--DROPDOWN SORT CATEGORY 1 -->
<script type="text/javascript">
var dropdown_price = document.getElementById("cat1");
function onCatChange() {
    if ( dropdown_price.options[dropdown_price.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown_price.options[dropdown_price.selectedIndex].value;
    }
}
dropdown_price.onchange = onCatChange;
</script>


<!--DROPDOWN SORT CATEGORY 2-->
<script type="text/javascript">
var dropdown_location = document.getElementById("cat2");
function onCatChange() {
    if ( dropdown_location.options[dropdown_location.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown_location.options[dropdown_location.selectedIndex].value;
    }
}
dropdown_location.onchange = onCatChange;
</script>

1 Answer 1

0

The HTML seems correct, as Price dropdown contains the right cat ID.

I guess this is a JS problem, my first guess is that you shouldn't use the same variable name in both scripts.

Replace dropdown by dropdown_price for second one, like :

<!--DROPDOWN SORT CATEGORY 2-->
<script type="text/javascript">
var dropdown_price = document.getElementById("cat2");
function onCatPriceChange() {
    if ( dropdown_price.options[dropdown_price.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown_price.options[dropdown_price.selectedIndex].value;
    }
}
dropdown_price.onchange = onCatPriceChange;

Let us know !

3
  • Tried your method but it doesn't seem to be working. Someone told me that the javascript i have encoded are in the same context and it is colliding or having some conflict
    – clestcruz
    Nov 22, 2013 at 9:22
  • NVM i got it working i change the variables in Dropdown 1 also. Please see updated code :D
    – clestcruz
    Nov 22, 2013 at 9:33
  • Great. I think you could a step further and create a function using this and bind this function to selectors, it will be easier to maintain.
    – Simon
    Nov 22, 2013 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.