Formulaire de recherche qui ne fonctionne pas avec toutes les tables

**rwlfr** · 10/01/2021, 10h29

Bonjour !

J'essaye de créer un script permettant d'afficher un formulaire de recherche qui affiche les résultats dans un tableau.

Mon script marche avec une table, mais pas avec une autre, et je ne comprends pas pourquoi.

Il y a 2 pages :

Index.php :

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
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
	<title>Extended Cards Publiées</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
 
	<div class="container-fluid">
		<div class="row mt-3">
			<div class="col">
				<h4>Extended Card Publiées</h4>
				<form class="form-inline" method="POST" id="itemFrm">
					<div class="form-group mb-2">
						<label for="itemName" class="pr-2">Chercher une Extended Card :</label>
						<input id="itemName" type="text" name="item" class="form-control" required>
					</div>
					<button type="submit" class="btn btn-primary mb-2 ml-2">Envoyer</button>
					<button type="button" class="btn btn-primary mb-2 ml-2" id="clearBtn">Nettoyer</button>
 
					<div id="loader" class="ml-2 d-none"><img src="loader.gif"></div>
				</form>
			</div>
		</div>
		<div id="showAjaxResults"></div>
 
	</div>
 
 
 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 
		<script>
                                $(document).ready(function(){
                                        $("#itemFrm").submit(function(e){
                                                e.preventDefault();
                                                var getName= $("#itemName").val();
 
                                                $("#loader").removeClass('d-none');
                                                $.ajax({
                                                        dataType:'json',
                                                        type: 'POST',
                                                        data: {item:getName},
                                                        url: 'get-data.php',
                                                        success:function(response){
 
                                                                $("#loader").addClass('d-none');
 
                                                                if(response.length > 0)
                                                                {
                                                                        var displayTable = htmlTable(response);
 
                                                                        $("#showAjaxResults").html(displayTable);
                                                                }
                                                                else
                                                                {
                                                                        $("#showAjaxResults").html("Aucune Extended Card trouvée");
                                                                }
                                                        }
                                                });
                                        });
 
 
                        $("#clearBtn").click(function(){
                                $("#showAjaxResults").html('');
                        });
                });
 
                function htmlTable(data)
                {
                        if(Array.isArray(data))
                        {
                                html = data.length+' extended cards trouvées';
                                html += '<table class="table table-bordered">';
                                html += "<tr>";
                                html += "<th>Titre</th>";
                                html += "<th>Slug</th>";
                                html += "</tr>";
 
                                for(i=0;i<=data.length-1;i++)
                                {
                                        html += "<tr>";
                                        html += "<td>"+data[i]['title']+"</td>";
                                        html += "<td>"+data[i]['slug']+"</td>";
                                        html += "</tr>";
                                }
 
                                html += '</table>';
 
                                return html;
                        }
 
                        return false;
                }
        </script>
 
</body>
</html>

La 2ème page est :

get-data.php : (je masque évidemment les éléments de connexion) :

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
25
26
<?php
 
if(isset($_POST['item']) && !empty($_POST['item']))
{
	//Database Connection
	try{
		$conn = new PDO('mysql:host=***;dbname=***','***','***');
	}
		catch(PDOException $e){
		echo "Connection failed:".$e->getMessage();
	}
 
	$search = trim($_POST['item']);
 
	$sql = 'SELECT * FROM extended_cards WHERE slug LIKE :item';
	$handle = $conn->prepare($sql);
	$params = ['item' => "%".$search."%"];
	$handle->execute($params);
 
	echo json_encode($handle->fetchAll(PDO::FETCH_ASSOC));
	exit();
}
 
echo "[]";
 
?>

-Quand dans le code, je mets : "FROM cards", cela fonctionne ! Ma page affiche bien un résultat
-Si en revanche, je mets : "FROM extended_cards" , cela ne fonctionne pas.

Et pourtant :
-les 2 tables ont bien des colonnes title et slug toutes les 2
-je me suis demandé également si ça venait de l'underscore dans le nom de ma table, mais même en renommant ma table, ça ne change rien.

Avez-vous une idée de ce qui ne va pas ?

**Soundboy39** · 10/01/2021, 11h04

Bonjour,

Est-il possible d'avoir plus de détail sur le "cela ne fonctionne pas" ?

est-ce que la requête ne retourne aucun résultat ?
est-ce que les résultats sont bien récupérés mais pas chargés dans le tableau (ou mal chargé) ?
y a t'il un message d'erreur côté PHP et/ou Javascript (voir dans la console) ?

merci d'avance,

**rwlfr** · 10/01/2021, 11h15

Cela retourne aucun résultat, et les résultats ne sont pas récupérés dans la console.

