Discussion :

[Silverat]

Ce n'est pas grave, je ne m'en étais pas rendu compte non plus

Ça ne marche toujours pas... Je pense que c'est parce qu'il ne récupère pas l'id du message (et non celui de la div)...

Le debogueur dit :

This : <button.deletebox>
argument : Arguments
id : undefined

Je ne sais pas ce que je dois mettre entre les <p></p> pour l'instant j'ai mis ça :

Code html :

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

1
2
3
4
5
 
<div id="deletebox<?php echo $only_id?>">
	<button class="deletebox"></button>
	<p><?php $id = $data['id'];?></p>
</div>

$data['id'] étant l'id du message (dont j'ai besoin pour supprimer le dit message) et $only_id l'id de la div

[Chen norris]

Ton code PHP me semble correct (les balises <p></p> ne te servent qu'à mettre le texte que tu veux, seul le bouton étant utilisé pour supprimer un deletebox).
D'après ta console JS de debug :

• this semble avoir une valeur correcte à savoir le bouton deletebox sur lequel tu as cliqué.
• $(this).parent() devrait donc normalement pointer sur le <div> parent à savoir ton <div id="deletebox#"> (# = 0, 1, 2, …) : peux-tu le vérifier ? (clic sur "ajouter une expression espionne", mettre "$(this).parent()" puis "entrée" pour valider.
• Si tout est OK jusque là, profites-en aussi pour vérifier $(this).parent().attr("id") (même manip : copier/coller dans "ajouter une expression espionne")

Dans l'onglet "console" (et non plus l'onglet "débogueur"), est-ce que tu vois des messages d'erreur ?

[Silverat]

Alors...

$(this).parent() -> Object
En cliquant dessus on a :
0 : <div#deletebox0>
context : <button.deletebox>
prevObject -> Object
selector : ".parent()"

Jusque là ça me semble correct.

$(this).parent().attr("id") -> "deletebox0"

Et dans la console il n'y a rien du tout...

J'ai l'impression que c'est comme si on essayait de lui dire de cacher le bouton deletebox au lieu de cacher tout le contenu du message. Mais je ne comprends pas bien le javascript encore...

[Chen norris]

Dans le Javascript, j'essayais de cacher le parent du bouton deletebox (donc bien le <div> qui le contient) :

Code :

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

$(this).parent().fadeOut(200);

$(this) = le bouton, $(this).parent() = le <div> qui contient le bouton


Mais finalement, on va aller au plus simple, on va se baser sur l'id. En terme d'exécution, c'est même mieux car plus rapide. Change la ligne :

Code :

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

$(this).parent().fadeOut(200);

en

Code :

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

$("#" + id).fadeOut(200);

Je te rassure, on y presque ^^

[Silverat]

Alors j'ai re-transformé ma div de départ en ça :

Code html :

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

1
2
3
4
 
	<div id="<?php echo $data['id']?>">
		<button class="deletebox"></button>
	</div>

En enlevant l'id : deletebox_xx et en le remplaçant par l'id du message.
Et le message se supprime ! Mais ce n'est pas en "temps réel", le message ne se cache toujours pas je le vois quand je rafraichis la page...

Mon code html en entier :

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
 
			<?php
                        $login = $_SESSION['login'];
                        
                        $sql = "SELECT * FROM questions WHERE pagename='".$login."' ORDER BY dateheure DESC";
                        $req = mysqli_query($aVar, $sql);
                        
                        while ($data = mysqli_fetch_array($req))
                        {
                        ?>
			<div class="fantome">
				<div id="<?php echo $data['id']?>">
			             <button class="deletebox"></button>
				   </div>
			       <div id="questiontotal">
			         <span class="questionquestion"><?php echo ''.$data['question'].' </span>';
                                   ?>
			        </div>
			        <div id="timequestion">
			           ?><?php include('affiche_temps.php'); ?>
			        </div>
			        <div id="repondre"></div>
			       <div id="borderquestion"></div>
                          </div>	<?php
                        }
                        mysqli_free_result ($req);
                        mysqli_close ($aVar);
                ?>

En fait, c'est la div class="fantome" qu'il faudrait cacher. C'est elle qui contient tout le message

J'ai modifié le javascript comme suit :

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

Et là ça supprime tous les messages... normal je suppose vu que la classe fantôme n'a pas d'id particulier...

Du coup j'ai essayé ç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
 
<script type="text/javascript">
jQuery.noConflict();
(function($) {
	$(document).ready(function() {
		$("button.deletebox").click(function() {
			var id = $(this).parent().attr("id");
			$.ajax({
				type: "POST",
				url: "scripts/del.php",
				data: { id: id },
				success: function(data, textStatus, jqXHR) {
				if(data != "ok")
					{
						$(".error").empty().append(data);
					}
				else
					{
						$(".fantome" + id).fadeOut(200);
					}
				}
			});
		});
	});
})(jQuery);
</script>

Et modifier le html en rajoutant l'id du message à la classe "fantome" comme ça :

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
 
			<?php
                        $login = $_SESSION['login'];
                        
                        $sql = "SELECT * FROM questions WHERE pagename='".$login."' ORDER BY dateheure DESC";
                        $req = mysqli_query($aVar, $sql);
                        
                        while ($data = mysqli_fetch_array($req))
                        {
                        ?>
			<div class="fantome" id="<?php echo $data['id']?>">
				<div id="<?php echo $data['id']?>">
			             <button class="deletebox"></button>
				   </div>
			       <div id="questiontotal">
			         <span class="questionquestion"><?php echo ''.$data['question'].' </span>';
                                   ?>
			        </div>
			        <div id="timequestion">
			           ?><?php include('affiche_temps.php'); ?>
			        </div>
			        <div id="repondre"></div>
			       <div id="borderquestion"></div>
                          </div>	<?php
                        }
                        mysqli_free_result ($req);
                        mysqli_close ($aVar);
                ?>

Et ça ne fait plus rien enfin si ça supprime dans la base de donnée, mais ça ne cache pas le message concerné...

EDIT ULTIME :


ÇA Y EST ça marche ! J'ai mis :

Code javascript :

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

1
2
 
$("#fantome" + id).fadeOut(200);

Et dans le html:

Code html :

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

1
2
 
<div class="fantome" id="fantome<?php echo $data['id']?>">

MILLE MERCIS POUR VOTRE AIDE je n'y serais jamais arrivée sinon

[Chen norris]

Attention car un numérique seul n'est pas valable comme id. Je te conseille de plutôt revenir sur des <div id="deletebox0">, <div id="deletebox1">, <div id="deletebox2">, … Une autre chose que j'ai remarqué est que tu sembles importer plusieurs fois JQuery :

Code :

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

1
2
3
 
<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>

Ça peut être un souci d'exécution de ton javascript donc essaye de ne garder qu'un seul import.

J'ai retesté de mon côté et je n'ai pourtant pas de problème pour retirer les <div> au clic sur les boutons. Petite précision : les <div> se masquent avec fadeOut mais ils ne disparaissent pas de la page. Si tu veux complètement retirer les éléments DOM, il va falloir appeler en plus la méthode remove. Je te propose de comparer ton code à celui que j'utilise pour mes tests (j'ai commenté la requête ajax vu que je teste en direct) :

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
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
		<script type="text/javascript">
			jQuery.noConflict();
			(function($) {
				$(document).ready(function() {
					$("button.deletebox").click(function() {
						var id = $(this).parent().attr("id");
						$("#" + id).fadeOut(200, function() { $(this).remove(); });
						/*$.ajax({
							type: "POST",
							url: "scripts/del.php",
							data: { id: id },
							success: function(data, textStatus, jqXHR) {
								if (textStatus === "OK")
									$("#" + id).fadeOut(200, function() { $(this).remove(); });
							}
						});*/
					});
				});
			})(jQuery);
		</script>
	</head>
	<body>
		<div id="deletebox0">
			<button class="deletebox">supprimer</button>
			Le contenu de deletebox 0.
		</div>
		<div id="deletebox1">
			<button class="deletebox">supprimer</button>
			Le contenu de deletebox 1.
		</div>
		<div id="deletebox2">
			<button class="deletebox">supprimer</button>
			Le contenu de deletebox 2.
		</div>
	</body>
