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)

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

Je suis sous firefox

Je vais essayer ta solution de ce pas.

Edit : et ça ne fonctionne toujours pas

Je vais regarder le debugueur je ne connaissais pas cette partie là

Edit 2 : j'ai bien mis le point d'arrêt pour le débugage du javascript mais je ne vois pas les variables... Dans le panneau variable il n'y a "aucune variable à afficher"...

Edit 3 : il ne se passe rien du tout, c'est trop bizarre... On dirait qu'il ne rentre pas dans la fonction du javascript

Edit 4 : je n'avais pas vu qu'il y avait deux classes "deletebox"... laquelle devrais-je renommer ?

Edit 5 : je les ai renommé tour à tour et il ne s'est rien passé de plus...

**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

**Bovino** · 02/03/2015, 17h23

C'est accepté en HTML5, mais pas pris en compte par CSS, du coup, c'est à éviter autant que possible (c'est-à-dire tout le temps

).

**Chen norris** · 02/03/2015, 17h33

Oups, j'avais zappé en effet. Désolé.

**Silverat** · 03/03/2015, 09h45

Merci à tous d'essayer de m'aider

@Watilin : j'ai compris maintenant, effectivement... je l'ai bien mis dans la boucle mais c'était pour récupérer l'ID de chaque message et supprimer celui-ci (en fonction de cet id et non de l'id de la div...).
Ton explication me sera très utile également sur mes autres problèmes... Je ne comprenais pas pourquoi le formulaire n'était appelé qu'une fois dans les autres cas... maintenant je sais

@SpaceFrog et @Bovino : je ne savais pas non plus, merci pour cette information je vais essayer de m'en souvenir

@Chen norris : du coup non, il n'y a pas d'ID unique pour la div .deletebox mais je récupère dans le formulaire l'id du message, qui lui est unique en fonction de sur quel message on est quand on clique "supprimer"

Comment je lui mets un id sans numérique à cette div ?

Edit : Voilà j'ai mis un id unique à la div class=deletebox :

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
 
$only_id = 0;
while ($data = mysqli_fetch_array($req))
	{ ?>
		<div class="fantome">
			<div class="deletebox" id="<?php echo $only_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
 
++only_id;
}

J'ai fait un echo de $only_id pour être sûre qu'il soit bien unique à chaque passage et c'est bien le cas

Mais aucun changement niveau javascript... le navigateur semble charger quelque chose mais rien ne se passe

Edit : et pour le debogueur ben... je ne sais pas, je mets bien le point d'arrêt, je lance, il charge et il n'y a aucune variable à afficher (non plus si je passe la souris dessus...).

Edit 2 : pendant un quart de seconde il m'a affiché "cette source est placée dans une boite noire"...

**Chen norris** · 03/03/2015, 11h28

Attention à ta variable only_id qui contient des valeurs numériques : 0, 1, 2, 3, … Comme on disait précédemment, les id ne peuvent pas être numériques exclusivement. Positionne du texte devant avec quelque chose du style :

Code html :

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

<div class="deletebox" id="deletebox<?php echo $only_id?>">

De cette manière, tu devrais générer des identifiants exploitables :

Code html :

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

1
2
3
4
5
<div class="deletebox" id="deletebox0">
<div class="deletebox" id="deletebox1">
<div class="deletebox" id="deletebox2">
<div class="deletebox" id="deletebox3">
…

Peux-tu nous poster le code de ta page générée pour s'assurer dans un premier temps que tout est bon de ce côté, s'il te plaît ?

**Silverat** · 03/03/2015, 11h56

Ouki, j'ai corrigé ça

En fait la page générée c'est celle-ci avec le while plus haut. Ça va piquer vos yeux c'est pour ça que je n'ai posté qu'un morceau

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>
<title>E-O.me</title>
 
<link rel="stylesheet" type="text/css" href="../design/questions.css" media="all"/>
<link rel="stylesheet" type="text/css" href="../design/profile.css" media="all"/>
<link rel="stylesheet" type="text/css" href="../design/index.css" media="all"/>
<link rel="stylesheet" type="text/css" href="../design/footer.css" media="all"/>
<link rel="stylesheet" type="text/css" href="../design/signup.css" media="all"/>
 
<script src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>
<?php include('../config.php'); ?>
 
<!--[if IE]>
<link rel="shortcut icon" type="image/x-icon" href="../design/images/favicon.ico" />
<![endif]-->
<link rel="shortcut icon" type="image/gif" href="../design/images/favicon.gif" />
 
<script type="text/javascript">
$(".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();
                }
        });
});
</script>
 
</head>
 
<body>
<?php
include '../menu/connected_question.php'; 
include 'set_wallpaper_not_profil.php';
?>
<div id="central" style="background:url(settings/<?php echo $row_wall[0];?>);">
	<div id="wrapper">
		<div id="container">
			<div id="headline">
			Questions
			</div>
			<?php
                        $login = $_SESSION['login'];
                        $sqlquest = "UPDATE questions SET unread='non' WHERE pagename='".$login."'";
                        $reqquest = mysqli_query($aVar, $sqlquest);
                        
                        $sql = "SELECT * FROM questions WHERE pagename='".$login."' ORDER BY dateheure DESC";
                        $req = mysqli_query($aVar, $sql);
                        
                        $only_id = 0;
                        while ($data = mysqli_fetch_array($req))
                        {
                        ?>
					<p><div class="fantome">
						<div class="deletebox" id="deletebox<?php echo $only_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 $sqlid = "SELECT id FROM questions WHERE id='".$data['id']."'";
                                        $nameid = mysqli_query($aVar, $sqlid);
                                        $id = mysqli_fetch_array($nameid);
                                        $sqldate = "SELECT dateheure FROM questions WHERE id='".$id[0]."'";
                                        $resultdate = mysqli_query($aVar, $sqldate);
                                        $rowdate = mysqli_fetch_array($resultdate);
                        ?>
			<?php include('affiche_temps.php'); ?>
			</div>
			<div id="repondre">
			<a class="repondrelink" href="questions/reply.php?question=<?php echo $data['id'];?>">R&eacute;pondre</a> <font color="gray">&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;</font> Enregistrer une r&eacute;ponse vid&eacute;o
			</div>
 
			<div id="borderquestion"></div>
</div></p>		<?php
                        ++$only_id;
                        }
                        mysqli_free_result ($req);
                        mysqli_close ($aVar);
                        ?>
		</div>
			<?php include '../footer/footer.php'; ?>
	</div>
</div>
 
</body>
</html>

Et le scripts/del.php (oui je n'ai pas corrigé encore le extract mais je vais le faire :

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
 
<?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 following";
}
?>

**Chen norris** · 03/03/2015, 12h04

Ça va piquer vos yeux

On va rester concentré sur le problème initial pour le moment

Première remarque : en fait, c'est ton code généré qu'il faudrait, pas le code d'origine. En gros, fait un rendu de ta page et copie-colle la source obtenue.
Seconde remarque : tel qu'il est écrit, ton code JS semble exécuté avant que le rendu de la page soit terminé. Aucun événement clic ne sera capturé du coup. Essaye d'encadrer ton code JS comme suit :

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
<script type="text/javascript">
jQuery.noConflict();
(function($) {
	$(document).ready(function() {
		$(".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();
				}
			});
		});
	});
})(jQuery);
</script>

**Silverat** · 03/03/2015, 12h16

Oups d'accord

Voilà le code généré :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
<head>
<title>E-O.me</title>
 
<link rel="stylesheet" type="text/css" href="../design/questions.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/profile.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/index.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/footer.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/signup.css" media="all">
 
<script src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>
 
<!--[if IE]>
<link rel="shortcut icon" type="image/x-icon" href="../design/images/favicon.ico" />
<![endif]-->
<link rel="shortcut icon" type="image/gif" href="../design/images/favicon.gif">
 
<script type="text/javascript">
jQuery.noConflict();
(function($) {
        $(document).ready(function() {
                $(".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();
                                }
                        });
                });
        });
})(jQuery);
</script>
 
</head>
 
<body>
 
 
 
<title>E-O.me</title>
 
<link rel="stylesheet" type="text/css" href="../design/index.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/footer.css" media="all">
 
 
 
 
 
<div id="topmenu">
	<div class="pagewidth">  
		<div id="sitename">
			<a href="e-o.me" class="titre">E-O<div id="me">.ME</div></a>
		</div>
 
 
 
<title>E-O.me</title>
 
<link rel="stylesheet" type="text/css" href="../design/index.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/footer.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/notifs.css" media="all">
 
 
 
 
 
<div id="notifications">
		<a class="notifmenu" href="#"></a>
		<a class="notifmenu2" href="../account/questions.php"></a> 		<a class="notifmenu3" href="#"></a>
</div>
 
		<div id="Compte2">
			<div id="deja2">
										<a class="connectedmenu" href="../account/wall.php">Accueil</a>
				<a class="connectedmenu" href="../account/questions.php"><font color="#e5d4a7">Questions (2)</font></a>
				<a class="connectedmenu" href="../account/profil.php?login=Poney">Profil</a>
				<a class="connectedmenu" href="../account/friends.php">Amis</a>
				<a class="connectedmenu" href="../account/recherche.php">Recherche</a>
				<a class="connectedmenu" href="../account/settings/profil.php">Paramètres</a>
				<a class="connectedmenu" href="../connexion/deconnexion.php"><img src="../design/images/logout1.gif" name="image" onmouseover="image.src='../design/images/logout2.gif'" onmouseout="image.src='../design/images/logout1.gif'"></a>
 
			</div>
 
		</div>
	</div>
</div>
 
 
<div id="central" style="background:url(settings/wallpapers/wall_default.png);">
	<div id="wrapper">
		<div id="container">
			<div id="headline">
			Questions
			</div>
								<p></p><div class="fantome">
						<div class="deletebox" id="deletebox0">
									<form method="post" ,="" action="#" id="form_del">
									<input name="id" value="309" type="hidden">
									<input class="deletebox" value="" type="submit">
									</form>
						</div>
			<div id="questiontotal">
			<span class="questionquestion">Ecnore un test </span> <br> 			</div>
			<div id="timequestion">
 
 
il y a moins d'une minute			</div>
			<div id="repondre">
			<a class="repondrelink" href="questions/reply.php?question=309">Répondre</a> <font color="gray">&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;</font> Enregistrer une réponse vidéo
			</div>
 
			<div id="borderquestion"></div>
</div><p></p>							<p></p><div class="fantome">
						<div class="deletebox" id="deletebox1">
									<form method="post" ,="" action="#" id="form_del">
									<input name="id" value="308" type="hidden">
									<input class="deletebox" value="" type="submit">
									</form>
						</div>
			<div id="questiontotal">
			<span class="questionquestion">Teeeeeeeeeeeeeeeeest </span> <br> 			</div>
			<div id="timequestion">
 
 
il y a moins d'une minute			</div>
			<div id="repondre">
			<a class="repondrelink" href="questions/reply.php?question=308">Répondre</a> <font color="gray">&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;</font> Enregistrer une réponse vidéo
			</div>
 
			<div id="borderquestion"></div>
</div><p></p>				</div>
 
 
 
<title>E-O.me</title>
 
<link rel="stylesheet" type="text/css" href="../design/index.css" media="all">
<link rel="stylesheet" type="text/css" href="../design/footer.css" media="all">
 
 
 
 
 
<div id="ftb-f">
	<div id="footer">
		<div id="owl-footer">
		© E-O.me 2015		</div>
	</div>
</div>
 
 
 	</div>
</div>
 
</body>

Ce qui est bizarre c'est qu'avec mon code js de départ, il était bien exécuté... Il exécutait juste mal

Pourquoi là tout à coup il ne rentre plus dans le js, c'est bizarre

**Chen norris** · 03/03/2015, 14h10

Ton code HTML généré est correct, on a bien deletebox0, deletebox1, … On avance dans la bonne direction.

Maintenant, si tu ouvres ta console javascript, en mettant un point d'arrêt sur la ligne javascript qui commence par var idSupprime = … puis en cliquant sur un lien de suppression, que se passe-t-il ? Est-ce que ça te met bien une flèche verte sous la pastille bleue ? Et si oui, dans la section de droite, quelle valeur as-tu pour la variable this ?

Sinon, j'ai aussi vu une petite erreur dans tes <form> :

Il y a une virgule à enlever (juste après "post").

Edit
Bon en fait je viens de tester ton code et il y a un problème lié à l'utilisation des formulaires : au clic, ta page se recharge entièrement. Le code Javascript met sans doute à jour le contenu de ta page sauf que comme elle est rechargée dans la foulée, tu ne vois aucun changement.
Pour résumer :

si tu travailles sans requête AJAX, il faut soumettre des formulaires et ta page est rechargée à chaque action,
si tu dynamises ta page avec des requêtes AJAX, tu devras mettre toi-même à jour le contenu de ta page, sans soumettre de formulaire.

