web-dev-qa-db-fra.com

Vous recherchez plusieurs tags et ajoutez un script dépendant de jQuery sur un modèle de page?

J'ai ce simple fichier javascript pour cocher des cases dans un menu en arborescence:

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);
});

J'ai ceci en tant que mon fichier de modèle WP:

modèle

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(); ?>

L'idée de ce modèle est de permettre à l'utilisateur de faire une recherche basée sur un terme de recherche et de sélectionner plusieurs tags pour filtrer les résultats.

J'ai une configuration de menu en arborescence, de sorte que si l'utilisateur sélectionne une balise enfant, il sélectionnera automatiquement tous ses ancêtres.

Voici un jFiddle de ce à quoi le menu ressemblerait et fonctionnerait idéalement.

Problèmes

  1. Le javascript n'étant pas en cours d'exécution, les ancêtres ne sont pas vérifiés lorsqu'un enfant est vérifié.
  2. La recherche ne fonctionne pas correctement. Il retourne une chaîne de requête en tant que telle:

L'URL indiquerait http://example.com/?s=searchterm&tag [] = key-Word1 & tag [] = key-Word2

Cela aurait pour conséquence que les balises ne seraient pas filtrées. J'ai trouvé ce code particulier pour la recherche de plusieurs balises ici. Ce lien semble indiquer que cela ne fonctionnera pas tant que WP 4.4 sera disponible . Un moyen de faire fonctionner cela sous WP 4.3.1?

jquerytemplatesjavascripttagswp-enqueue-script
1
David Avellan

JQuery est chargé en mode "non-conflit" par wordpress. Pour l'utiliser, vous devez remplacer le signe $ par "jQuery".

0
kuchenundkakao

Après avoir suivi les conseils de Milo, je devais remplacer $ par jQuery comme suit:

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);
});
});

J'ai déplacé le code de mise en file d'attente dans le fichier functions.php comme suit:

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' );

Alors, mon template HTML a été réduit à ceci:

modèle

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(); ?>

Avec ces modifications, le javascript fonctionne maintenant correctement. J'ai toujours besoin d'un correctif pour la recherche de balises, mais je vais poser une autre question à ce sujet.

0
David Avellan