J'ai regardé dans la console :
-pas d'erreur dans la console
-dans l'onglet Réseau, côté Requête, j'ai juste item=HTML (j'avais saisi le mot HTML)

Et rien d'autre.

Mais j'ai remarqué un truc :
-si je cherche un terme qui n'existe pas dans la table, il me donne : "Aucune Extended Card trouvée" (c'est la phrase que j'ai mise dans le code)
-si je cherche un terme présent dans la table, le GIF de loading tourne en boucle et n'aboutit jamais.

**mathieu** · 10/01/2021, 11h20

dans l'onglet réseau, vous pouvez regardez la réponse de l'appel AJAX dans la partie de droite.

**Toufik83** · 10/01/2021, 11h20

Bonjour,

Puisque tu utilises PDO, laisse le trouver les erreurs/les avertissements en ajoutant l'option PDO::ATTR_ERRMODE et ajoutes le calllback error d'ajax aussi...

**Soundboy39** · 10/01/2021, 11h30

OK,

En plus des suggestions postées dans les 2 commentaires précédents, j'ajouterais :
- passer la requête directement via un éditeur SQL (celui de PhpMyAdmin par exemple...) et voir ce que ça donne;
- vérifier les paramètres du champ "extended_cards.slug" (type de donnée, encodage, etc), faire effectivement une comparaison avec ceux du champ "cards.slug" puisque ça fonctionne;

**rwlfr** · 10/01/2021, 12h10

Alors j'ai ajouté un callback error dans l'Ajax, et j'obtiens désormais ça en console :

SyntaxError: JSON.parse: unexpected end of data at line 2 column 1 of the JSON data

**Toufik83** · 10/01/2021, 16h06

Cela dit qu'il y'a une erreur PHP quelque part..., et le message est enregistré dans responseText :

Code :

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

1
2
3
4
 
error:fonction(err){
console.log("erreur Ajax :"+err.responseText);
}

Remarque : supprimes le JSON.parse dans error, car Ajax converti automatiquement le retour en json.

**rwlfr** · 10/01/2021, 16h58

Dans le code j'ai mis ça :

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
						$.ajax({
							dataType:'json',
							type: 'POST',
							data: {item:getName},
							url: 'get-data.php',
							success:function(response)
						  {
								console.log(data);
								//$("#showAjaxResults").html(data);
 
								$("#loader").addClass('d-none');
 
								if(response.length > 0)
								{
									var displayTable = htmlTable(response);
 
									$("#showAjaxResults").html(displayTable);
								}
								else
								{
									$("#showAjaxResults").html("Aucune Extended Card trouvée");
								}
							},
							error: function(xhr, textStatus, error){
								console.log(xhr.statusText);
								console.log(textStatus);
								console.log(error.responseText);
							}
						});

Et dans la console j'obtiens :

OK
parsererror
undefined

**rwlfr** · 10/01/2021, 17h34

Merci. Mais ça ne m'avance pas plus que ça, j'ai toujours : "parsererror"

**Toufik83** · 10/01/2021, 17h43

Bonjour,

Alors je viens de tester ton code tel qu'il l'est, et il fonctionne sans souci, à moins que tu as des valeurs mal formaté dans la table mysql, parce que d'après ce que je vois le problème se situe dans fetchAll(PDO::FETCH_ASSOC) qui n'arrive pas à retourner toutes les lignes et le retour json est donc coupé.

Peux-tu nous montrer le contenu de la table ?

**rwlfr** · 10/01/2021, 18h15

Ok, voici la table :

Code SQL :

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
CREATE TABLE `extended_cards` (
  `id` int(11) NOT NULL,
  `id_category` int(11) NOT NULL,
  `id_user` int(11) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `content` text NOT NULL,
  `owner` varchar(255) NOT NULL,
  `date_native` datetime NOT NULL,
  `year_native` varchar(255) NOT NULL,
  `licence` varchar(255) NOT NULL,
  `os_supported` varchar(255) NOT NULL,
  `langage` varchar(255) NOT NULL,
  `sgbdr` varchar(255) NOT NULL,
  `number_of_users` varchar(255) NOT NULL,
  `pdm` varchar(255) NOT NULL,
  `features` text NOT NULL,
  `image` varchar(255) NOT NULL DEFAULT '900x300.png',
  `last_news` text NOT NULL,
  `links` text NOT NULL,
  `version` varchar(255) NOT NULL,
  `views` int(11) NOT NULL,
  `draft` text NOT NULL,
  `bin` text NOT NULL,
  `date_creation` datetime NOT NULL,
  `date_update` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
--
-- Déchargement des données de la table `extended_cards`
--
 
INSERT INTO `extended_cards` (`id`, `id_category`, `id_user`, `title`, `slug`, `content`, `owner`, `date_native`, `year_native`, `licence`, `os_supported`, `langage`, `sgbdr`, `number_of_users`, `pdm`, `features`, `image`, `last_news`, `links`, `version`, `views`, `draft`, `bin`, `date_creation`, `date_update`) VALUES
(1, 1, 18, 'WordPress', 'wordpress', '<p>WordPress est le CMS le plus populaire dans le monde. Il permet de cr&eacute;er des blogs, mais &eacute;galement des sites web tr&egrave;s complets, comme par exemple une boutique en ligne, gr&acirc;ce &agrave; de nombreux plugins optionnels.</p>', '', '2003-05-27 00:00:00', '', 'GNU GPL version 2', '', 'PHP', 'MySQL', '', '34.7% des sites web', 'Publications (blog)\r\nThèmes\r\nExtensions / Plugins\r\nAdministration du site', '2020-03-27-15-43-49-wordpress.png', 'La version 5.0 sortie en 2018 met en place une nouveauté essentielle : l’apparition de l\'éditeur Gutenberg. Plus moderne et intuitif, cet éditeur fonctionne par blocs de contenus. Cet éditeur est construit sur Javascript, la librairie React, et l\'API Wordpress REST.', 'Français : fr.wordpress.org\r\nAnglais : wordpress.org', '5.3.2', 95, 'no', 'no', '2020-03-27 15:40:18', '2020-04-25 16:55:26'),
(2, 1, 18, 'Joomla', 'joomla', '<p>Joomla est le 2&egrave;me CMS le plus connu au monde, apr&egrave;s WordPress. Historiquement, Joomla s\'est toujours adress&eacute; &agrave; des d&eacute;veloppeurs (en se basant sur des composants, des plugins, des modules) , tandis que son concurrent, WordPress, s\'adressait davantage au grand public &agrave; l\'origine. Au fil du temps, WordPress a fini par devenir plus consistant et plus complexe, avec la multiplication des extensions qui compl&egrave;tent l\'offre de base (la fonction blogging) de WordPress.</p>', '', '2005-09-15 00:00:00', '', 'GNU GPL', '', 'PHP', 'MySQL', '', '2.7% des sites web', 'Articles, Composants, Plugins, Modules, Thèmes, Administration du site...', '2020-03-27-16-01-44-joomla.jpg', 'Le CMS est actuellement en version 3.9 et prépare sa refonte complète pour sa version 4.0 qui sortira dans les tous prochains mois.', '', '3.9.16', 80, 'no', '', '2020-03-27 17:01:45', '2020-04-25 16:55:08');
 
--
-- Index pour la table `extended_cards`
--
ALTER TABLE `extended_cards`
  ADD PRIMARY KEY (`id`),
  ADD KEY `id_user` (`id_user`),
  ADD KEY `category` (`id_category`);
 
--

**Toufik83** · 10/01/2021, 20h39

Pas comme ça, mais sélectionne la table extended_cards dans phpmyadmin, puis cliques sur Exporter, un fichier.sql est téléchargé, tu l'attaches à la discussion comme pièce jointe.

**rwlfr** · 10/01/2021, 20h43

La voici :
extended_cards.sql

**Toufik83** · 10/01/2021, 21h13

C'est bizarre, j'ai tout fais pour reproduire l'erreur et sans succès, je reçois toujours le retour d'ajax à chaque recherche.

Je ne sais pas ce qui cloche, mais je suis sûr que le problème est relatif à fetchAll ou json_encode, et selon la documentation php ils existent des options pour json_encode() : JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE que tu peux utiliser :

Code php :

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

json_encode($handle->fetchAll(PDO::FETCH_ASSOC), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE);

Essaies de ne sélectionner que les colonnes dont tu as besoin "title" et "slug" et pas "*", car je pense que la taille de la colonne "content" pourrait être importante et probablement c'est ce qui génère l'erreur json.

N'as tu pas essayer fetch seulement avec une boucle while ?

**rwlfr** · 11/01/2021, 07h12

Merci Toufik ! Tu avais raison, c'est la colonne Content qui posait problème.
Cela marche bien désormais !

**Toufik83** · 11/01/2021, 10h39

Content que le problème est résolu, mais ça n'empêche pas d'essayer de le résoudre proprement, car si un jour tu auras besoin de sélectionner la colonne "content", le problème sera toujours là...

Je me rappel que j'ai modifié (il y'a très longtemps...) la valeur de post_max_size dans php.ini, vérifies ton php.ini et dis moi quelle est la valeur actuelle de post_max_size.

**rwlfr** · 11/01/2021, 22h22

Mon post_max_size est à 8M (j'utilise Wamp Server).

**Toufik83** · 12/01/2021, 12h57

Bonjour,

8 méga est largement suffisante, donc je ne suis pas sûr que c'est l'origine du problème, et d'habitude lorsqu'on ajoute une ligne dans une table mysql avec une requête insert, les caractères spéciaux (é,è,ç,â.....) doivent être insérés tel qu'ils sont et pas encodés comme ton cas.

As-tu testé l'insertion des caractères spéciaux, sont-ils insérés correctement ou bien encodés ?

La dernière solution est d'ajouter le charset=utf8mb4 dans le constructeur du pdo comme c'est montré dans l'exemple #3 de la documentation.

Toujours le même souci même en ajoutant le charset ?

**rwlfr** · 17/01/2021, 09h24

Bonjour Toufik,

Tu as raison : si je mets SELECT * et charset=utf8mb4 dans la connexion à la base de données, cela fonctionne !

Merci !

Formulaire de recherche qui ne fonctionne pas avec toutes les tables [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager