1

I have this simple javascript file for checking boxes in a tree view menu:

treeview.js

$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
    var
        checkbox = $(this),
        selectNestedListCheckbox = checkbox.parents("li").children("label").children("input"),
        siblingCheckboxes = checkbox.parentsUntil("ul","li").children("label").children("input");

    if(checkbox.is(":checked")) {
        return selectNestedListCheckbox.prop("checked", true);
    }
   selectNestedListCheckbox.prop("checked", false);
});

I have this as my WP template file:

template

get_header(); ?>


<?php
//create right sidebar template
kleo_switch_layout('right');
?>

<?php get_template_part('page-parts/general-title-section'); ?>

<?php get_template_part('page-parts/general-before-wrap'); ?>

<?php
if ( have_posts() ) :
    // Start the Loop.
    while ( have_posts() ) : the_post(); ?>

<!-- Begin the Treeview menu -->
<form method="get" action="<?php bloginfo('url'); ?>">
    <div class="form-group">
        <input class="form-control" type="text" name="s" value="" placeholder="Search…" maxlength="50" required="required" />
    </div>
    <p>Refine search to posts containing chosen tags:</p>
<div class="acidjs-css3-treeview">
    <ul>
        <li><input type="checkbox" id="node-0" /><label><input type="checkbox" name="tag[]" value="node-0" /><span></span></label><label for="node-0">node-0</label>
            <ul>
                <li><input type="checkbox" id="node-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0" /><span></span></label><label for="node-0-0">node-0-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-0-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0-0" /><span></span></label><label for="node-0-0-0">node-0-0-0</label></li>
                        <li><input type="checkbox" id="node-0-0-1" /><label><input type="checkbox" name="tag[]" value="node-0-0-1" /><span></span></label><label for="node-0-0-1">node-0-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><input type="checkbox" id="node-1" /><label><input type="checkbox" name="tag[]" value="node-1" /><span></span></label><label for="node-1">node-1</label>
            <ul>
                <li><input type="checkbox" id="node-1-0" /><label><input type="checkbox" name="tag[]" value="node-1-0" /><span></span></label><label for="node-1-0">node-1-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-1-0-0" /><label><input type="checkbox" name="tag[]" value="node-1-0-0" /><span></span></label><label for="node-1-0-0">node-1-0-0</label></li>
                        <li><input type="checkbox" id="node-1-0-1" /><label><input type="checkbox" name="tag[]" value="node-1-0-1" /><span></span></label><label for="node-1-0-1">node-1-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- End the Treeview menu -->
<input class="btn btn-primary" type="submit" value="Submit" />
</form>

<?php

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '-child/assets/js/treeview.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

        <?php
        /*
         * Include the post format-specific template for the content. If you want to
         * use this in a child theme, then include a file called called content-___.php
         * (where ___ is the post format) and that will be used instead.
         */
        get_template_part( 'content', 'page' );
        ?>

        <?php get_template_part( 'page-parts/posts-social-share' ); ?>

        <?php if ( sq_option( 'page_comments', 0 ) == 1 ): ?>

            <!-- Begin Comments -->
            <?php comments_template( '', true ); ?>
            <!-- End Comments -->

        <?php endif; ?>

    <?php endwhile;

endif;
?>

<?php get_template_part('page-parts/general-after-wrap'); ?>

<?php get_footer(); ?>

The idea of this template is to allow the user to do a search based on a search term, and select multiple tags to filter the results.

I have a tree view menu setup, so that if the user selects a child tag, it would automatically select all of its ancestors as well.

Here is a jFiddle of what the menu would look and function like ideally.

Problems

  1. The javascript is not executing, so the ancestors are not being checked when a child is checked.
  2. The search is not functioning properly. It returns a query string as such:

The URL would show http://example.com/?s=searchterm&tag[]=key-word1&tag[]=key-word2

This would result in the tags not being filtered. I found this particular code for searching multiple tags here. That link seems to suggest this won't work until WP 4.4 comes around. Any way of getting this working under current WP 4.3.1?

