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>
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 !

| improve this answer | |
  • 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 '13 at 9:22
  • NVM i got it working i change the variables in Dropdown 1 also. Please see updated code :D – clestcruz Nov 22 '13 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 '13 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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