</html>

J'en ai profité pour ajouter certaines balises manquantes telles que la déclaration de l'encodage et le doctype. Profites-en pour les rajouter dans ta page si tu veux éviter les mauvaises surprises lorsque tu seras sur un autre environnement et/ou un autre navigateur.

[Silverat]

Super, tout marche bien merci beaucoup.

Maintenant ce n'est plus pour supprimer que ça me pose un problème mais pour envoyer un message... je ne sais pas comment faire avec mes ids. Mais peut-être devrais-je ouvrir un nouveau sujet ?

[Chen norris]

Quand tu parles du problème pour "envoyer un message", de quoi parles-tu exactement ?
(Pour ce qui d'ouvrir une nouvelle discussion, attendons de voir si ton problème d'envoi de message est facile à résoudre ou non )

[Silverat]

Je m'exprime mal

En fait c'est la même chose mais en sens inverse.

On clic sur un bouton et un message aléatoire (qui est sélectionné dans la BDD) apparait dans la même div "fantôme"

[Chen norris]

Petit ajout de fonctionnalité mais qui implique pas mal de changement dans ton code Javascript, je vais donc essayer d'être le plus clair possible…

Dans l'ordre, ce que tu cherches à faire se décompose en :

• envoi d'une demande de création de message en base de données,
• récupération du résultat,
• génération d'un <div> qui contiendra le message.

