Discussion :

[d3LTa7]

Bonjour !
Suite à un projet en WP je souhaite créer un formulaire pour filtrer mes éléments de ma pages qui sont classé automatiquement par wordpress !
J'ai déjà eu l’occasion de créer des requêtes AJAX vers des API, et donc avec certaine URL et le JSON ça facilite pas mal la requête mais faire une requête avec des éléments d'une même page, j'avoue que je bloque un peu
Donc j'ai un peu avancé de mon côté, voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php get_header(); ?>
 
<main class="tool_main js_filter">
    <?php 
        if(have_posts()){
            while(have_posts()){
                the_post();
                the_title('<h1>','</h1>');
                the_excerpt();
                $linkfolder = get_field('link_folder');
                if($linkfolder){?>
                    <form class="tool_filter" action="">
                        <ul class="tool_filter_list">
                            <p>Filtres</p>
                            <li class="tool_filter_input">
                                <input type="text" placeholder="rechercher">
                            </li>
                            <p>Tags</p>
                            <li class="tool_filter_checkbox">
                                <ul>
                                    <li>
                                        <input type="checkbox">
                                        <label>Hygiène des mains</label>
                                    </li>
                                    <li>
                                        <input type="checkbox">
                                        <label>Formation</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Dispositifs intra-vasculaires</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Précaution complémentaire</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Prévention du risque infectieux</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Préparation de l'opéré</label>
                                    </li>
                                </ul>
                            </li>
                            <p>Période</p>
                            <li class="tool_filter_date">
                                <input type="date" value="">
                                <input type="date" value="">
                            </li>
                            <p>Classement</p>
                            <li class="tool_filter_order">
                                <input type="button" value="A -> Z">
                                <input type="button" value="Récent">
                            </li>
                            <li class="tool_filter_submit">
                                <input type="submit" value="Chercher" id="valider">
                            </li>
                        </ul>
                    </form>
                    <ul class="tool_list">
                    <?php foreach($linkfolder as $link):
                        $name = get_the_title($link->ID);
                        $folder = get_field ('doc',$link->ID);
                        $date = get_the_date('', $link->ID);
                        $xcerpt = get_the_excerpt($link->ID);
                        $illustration = get_field ('illustration', $link->ID); ?>
                        <li class="tool_object">
                            <?php if($folder):?>
                            <a href="<?php echo $folder['url']; ?>">
                                <p><?php echo $name; ?></p>
                                <p id="date"><?php echo $date; ?></p>
                                <?php
                                if ($illustration){
                                    echo wp_get_attachment_image($illustration,'article');
                                }
                                ?>
                                <p><?php echo $xcerpt; ?></p>
                            </a>
                            <?php endif; ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                <?php }
            };
        };
    ?>
</main>
 
<?php get_footer(); ?>

Vu du back office


Vu client


Donc ici on a 2 grande partie, La partie formulaire pour pouvoir trier les éléments et la partie contenu ou s'affichent avec le système de boucle de WP les différents éléments

Voici la partie JS avec la requête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const linq = 'http://localhost:3333/out/diaporama/';
const valide = document.getElementById('valider');
 
valide.addEventListener('click', (ev) => {
    ev.preventDefault();
    getData(linq)
})
 
function getData(link){
    const request = new XMLHttpRequest();
    request.open("GET",link,true);
    request.addEventListener('readystatechange',()=>{
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            console.log('good')
            console.log(request.responseText)
        }
    });
    request.send()
}

Pour le moment ça marche ! J'ai bien "good" dans ma console, mais c'est la ou ca se complique... Comment faire, par exemple, pour récupérer tout les éléments et les trier de A à Z en fonction de leur titre, ou comment les classer du plus récent au plus ancien, ou encore n'afficher que ceux d'une certaine taxonomie (avec les checkbox) etc etc ! Je bloque un peu à ce moment là :/

N'étant pas familiarisé avec JQuery j'aimerais éviter le plus possible merci

Merci d'avance pour vos lumières