Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a search widget with a drop down populated with my custom taxonomies. I need one of the other input fields to only show when a certain taxonomy or its children are selected.

Before you say this is only a jquary question, please bare with me. I think I need to edit wp_dropdown_categories() with Walker_CategoryDropdown to add data-select="select1" in the tag.

I found this code that does what I want I just dont know how to implement it.

The HTML (Updated to reflect my code):

<form role="search" method="get" id="equipfilter" action="<?php bloginfo('url'); ?>/">
    <fieldset>
        <?php
            $dropdown_args = array(
                'taxonomy'          => 'exc_equipment_cat',
                'name'              => 'exc_equipment_cat',
                'show_count'        => 1,
                'orderby'           => 'name',
                'hierarchical'      => true,
                'echo'              => 0,
                'walker'            => new Walker_SlugValueCategoryDropdown
                );
            /*
            wp_dropdown_categories( $dropdown_args );
            */?>
            <?php
            $select = wp_dropdown_categories($dropdown_args);
            $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select);
            echo $select;
            ?>
    </fieldset>
    <fieldset class="hidden" data-select="NOT SURE WHAT TO PUT HERE">
        <legend>Kw Range:</legend>
        <input type="text" name="kw_min" placeholder="min" value><br />
        <input type="text" name="kw_max" placeholder="max" value>
    </fieldset>
    <fieldset>
        <legend>Price Range:</legend>
        <input type="text" name="pr_min" placeholder="from" value><br />
        <input type="text" name="pr_max" placeholder="to" value>
    </fieldset>
    <input type="submit" id="filtersubmit" value="Search" />
</form>

The css:

.hidden {
 display:none;   
}

The jquery (Updated to where its working now when tested with my test category):

jQuery(function ($){
    $(function(){
        $('.postform').change(function() {
            var selectData = $(this).attr("data-select");
            var selectValue = $(this).val();
                    $('.hidden').hide();
             if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
                 $("fieldset[data-select^='" + selectData + "']").hide();
                 $("fieldset[data-select='" + selectData + selectValue +"']").show();
             }
        });
    });
});
share|improve this question
    
I could strip the select tags and then just add my own. The code given by Geert here but even he says its dirty :-) $ddp = wp_dropdown_pages(array( 'echo' => FALSE, // return the HTML instead of outputting it )); $ddp = preg_replace('~^<select[^>]*+>\s*~', '', trim($ddp)); // opening select tag $ddp = preg_replace('~\s*</select>$~', '', $ddp); // closing select tag –  HaneD Nov 23 '12 at 8:18
    
Got the data-select added by using <?php $select = wp_dropdown_categories($dropdown_args); $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select); echo $select; ?> and changing the echo in my $dropdown_args to 0 –  HaneD Nov 23 '12 at 9:03
    
Added $('.hidden').hide(); to hide fieldset if required category was deselcted –  HaneD Nov 23 '12 at 11:37

3 Answers 3

To add the data-select to the select tag use

 <?php 
   $select = wp_dropdown_categories($dropdown_args); 
   $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select); 
   echo $select; 
 ?>

then change the echo in $dropdown_args to 0.

I will take the jquery part of the question to the right platform

share|improve this answer

To hide the kw field I used just jQuery because if Javascript is disable then the field will still show but if I hide it with css then it will stay hidden. Here is my code to hide the field:

<script type="text/Javascript">
        jQuery(function ($){
            $(document).ready(function () {
                    $(".kw").hide();
                });

            $(function(){
                $('.postform').change(function() {
                    var selectData = $(this).attr("data-select");
                    var selectValue = $(this).val();
                    $('.kw').hide();
                     if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
                         $("fieldset[data-select^='" + selectData + "']").hide();
                         $("fieldset[data-select='" + selectData + selectValue +"']").show();
                     }
                });
            });
        });
        </script>
share|improve this answer
up vote 0 down vote accepted

