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
- The javascript is not executing, so the ancestors are not being checked when a child is checked.
- 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?
wp_enqueue_scriptsfires on thewp_headaction, you should move that code into yourfunctions.phpfile. the action has already happened when you try to add your function to it. also, useget_stylesheet_directory_uri()for the child theme uri instead of constructing it manually withget_template_directory_uri().