0

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();
             }
        });
    });
});
Improve this question
3
  • 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
    Commented Nov 23, 2012 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
    Commented Nov 23, 2012 at 9:03
  • Added $('.hidden').hide(); to hide fieldset if required category was deselcted
    – HaneD
    Commented Nov 23, 2012 at 11:37

3 Answers 3

Reset to default
1

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

Improve this answer
0

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>
Improve this answer
0

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
      }
    }
    ?>
Improve this answer

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.