Masquer une entrée après suppression

**Silverat** · 27/02/2015, 16h15

Bonjour

Je viens vous appeler à l'aide car je débute (je débute carrément même

) en Ajax et je ne parviens pas à effacer une entrée de la base de donnée, tout bêtement oui, sans animation ni rien, juste l'effacer.
Elle est bien supprimer de la bdd mais si on ne réactualise pas la page on ne voit pas immédiatement que l'entrée n'existe plus.

Voici le code html :

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
 
while ($data = mysqli_fetch_array($req))
	{ ?>
		<div class="fantome">
			<div class="deletebox">
				<form method="post", action="#" id="form_del">
					<input type="hidden" name="id" value="<?php echo $data['id']?>">
					<input type="submit" class="deletebox" value=""/>
					</form>
						</div>
			<div id="questiontotal">
			<span class="questionquestion"><?php echo ''.$data['question'].' </span>';
                        </div>
                        <div id="timequestion">
                        ?>
			<?php include('affiche_temps.php'); ?>
			</div>
</div><?php
                        
}

Chaque entrée possède un bouton supprimer (le formulaire ci-dessus). Et chaque entrée est contenue dans la div "fantome"... mais comment masquer cette div pour l'entrée pour laquelle on a cliqué supprimer mais pas les autres ?

Voici le script :

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
 
<script type="text/javascript">
$(function() {
	$("#form_del").submit(function(){
		id = $(this).find("input[name=id]").val();
		$.post("scripts/del.php", {id: id}, function(data) {
			if(data != "ok")
			{
				$(".error").empty().append(data);
			}
			else
			{
 
			}
		});
		return false;
	});
});
</script>

Il faudrait quelque chose dans le else mais quoi... j'ai essayé plein de chose et rien ne marche

Voici del.php qui est appelé dans le javascript pour traité les données envoyées par post :

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
<?php
include('../../config.php');
 
extract($_POST);
if(isset($id) && !empty($id))
{
$sql_del = "DELETE FROM questions WHERE id='".$id."'";
$req_del = mysqli_query($aVar, $sql_del);
 
echo "ok";
}
else
{
	echo "error deleting";
}
?>

Je vous remercie beaucoup par avance de vous pencher sur mon problème...

**Watilin** · 27/02/2015, 22h05

Salut,

je te conseille de regarder dans ton navigateur le code HTML généré (Ctrl+U) et d'y faire une recherche avec id="form_del".

Quand tu auras réglé ce problème de doublons, n'oublie pas que tu peux utiliser $(this) dans un gestionnaire d'évènement pour récupérer l'élément sur lequel l'évènement a été intercepté. Tu pourrais aussi avoir besoin de .closest().

**Silverat** · 02/03/2015, 10h23

Je n'ai pas compris pour le doublon... je ne vois rien

Je ne m'en sors toujours pas...

J'ai changé mon code javascript en suivant plein de tuto mais rien n'y fait... il ne supprime plus rien dans la base de données d'ailleurs.

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
<script type="text/javascript">
$(function() {
//supprimer les messages
	$(".deletebox").click(function(){
	var element = $(this);
	var I = element.attr("id");
	var info = 'id=' + I;
	$.ajax({
	type: "POST",
	url: "scripts/del.php",
	data: info,
	success: function(){
	$('#remove'+I).fadeOut(200).hide();
	}
	});
	return false;
	});
</script>

J'aurais bien aimé partir du code de départ que j'avais mis qui me semblait bien plus clair... mais je n'arrive pas à mettre quoi que ce soit entre les balises "else"...

Le html/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
while ($data = mysqli_fetch_array($req)){ ?>
          $msg_id = $data['id'];
		<div class="fantome">
			<div class="deletebox"  id="'.$msg_id.'">
				<form method="post", action="#" id="form_del">
					<input type="hidden" name="id" value="<?php echo $data['id']?>">
					<input type="submit" class="deletebox" value=""/>
					</form>
						</div>
			<div id="questiontotal">
			<span class="questionquestion"><?php echo ''.$data['question'].' </span>';
                        </div>
                        <div id="timequestion">
                        ?>
			<?php include('affiche_temps.php'); ?>
			</div>
</div><?php 
}

Je craque

**Chen norris** · 02/03/2015, 10h43

Pour résumer très sommairement la structure de ta page, voici comment je procèderais :

observer tout clic sur le bouton de suppression d'une ligne
appel à la méthode ajax pour lancer cette suppression en BDD
attendre la réponse ajax
si réponse positive (vérifier que la réponse = "OK"), suppression de l'objet DOM

Ta requête ajax devrait donc selon moi ressembler à ceci :

Code :

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

1
2
3
4
5
6
7
8
9
$.ajax({
	type: "POST",
	url: "scripts/del.php",
	data: info,
	success: function(data, textStatus, jqXHR) {
		if (textStatus === "OK")
			$(I).fadeOut(200).hide();
	}
});

EDIT : dans ta requête AJAX, la variable info n'étant pas nommée, je ne suis pas sûr que côté PHP tu t'y retrouves. Pour compléter ma réponse, voici comment je verrais l'intégralité du code JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(".deletebox").click(function() {
	var idSupprime = $(this).attr("id");
	$.ajax({
		type: "POST",
		url: "scripts/del.php",
		data: { id: idSupprime },
		success: function(data, textStatus, jqXHR) {
			if (textStatus === "OK")
				$(idSupprime).fadeOut(200).hide();
		}
	});
});

Côté PHP, quelque chose que je fais (uniquement pendant la phase de dévloppement, à retirer une fois que ça marche) est d'ajouter une ligne de log comme ceci :

Code :

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

echo "<!-- ID = $id -->";

Ce n'est vraiment pas propre je te l'accorde mais ça permet de faire du debug pour s'assurer que côté serveur tu récupères bien la bonne valeur pour ta variable $id.

**Silverat** · 02/03/2015, 11h19

Merci beaucoup de te pencher sur mon problème

Malheureusement ça ne fonctionne pas... J'ai bien rajouter le echo dans le php mais il ne se passe rien...

