Discussion :

[Hippocrène]

Bonjour,

J’ai une fonction PHP qui récupère une liste de fichiers contenues dans un serveur et ma question se situe au niveau du bouton de suppression du fichier.
J’utilise JavaScript pour faire un appel AJAX et envoyer l’ID et le nom du fichier.

Code PHP :

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
<?php
// Connexion à la base de données…
$result = $bdd->query('SELECT id, fileName, fileSize FROM table WHERE userId="'.$userId.'"');
 
	while($data = $result->fetch()){
 
?>
 
	<tr>
		<td id="file_name">
			<?php echo $data['fileName']; ?>
		</td>
		<td>
			<?php echo $data['fileSize']; ?>
		</td>
		<td id="file_delete">
			<button type="button" onclick="deleteCurrentFile(<?php echo json_encode($data['id']); ?>, <?php echo json_encode($data['fileName']); ?>)" > Supprimer </button>
		</td>
	</tr>
 
<?php
	}
 
	$result->closeCursor();
?>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Fonction appelant le code de suppression du fichier
function deleteCurrentFile(id, fileName) {
	$.post( "deletefile.php", { id : id, fileName : fileName } )
		.done( function() {
			alert("Suppression effectuée.");
		})
		.fail( function() {
			alert("Une erreur est survenue lors de la suppression du fichier.");
		})
		.always( function() {
			alert("Fin de l'opération.");
		});
}

Ici, j’utilise un onclick dans une balise HTML. Je pense que ce n’est pas une bonne solution, mais c’est la seule que j’ai trouvé pour passer le bon argument (le bon fichier à supprimer) à la fonction JavaScript. D’ailleurs, la structure de mon code JavaScript n’est pas assez propre et je ne sais même pas si elle est correcte puisque le sript plante, mais je n’ai encore compris où.
J’ai vu (FAQ) que je pourrais créer le tableau listant les fichiers en JavaScript, mais je voudrais garder l’utilisation du PHP car il me semble qu’elle propose plus de sécurité.

[NoSmoking]

Bonjour,
la première chose à faire est de regarder le code HTML généré, CTR +U, ensuite regarde dans la console les erreurs qu'il peut y avoir, F12.

[Hippocrène]

Bonjour,

Ma question est plus : comment récupérer le bon fichier, par le lien généré en PHP, avec JavaScript et grâce à la méthode onclick (mais pas le onclick d’une balise HTML)

Pour ce qui est de mon erreur, pour l’instant, ce n’est pas très important, puisque j’aimerais ne pas conserver cette façon de faire ;*ça ne vaut pas forcément de résoudre ce problème.

Merci

[Watilin]

Tu devrais suivre les conseils de NoSmoking, il te les prodigue pour une bonne raison : en examinant le code généré, tu vois à quoi ressemble réellement ton attribut onclick ; et en ouvrant la console JavaScript, tu vois les messages d’erreur. NoSmoking a dû deviner qu’il y avait des erreurs de syntaxe JS.

J’ai une question : pourquoi json_encode ? Il me semble que ce qui sort de ta BDD ce sont des types primitifs (int et string). Tu n’as pas d’objet à sérialiser, donc pas besoin de json_encode a priori. Ou alors je fais une mauvaise supposition sur le type de tes données. Ne voulais-tu pas plutôt utiliser htmlspecialchars ?

Puisque tu as l’air d’envisager une solution plus « propre », je te propose d’utiliser addEventListener. Cela dit, tu dois toujours relier les données à tes balises HTML. Pour ça je te propose d’utiliser des attributs data-. Quelle différence ça fait par rapport à un attribut onclick ?

D’abord, tu factorises le code JS : une seule fonction te permet de gérer toutes les lignes de ton tableau. En prime, ça te permet de servir le code JS dans un fichier statique séparé du HTML et donc profiter de la mise en cache.

Ensuite, tu supprimes un niveau d’interprétation. Dans la situation actuelle, tu as ton script PHP qui génère du code qui sera d’abord interprété comme du code HTML (un attribut), puis interprété une seconde fois comme du code JS (onclick). Ça augmente le risque d’avoir des problèmes avec les délimiteurs (guillemets, etc.) et les séquences d’échappement. En mettant tes données dans des attributs data-, elles seront seulement interprétées comme du code HTML ; le DOM se chargera ensuite de les fournir à ton script JS sous forme de chaînes.

J’ai une dernière remarque à propos de ta requête SQL. Je ne sais pas si tu as sécurisé ta variable $userId, mais tu pourrais utiliser une requête préparée. Ça te demandera juste une ou deux lignes de code en plus, et ça te permettra de prévenir des erreurs futures. C’est une bonne habitude à prendre

[Hippocrène]

Merci pour ces réponses
J’ai affiché le code source et il y avait effectivement des erreurs (entres-autres des guillemets manquants).

Je vais me renseigner sur addEventListener et les attributs data- et voir si c’est ce que je recherche