Deuxième point important : au moment de mettre à jour le contenu de ta page, il va falloir arrêter d'écouter les clics sur les boutons de suppression. Pourquoi ? Suppose que tu aies 4 messages et que tu en rajoutes un 5ème... Juste avant que le 5ème ne s'ajoute, voici ce que tu as :

• Message 1, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression du message 1)
• Message 2, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression du message 2)
• Message 3, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression du message 3)
• Message 4, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression du message 4)

Si tu ajoutes ton 5ème message sans te soucier de l'événement click, voici ce que ça va donner :

• Message 1, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression)
• Message 2, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression)
• Message 3, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression)
• Message 4, avec un bouton de suppression ← javascript "écoute" tout clic sur ce bouton de suppression (si clic, lancement du traitement de suppression)
• Message 5, avec un bouton de suppression

Comme tu peux le voir, ton code javascript ne sait pas qu'il y a désormais un 5ème <div> avec un bouton de suppression. Tu auras beau cliquer sur le bouton "supprimer" de ce 5ème message, il ne se passera strictement rien. Il faut donc dire à javascript d'arrêter d'écouter les clics, ajouter ton message puis remettre en place l'événement click sur l'ensemble des messages (donc sur tes 4 messages que tu avais déjà ainsi que le 5ème message que tu viens d'ajouter). Dans l'idéal, crée une fonction à part pour mettre en place l'événement click étant donné que tu dois désormais appeler ce code plusieurs fois. Idem d'ailleurs pour le code que tu t'apprêtes à ajouter, ce sera beaucoup plus propre et plus maintenable si tu le mets dans une nouvelle fonction.


En terme de code, tout ça se traduit par :

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
 
...
$.ajax({
    type: "POST",
    url: "scripts/add.php",
    success: function(data, textStatus, jqXHR) {
        if (textStatus === "OK") {
            // Retrait les listeners des boutons de suppression
            $("button.deletebox").unbind("click");
            // On récupère l'id et le message générés par les traitements en PHP
            var idNouveauMessage = // Ici, récupérer dans la variable 'data' l'identifiant du dernier message généré
            var nouveauMessage = // Ici, récupérer dans la variable 'data' le dernier message généré
            $("button.deletebox:nth-last-child(1)").parent().after("<div id=\"deletebox" + idNouveauMessage + "\">"
                    + "<button class=\"deletebox\">supprimer</button>" + nouveauMessage + "</button></div>");
            // Puis remise en place des listeners des boutons de suppression
            bindDeleteListeners();
        }
    },
    failure: function(response, request) {
        // Ici du code pour gérer ton erreur comme tu veux (message alert, écriture de l'erreur dans la console JS, ...)
    }
...
});