My full working code for those interested

    <?php 
    // Equipment Category Dropdown, thanks https://gist.github.com/2902509
    class Walker_SlugValueCategoryDropdown extends Walker_CategoryDropdown {

            function start_el(&$output, $category, $depth, $args) {
            $pad = str_repeat('&nbsp;', $depth * 3);
            $cat_name = apply_filters('list_cats', $category->name, $category);
            //$output .= "<select name='exc_equipment_cat' id='exc_equipment_cat' class='postform' data-select='select1'>";
            $output .= "\t<option class=\"level-$depth\" value=\"".$category->slug."\"";
            if ( $category->term_id == $args['selected'] )
                $output .= ' selected="selected"';
            $output .= '>';
            $output .= $pad.$cat_name;
            if ( $args['show_count'] )
                $output .= '&nbsp;&nbsp;('. $category->count .')';
            $output .= "</option>\n";
            //$output .= "</select>";
        }
    }

    add_action( 'widgets_init', 'register_equipment_search' );

    function register_equipment_search() {
        register_widget( 'Equipment_Search' );
    }
    //add_action("widgets_init", array('Equipment_Search', 'register'));
    class Equipment_Search extends WP_Widget {

        function Equipment_Search() {
            $widget_ops = array( 'classname' => 'agriquip', 'description' => __('Displays the Equipment Search Form', 'agriquip') );
            $control_ops = array( 'width' => 200, 'height' => 350, 'id_base' => 'agriquip-widget' );
            $this->WP_Widget( 'agriquip-widget', __('Equipment Search', 'agriquip'), $widget_ops, $control_ops );
        }

        function widget( $args, $instance ) {
            extract( $args );

            $title = apply_filters('widget_title', $instance['title'] );
            $tract_id = isset( $instance['kwtax'] ) ? $instance['kwtax'] : false;   
            $tract = wp_list_pluck(get_terms('exc_equipment_cat', array('parent' => $tract_id)), 'slug');
            $tractparent = get_term_by('id', $tract_id , 'exc_equipment_cat');
            $tractparent = $tractparent->slug; 


            echo $before_widget;

            // Display the widget title
            if ( $title )
                echo $before_title . $title . $after_title;

            ?>
            <div>
            <script type="text/Javascript">
            jQuery(function ($){
                $(document).ready(function () {
                        $(".kw").hide();
                    });

                $(function(){
                    $('.postform').change(function() {
                        var selectData = $(this).attr("data-select");
                        var selectValue = $(this).val();
                        $('.kw').hide();
                         if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
                             $("fieldset[data-select^='" + selectData + "']").hide();
                             $("fieldset[data-select='" + selectData + selectValue +"']").show();
                         }
                    });
                });
                var values = <?php echo json_encode($tract); ?>;
                values.push ("<?php echo $tractparent; ?>");
                jQuery('.postform').change(function(){
                    var j = jQuery(this);
                    if(values.indexOf(j.val()) >= 0) {
                        jQuery('.kw').attr('data-select', 'select1' + j.val());
                    }
                });
            });
            </script>
            <form role="search" method="get" id="equipfilter" action="<?php bloginfo('url'); ?>/">
                <fieldset>
                    <?php
                    echo 'KW Category Id' .$tract_id;
                        $dropdown_args = array(
                            'taxonomy'          => 'exc_equipment_cat',
                            'name'              => 'exc_equipment_cat',
                            'show_count'        => 1,
                            'orderby'           => 'name',
                            'hierarchical'      => true,
                            'echo'              => 0,
                            'walker'            => new Walker_SlugValueCategoryDropdown
                            );

                        wp_dropdown_categories( $dropdown_args );

                        $select = wp_dropdown_categories($dropdown_args);
                        $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select);
                        echo $select;
                        ?>
                </fieldset>
                <fieldset class="kw" data-select="select1">
                    <legend>Kw Range:</legend>
                    <input type="text" name="kw_min" placeholder="min" value><br />
                    <input type="text" name="kw_max" placeholder="max" value>
                </fieldset>
                <fieldset>
                    <legend>Price Range:</legend>
                    <input type="text" name="pr_min" placeholder="from" value><br />
                    <input type="text" name="pr_max" placeholder="to" value>
                </fieldset>
                <input type="submit" id="filtersubmit" value="Search" />
            </form></div>

            <?php

            echo $after_widget;
        }

        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;

            //Strip tags from title and name to remove HTML 
            $instance['title'] = strip_tags( $new_instance['title'] );
            $instance['kwtax'] = strip_tags( $new_instance['kwtax'] );

            return $instance;
        }

        function form( $instance ) {

            //Set up some default widget settings.
            $defaults = array( 'title' => __('Equipment Search', 'agriquip'), 'kwtax' => '');
            $instance = wp_parse_args( (array) $instance, $defaults );
            ?>
            <p>
                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'agriquip'); ?></label>
                <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
            </p>

              <p>
                <select id="<?php echo $this->get_field_id('kwtax'); ?>" name="<?php echo $this->get_field_name('kwtax'); ?>" class="widefat" style="width:100%;">
                    <?php foreach(get_terms('exc_equipment_cat','parent=0&hide_empty=0') as $term) { ?>
                    <option <?php selected( $instance['kwtax'], $term->term_id ); ?> value="<?php echo $term->term_id; ?>"><?php echo $term->name; ?></option>
                    <?php } ?>      
                </select>
            </p>

    <?php
      }
    }
    ?>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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