J'ai mis le "OK" de textstatus en minuscule et ça ne fonctionne pas mieux... J'ai aussi remis le html comme il était avant (c'est à dire sans la variable msg_id).

Je dois me tromper quelque part... Le echo ID doit bien se trouver dans le scripts/del.php ? Qu'est-ce que c'est le jqXHR dans la fonction success ?

EDIT : est-ce que ce n'est pas parce que le .deletebox renvoie à un input au lieu d'une classe d'un lien, par exemple ?

**Chen norris** · 02/03/2015, 11h42

Exact !! J'avais bien vu qu'il y avait plusieurs éléments ayant pour classe deletebox mais ça ne me choquait pas outre mesure. Par contre, je confirme que si tu cliques sur ton input, il ne récupère aucun id vu qu'il n'y a pas d'id à ton input. Deux solutions :

Observe un clic sur ton formulaire uniquement
Détecte sur quel deletebox tu as cliqué pour récupérer correctement l'id

Solution 1 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$("div.deletebox").click(function() {
	var idSupprime = $(this).attr("id");
	$.ajax({
		type: "POST",
		url: "scripts/del.php",
		data: { id: idSupprime },
		success: function(data, textStatus, jqXHR) {
			if (textStatus === "OK")
				$("#" + idSupprime).fadeOut(200).hide();
		}
	});
});

Solution 2 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(".deletebox").click(function() {
	var idSupprime = $(this).is("div") ? $(this).attr("id") : $(this).parent().parent().attr("id");
	$.ajax({
		type: "POST",
		url: "scripts/del.php",
		data: { id: idSupprime },
		success: function(data, textStatus, jqXHR) {
			if (textStatus === "OK")
				$("#" + idSupprime).fadeOut(200).hide();
		}
	});
});

Côté réponse de ta requête AJAX, sous quel navigateur travailles-tu ? (pour t'indiquer comment débugger facilement ta requête AJAX)
Par exemple sous Firefox :

F12 ou alors bouton "Ouvrir le menu" » Développement » Outils de développements
Ouvrir l'onglet Débogueur
Dans la colonne à gauche Sources, cliquer sur ton fichier js
Aller à la ligne [i]success: function(data, textStatus, jqXHR) {[i]
Mettre un point d'arrêt juste après cette ligne (en cliquant sur le numéro de ligne à gauche)
Lancer une suppression : le script va s'arrêter sur ton point d'arrêt
Survoler les variables data, textStatus et jqXHR pour voir leur contenu

Après, je détaille la procédure de debug javascript mais peut-être que tu connaissais déjà (désolé si c'est le cas).

EDIT : attention, j'ai modifié la manière de retirer les éléments DOM en mettant $("#" + idSupprime) au lieu de $(idSupprime)

**Watilin** · 02/03/2015, 16h00

J'explique mon histoire de doublons, même si entre temps Chen Norris a proposé une solution au problème en utilisant par les classes

Envoyé par Silverat

Le html/php :

Code html :

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

1
2
3
4
5
6
7
while ($data = mysqli_fetch_array($req)){ ?>
          ...
		...
			...
				<form method="post", action="#" id="form_del">
...
}

Nous avons ici un while, et dans ce while un <form> avec un id. Or un id doit être unique dans une page. Conséquence : tout appel à $("#form_del") n'aura d'effet que sur le premier formulaire. Comme dans cet exemple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ton père en sandales</title>
</head>
<body>
 
<p id="machin">Bla bla bla.</p>
<p id="machin">Bla bla bla.</p>
<p id="machin">Bla bla bla.</p>
 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
 
$("#machin").css({ backgroundColor: "red" });
 
</script>
</body>
</html>

Dans cet exemple, seul le premier <p> est coloré en rouge.

**Chen norris** · 02/03/2015, 16h59

Bien vu, Watilin : je n'avais pas tilté ces problèmes potentiels de doublons. Silverat, côté page web pure, est-ce qu'on a bien un id différent pour chaque div class="deletebox" ?
Exemple :

Code :

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

1
2
3
4
5
 
<div class="deletebox"  id="1">
<div class="deletebox"  id="2">
<div class="deletebox"  id="3">
...

Ensuite, pour voir si le code javascript est bien lancé, en mettant un point d'arrêt dans la fonction qui capture l'événement click, il faudrait regarder si le navigateur passe dessus :

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
 
$(".deletebox").click(function() {
	// mettre un point d'arrêt ici
	var idSupprime = $(this).is("div") ? $(this).attr("id") : $(this).parent().parent().attr("id");
	$.ajax({
		type: "POST",
		url: "scripts/del.php",
		data: { id: idSupprime },
		success: function(data, textStatus, jqXHR) {
			// et éventuellement un autre ici pour voir si le serveur répond
			if (textStatus === "OK")
				$("#" + idSupprime).fadeOut(200).hide();
		}
	});
});

Petite apartée sur la console Javascript : tu peux visionner directement le contenu des variables dans le code source (partie centrale) en laissant ton curseur dessus. Mais il faut que le code Javascript soit en train de s'exécuter et soit en pause, à un point d'arrêt. Le fait d'avoir "aucune variable à afficher" me laisse croire que ton code Javascript n'était pas en train de s'exécuter au moment où tu regardais.

**SpaceFrog** · 02/03/2015, 17h13

Code :

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

1
2
3
<div class="deletebox"  id="1">
<div class="deletebox"  id="2">
<div class="deletebox"  id="3">

Je ne sais pas si c'est toujours d'actualité, mais il fut une époque ou les id uniquement numérique ou commençant par du numérique étaient déconseillés

Masquer une entrée après suppression

jQuery

Vue hybride

Discussions similaires

Partager

Partager