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.

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

PHP & Base de données

Vue hybride

Discussions similaires

Partager

Partager