Searching multiple tags and adding jQuery dependant script onto page template?

Question

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?

Answer 1

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

Answer 2

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.