Avec la méthode bindDeleteListeners qui contient le $("button.deletebox").click(function() { ... , et une méthode bindAddMessage, par exemple, pour le bout de code ci-dessus.
Dernière chose : n'oublie d'appeler bindDeleteListeners au chargement de ta page :

Code :

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

1
2
3
4
 
$(document).ready(function() {
    bindDeleteListeners();
}

Voilà, j'espère que tout ça n'est pas trop confus. N'hésite pas à poster ton code Javascript si jamais tu rencontres des soucis ou bien si tu ne comprends pas comment découper ton code avec des fonctions.

---

EDIT

Il faudrait que ton code Javascript soit organisé comme ceci :

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
 
jQuery.noConflict();
(function($) {
    /**
     * Gestion de l'événement pour l'ajout d'un message.
     */
    bindAddMessage() {
        ...
    }
 
    /**
     * Gestion de l'événement pour la suppression d'un message.
     */
    bindDeleteListeners = function() {
        ...
    }
 
    /**
     * Au chargement de la page.
     */
    $(document).ready(function() {
        bindDeleteListeners();
    }
})(jQuery);
</script>

[Silverat]

Houlà je n'avais pas vu qu'il y avait eu des réponses. Désolée de ma réponse tardive du coup

Je vais relire tout ça pour bien comprendre et je reviens. J'avais commencé un bout de code mais ça ne marchait pas

Voici mon code actuel :

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
 
<script type="text/javascript">
jQuery.noConflict();
(function($) {
	$(document).ready(function() {
		$("button.get_question").click(function() {
			var login = $("#login").val();
			$.ajax({
				type: "POST",
				url: "scripts/get_question.php",
				data: { login: login },
				success: function(data, textStatus, jqXHR) {
				if(data != "ok")
					{
						$(".error").empty().append(data);
					}
				else
					{
						$("#fantome" + id).show();
					}
				}
			});
		});
	});
})(jQuery);
</script>

En fait je ne sais pas comment faire pour récupérer le bon id dans le javascript et l'envoyer ainsi au html pour qu'il affiche la div "fantôme" avec le bon id. Qui lui, est généré dans le scripts/get_question.php ci-dessous :

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
 
<?php
include('../../config.php');
 
extract($_POST);
 
if(isset($login) && !empty($login))
{
	$new_sql = "SELECT question FROM questions_list ORDER BY RAND() LIMIT 1";
	$new_req = mysqli_query($aVar, $new_sql);
	$row_new = mysqli_fetch_array($new_req);
 
	$time = date("Y-m-d H:i:s");
 
	$inser_sql = "INSERT INTO questions (question, anonyme, auteur_quest, pagename, dateheure) VALUES ('".$row_new[0]."', 'oui', 'system', '".$login."', '".$time."')";
	$inser_req = mysqli_query($aVar, $inser_sql);
 
	echo "ok";
}
else
{
	echo "error getting";
}
?>

Dans la table "questions" il y a un id généré en auto-increment. J'ai essayé de le faire renvoyer au javascript en faisant un echo de cet id dans ce php. Mais ça n'a pas bien fonctionné, je ne sais pas pourquoi...

Je rajouterais tous les binds, les listeners etc, tout à la fin si ça ne te dérange pas il faut que je regarde les mans d'abord...

[Silverat]

Ça ne marche pas

Pour afficher un nouveau message, toujours avec la même div "fantome", j'ai tenté de faire comme ça donc :

Code html :

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

1
2
3
4
5
 
<input type="hidden" name="login" id="login" value="<?php echo $_SESSION['login'] ?>">
<button class="get_question">
 Recevoir une question au hasard
</button>

Le javascript :

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
 
<script type="text/javascript">
jQuery.noConflict();
(function($) {
	$(document).ready(function() {
		$("button.get_question").click(function() {
			var login = $("#login").val();
			$.ajax({
				type: "POST",
				url: "scripts/get_question.php",
				data: { login: login },
				success: function(data, textStatus, jqXHR) {
				if(data == "error getting")
					{
						$(".error").empty().append(data);
					}
				else
					{
						$("#fantome" + data).show();
					}
				}
			});
		});
	});
})(jQuery);
</script>

Et le scripts/get_question.php :

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
include('../../config.php');
 
extract($_POST);
 
if(isset($login) && !empty($login))
{
	$newsql_id = "SELECT id FROM questions WHERE dateheure='".$time."' AND auteur_quest='system' AND pagename='".$login."'";
	$new_id = mysqli_query($aVar, $newsql_id);
	$row_id = mysqli_fetch_array($new_id);
 
	echo $row_id[0];
}
else
{
	echo "error getting";
}
?>

Ça ne marche pas évidemment... à pars quand on rafraichit la page, on voit bien que ça a marché mais il n'y a pas l'affichage en "temps réel"

[Chen norris]

Quand ton script répond, tu cherches à mettre à jour le contenu de ta page comme ceci :

Code :

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

$("#fantome" + data).show();

Que vaut data ? Passe cette ligne javascript en debug car à mon avis, ça ne pointe sur aucun élément existant de la page. En debug javascript, profites-en pour aussi regarder ce que vaut $("#fantome" + data) pour voir si tu récupères bien un tableau d'éléments DOM.

Sinon, deux petites remarques :

• en javascript, un bon réflexe à prendre est d'utiliser le === plutôt que == pour des comparaisons. Le fait d'avoir un === compare non seulement la valeur mais aussi le type. C'est donc plus fiable en terme de résultat de comparaison.
• à la place de $("button.get_question"), met plutôt $("#login button.get_question"). L'accès se fera beaucoup plus rapidement car le navigateur ne passe pas en revue tous les boutons pour vérifier s'ils contiennent la classe "get_question" mais uniquement ce qui se situe dans #login.

[Silverat]

Merci beaucoup de m'aider

Alors data a bien la valeur de l'id du message qui est sensée s'afficher (mais qui ne l'est pas encore, donc). Par exemple, ici c'est 521.

Et j'ai bien corrigé le reste...

[Chen norris]

Tu confirmes du coup qu'il existe bien un élément dans ta page ayant id="fantome521" ? C'est la vérification que je te demandais de faire en regardant en debug javascript ce que valait $("#fantome" + data). Tu peux sinon regarder via l'onglet "Inspecteur" le contenu exact de ta page pour t'assurer qu'il existe bien un élément comportant cet id.

[Silverat]

Il n'existe pas dans la page... Mais il existe si je rafraichis la page

[Chen norris]

Tu as donc ta réponse ^^

[Silverat]

Mais... mais.... comment je fais alors ?

En sachant que la question est crée dans la base que quand on clique sur le bouton get_question...

[Chen norris]

En javascript, tu cherches à afficher un <div>… qui n'existe pas. Ça ne peut donc pas fonctionner. En fait, il faut qu'en javascript, tu crées un <div> plutôt que de chercher à afficher quelque chose d'inexistant. Regarde du côté des méthodes append(), after(), … proposées par JQuery, tu devrais trouver la réponse à ce que tu cherches à faire. Dans tous les cas, quand tu testes, penses à regarder ce qui est produit avec la vue Inspecteur pour vérifier si tes <div id="fantome…"> se créent bien, ainsi que ce qui se trame côté javascript avec la vue Débogueur pour voir si tu manipules les bons objets

[Silverat]

J'avais essayé avec .prepend pour qu'il l'affiche tout en haut de la liste (donc en premier) mais ça ne fonctionnait pas non plus... Je pense que je ne m'y prenais pas comme il fallait.

J'avais fait quelque chose comme ça :

Code javascript :

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

1
2
 
$("#fantome" + data).empty().prepend(data);