Discussion :

[clickandgo]

Bonjour à tous,

J'ignore ce qu'il se passe mais depuis que j'ai rajouté du code avec fetch, ma requête MATCH AGAINST retourne tous les résultats concernant mes articles au lieu d'éxécuter le filtre contenu dans ArticlesRepository... Incompréhensible ... J'ai même essayé de réduire à 5 lignes de résultat dans la requête, tout est ignoré et celle-ci renvoie quand même 100 lignes... J'ai vidé le cache et vérifié toutes les variables, tout semble correct y compris le json renvoyé...

Merci d'avance

ArticlesController.php

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
20
21
22
23
24
//Rechercher un article
    #[Route('/rechercher-article', 'rechercher-article')]
    public function rechercherArticle(ArticlesRepository $articlesRepository, Request $request): Response
    {
        $form = $this->createForm(RechercherArticleType::class);
        $form->handleRequest($request);
 
        $articles = $articlesRepository->rechercherArticle($form->get('rechercher')->getData());
 
        if ($request->isXmlHttpRequest()) {
 
            return new JsonResponse([
                'content' => $this->renderView('_partials/_rechercher-article.html.twig', [
                    'articles' => $articles
                ])
            ]);
        }
 
        return $this->render('articles/rechercher-article.html.twig', [
            'form' => $form->createView(),            
            'titre' => 'Rechercher un article / prestation',
            'articles' => $articles
        ]);
    }

articlesRepository.php

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
20
21
class ArticlesRepository extends ServiceEntityRepository
{
    public function __construct(ManagerRegistry $registry)
    {
        parent::__construct($registry, Articles::class);
    }
    public function rechercherArticle($rechercher)
    {
        $query = $this->createQueryBuilder('a');
 
        if ($rechercher != null) {
            $query        
                ->andWhere('MATCH_AGAINST(a.reference,a.description) AGAINST (:rechercher boolean)>0')
                ->setParameter('rechercher','*'.$rechercher.'*')
                ->orderBy('a.reference', 'ASC')
                ;
        }
        return $query->getQuery()->getResult();
    }
 
}

rechercher-article.js

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
20
21
//Recherche d'articles par mots-clés
window.onload = () => {
  const formRecherche = document.getElementsByName("rechercher_article");
  const rechercher = document.querySelector("#rechercher_article_rechercher");
  const resultatRecherche = document.querySelector("#resultat-recherche");
 
  rechercher.addEventListener("input", () => {
    if (rechercher.value.length >= 3) {
    fetch("rechercher-article", {
      headers: {
        "X-Requested-With": "XMLHttpRequest",
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data.content);
        resultatRecherche.innerHTML = data.content;
      });
     }
  });
};

rechercher-article.html.twig

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
{% extends 'base.html.twig' %}
{% block title %}
	Saisie et recherche d'un article / prestation
{% endblock %}
{% block body %}
	<div class="wrapper-table">
		{{ form_start(form) }}
		<header>{{titre}}</header>
		{{ form_end(form) }}
		<div id="resultat-recherche">
 
		</div>
		</div>
	{% block javascripts %}
		<script src="{{asset('assets/js/rechercher-article.js')}}" type="text/javascript"></script>
 
	{% endblock %}
{% endblock %}

[Pytet]

Bonjour,

Les données de ton formulaire ne sont pas transmises en paramètres de la requête ajax, la variable formRecherche n'est d'ailleurs pas utilisée dans ton code js.

[clickandgo]

Bonjour Pytet et merci d'avoir répondu aussi précisément,

J'ai modifié le code, je vois bien le data envoyé mais je ne sais pas comment l'injecter de nouveau en tant que variable dans le controller ...
Le data est actualisé correctement à chaque frappe en tant que par exemple "rechercher_article[rechercher] aaa97095", comment faire pour que cette valeur se retrouve dans la ligne

Code :

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

$articles = $articlesRepository->rechercherArticle($form->get('rechercher')->getData());

?

J'ai essayé avec

Code :

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

 $articles = $articlesRepository->rechercherArticle("rechercher_article[rechercher].value");

mais évidement ce n'est pas la bonne méthode ...

La variable formRecherche si mise en paramètre ( const formData = new FormData(formRecherche) renseigne aussi le token du formulaire actif ce qui pour l'instant ne me semble pas utile, comment faire pour n'envoyer que la clé et valeur du champ de recherche ?

D'autre part Symfony renomme les champs à sa sauce : par exemple dans mon cas, le champ de recherche et sa valeur sont renvoyés comme "rechercher_article[rechercher] aaa97095" c'est pas bien grave mais c'est lourd !

Code javascript :

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
//Recherche d'articles par mots-clés
window.onload = () => {
  const formRecherche = document.querySelector("#formRecherche");
  const rechercher = document.querySelector("#rechercher_article_rechercher");
  const resultatRecherche = document.querySelector("#resultat-recherche");
 
  rechercher.addEventListener("input", () => {
 
    if (rechercher.value.length >= 3) {
      const formData = new FormData(formRecherche);
      // formData.append("rechercher", rechercher.value);
 
      for (item of formData) {
        console.log(item[0], item[1]);
      }
 
      fetch("rechercher-article", {
        method: "POST",
        body: formData,
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "Content-type": "application/json; charset=UTF-8",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          // console.log(data.content);
          resultatRecherche.innerHTML = data.content;
        })
        .catch((error) => alert("Erreur : " + error));
    }
  });
};

[clickandgo]

Pour ceux qui seraient intéressés :

Après des heures de rechercher et arrachage de cheveux j'ai découvert que c'est le Content-Type qui bloque tout,si je le retire tout fonctionne à merveille...

Du coup quelqu'un sait il quel content-type utiliser avec su formData + UTF-8 ?

Merci

[Pytet]

Les données que tu envoies au serveur via FormData ne sont pas au format json donc l'entête Content-Type: application/json n'est effectivement pas adaptée (attention à ne pas confondre les entêtes de la requête http avec celles de la réponse http).

Par défaut, FormData va être envoyé avec l'entête Content-Type: multipart/form-data.
https://fr.javascript.info/formdata

Sauf contrainte, le plus simple est de ne pas définir cette entête dans ton code et laisser le navigateur la définir lui-même, c'est d'ailleurs recommandé par la doc mdn si ton formulaire est utilisé pour un upload de fichier (cf. le paragraphe Warning sous "Sending files using a FormData object")
https://developer.mozilla.org/en-US/...ormdata_object

[clickandgo]

Merci beaucoup Pytet pour cette réponse claire et concise