La seconde option (qui semble être celle que tu veux mettre en place) t'impose de retirer les balises <form> (mettre par exemple des <div> à la place).
Très schématiquement, voici à quoi ta page pourrait ressembler :

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
27
28
29
30
31
32
33
34
35
 
<script type="text/javascript">
	jQuery.noConflict();
	(function($) {
		$(document).ready(function() {
			var idSupprime = $(this).parent().attr("id");
			$("button.deletebox").click(function() {
				$.ajax({
					type: "POST",
					url: "scripts/del.php",
					data: { id: idSupprime },
					success: function(data, textStatus, jqXHR) {
						if (textStatus === "OK")
							$(this).parent().fadeOut(200);
					}
				});
			});
		});
	})(jQuery);
</script>
<html>
	<div id="deletebox0">
		<button class="deletebox">Supprimer</button>
		<p>Contenu de deletebox0</p>
	</div>
	<div id="deletebox1">
		<button class="deletebox">Supprimer</button>
		<p>Contenu de deletebox1</p>
	</div>
	<div id="deletebox2">
		<button class="deletebox">Supprimer</button>
		<p>Contenu de deletebox2</p>
	</div>
	…
<html>

attention : c'est au clic sur les boutons et non plus au clic sur les <div> qu'on lance la suppression dans mon exemple.

Dernière petite remarque, mais plus globale cette fois, sur le contenu de toute page : on retrouve plusieurs fois la balise <title> ainsi que l'import des feuilles de style (<link rel="stylesheet" …). Je pense qu'il faudra faire un peu de netttoyage après si tu veux éviter les mauvaises surprises pour la présentation

**Silverat** · 04/03/2015, 12h05

Je ne m'en sors pas du tout

Qu'est-ce que je dois mettre dans le contenu de la div ? L'id du message ? J'en ai besoin pour le supprimer dans la base de donnée mais du coup le javascript ne le récupère pas...

J'essaye encore en attendant en relisant tout bien de ce que vous dites

peut-être que quelque chose m'a échappé...

Voici mon code actuel :

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
<?php
$only_id = 0;
while ($data = mysqli_fetch_array($req)){
?>
	<div class="fantome">
	        <div id="deletebox<?php echo $only_id?>">
			<button class="deletebox"></button>
			<p><?php $id = $data['id'];?></p>
		</div>
                <div id="questiontotal">
			<span class="questionquestion"><?php echo ''.$data['question'].' </span>';
		</div>
		<div id="timequestion">
?>
<?php include('affiche_temps.php'); ?>
	</div>
       </div>
<?php ++$only_id;
}

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
jQuery.noConflict();
(function($) {
	$(document).ready(function() {
		var id = $(this).parent().attr("id");
		$("button.deletebox").click(function() {
			$.ajax({
				type: "POST",
				url: "scripts/del.php",
				data: { id: id },
				success: function(data, textStatus, jqXHR) {
					if (textStatus === "OK")
						$(this).parent().fadeOut(200);
				}
			});
		});
	});
})(jQuery);

Merci beaucoup de votre patience...
Cette fois il ne recharge pas la page, il ne se passe simplement rien. Je vais regarder le debogueur.

Edit : alors le debogueur en mettant bien le point d'arrêt à "var id= etc." il me dit comme variable :
This : HTMLDocument -> question.php
arguments : Arguments
id : undefined

**Chen norris** · 04/03/2015, 14h51

OOooooOOups… Désolé, dans ma dernière réponse, j'ai inversé à tort deux lignes javascript

(les deux premières lignes)
Une fois corrigé, ton code javascript devrait ressembler à ceci (sans les "// ligne inversée" que j'ai uniquement mis pour te montrer où était le problème) :

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
jQuery.noConflict();
(function($) {
	$(document).ready(function() {
		$("button.deletebox").click(function() {	// ligne inversée
			var id = $(this).parent().attr("id");	// ligne inversée
			$.ajax({
				type: "POST",
				url: "scripts/del.php",
				data: { id: id },
				success: function(data, textStatus, jqXHR) {
					if (textStatus === "OK")
						$(this).parent().fadeOut(200);
				}
			});
		});
	});
})(jQuery);

Note : excellente idée d'avoir mis le détail des variables du déboggueur. Si jamais ton script ne marche toujours pas, n'hésite pas à les remettre, ça m'a tout de suite aiguillé sur le problème que tu rencontres.

Masquer une entrée après suppression

jQuery

Discussions similaires

Partager

Partager