3
  • wp_enqueue_scripts fires on the wp_head action, you should move that code into your functions.php file. the action has already happened when you try to add your function to it. also, use get_stylesheet_directory_uri() for the child theme uri instead of constructing it manually with get_template_directory_uri().
    – Milo
    Nov 8 '15 at 20:58
  • @Milo - I would only need this script for this one page. Is there a way I could load only for this template? Nov 8 '15 at 21:33
  • Also, I made the changes you said (moved the wp_enqueue code into my functions.php, usde get_stylesheet_directory_uri() and javascript still not working. In the console, I get an error "TypeError: $ is not a function" Nov 8 '15 at 21:59
0

Jquery is loaded in "noconflict" mode by wordpress. To use it, you need to replace the $ sign with "jQuery".

0

After following Milo's advice, I needed to replace $ with jQuery as follows:

treeview.js

jQuery(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
    var
        checkbox = jQuery(this),
        selectNestedListCheckbox = checkbox.parents("li").children("label").children("input"),
        siblingCheckboxes = checkbox.parentsUntil("ul","li").children("label").children("input");

    if(checkbox.is(":checked")) {
        return selectNestedListCheckbox.prop("checked", true);
    }
   selectNestedListCheckbox.prop("checked", false);
});
});

I moved the enqueue code to the functions.php file as follows:

functions.php

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '-child/assets/js/treeview.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

So then my template html was reduced to this:

template

get_header(); ?>


<?php
//create right sidebar template
kleo_switch_layout('right');
?>

<?php get_template_part('page-parts/general-title-section'); ?>

<?php get_template_part('page-parts/general-before-wrap'); ?>

<?php
if ( have_posts() ) :
    // Start the Loop.
    while ( have_posts() ) : the_post(); ?>

<!-- Begin the Treeview menu -->
<form method="get" action="<?php bloginfo('url'); ?>">
    <div class="form-group">
        <input class="form-control" type="text" name="s" value="" placeholder="Search…" maxlength="50" required="required" />
    </div>
    <p>Refine search to posts containing chosen tags:</p>
<div class="acidjs-css3-treeview">
    <ul>
        <li><input type="checkbox" id="node-0" /><label><input type="checkbox" name="tag[]" value="node-0" /><span></span></label><label for="node-0">node-0</label>
            <ul>
                <li><input type="checkbox" id="node-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0" /><span></span></label><label for="node-0-0">node-0-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-0-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0-0" /><span></span></label><label for="node-0-0-0">node-0-0-0</label></li>
                        <li><input type="checkbox" id="node-0-0-1" /><label><input type="checkbox" name="tag[]" value="node-0-0-1" /><span></span></label><label for="node-0-0-1">node-0-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><input type="checkbox" id="node-1" /><label><input type="checkbox" name="tag[]" value="node-1" /><span></span></label><label for="node-1">node-1</label>
            <ul>
                <li><input type="checkbox" id="node-1-0" /><label><input type="checkbox" name="tag[]" value="node-1-0" /><span></span></label><label for="node-1-0">node-1-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-1-0-0" /><label><input type="checkbox" name="tag[]" value="node-1-0-0" /><span></span></label><label for="node-1-0-0">node-1-0-0</label></li>
                        <li><input type="checkbox" id="node-1-0-1" /><label><input type="checkbox" name="tag[]" value="node-1-0-1" /><span></span></label><label for="node-1-0-1">node-1-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- End the Treeview menu -->
<input class="btn btn-primary" type="submit" value="Submit" />
</form>

        <?php
        /*
         * Include the post format-specific template for the content. If you want to
         * use this in a child theme, then include a file called called content-___.php
         * (where ___ is the post format) and that will be used instead.
         */
        get_template_part( 'content', 'page' );
        ?>

        <?php get_template_part( 'page-parts/posts-social-share' ); ?>

        <?php if ( sq_option( 'page_comments', 0 ) == 1 ): ?>

            <!-- Begin Comments -->
            <?php comments_template( '', true ); ?>
            <!-- End Comments -->

        <?php endif; ?>

    <?php endwhile;

endif;
?>

<?php get_template_part('page-parts/general-after-wrap'); ?>

<?php get_footer(); ?>

With these modifications, now the javascript runs properly. I still need a fix for the tag search, but I will ask another question for that issue.

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.