Masquer une entrée après suppression

Version imprimable

Voir 40 message(s) de cette discussion en une page

04/03/2015, 15h24
Silverat
Ce n'est pas grave, je ne m'en étais pas rendu compte non plus :lol:

Ç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:

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 :aie:
04/03/2015, 15h43
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 ?
04/03/2015, 16h05
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... :lol:

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... :oops:
04/03/2015, 17h28
Chen norris

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

Code:

$(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:

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

en

Code:

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

Je te rassure, on y presque ^^

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

Code:

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 :ptdr: je le vois quand je rafraichis la page...

Mon code html en entier :

Code:

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:

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:

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:

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 :lol: 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:

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

Et dans le html:

Code:

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

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

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:

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:

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.

08/03/2015, 19h25
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 ?
09/03/2015, 12h29
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 ;) )
09/03/2015, 12h40
Silverat

Je m'exprime mal :oops:

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" :mrgreen:

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:

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:

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:

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>

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

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

Voici mon code actuel :
Code:

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:

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 :oops: il faut que je regarde les mans d'abord...

Ça ne marche pas :P

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

Code:

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:

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:

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" :calim2:

17/03/2015, 13h29
Chen norris
Quand ton script répond, tu cherches à mettre à jour le contenu de ta page comme ceci :

Code:

$("#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.
17/03/2015, 13h42
Silverat

Merci beaucoup de m'aider :oops:

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...
17/03/2015, 14h06
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.
17/03/2015, 14h10
Silverat

Il n'existe pas dans la page... Mais il existe si je rafraichis la page :aie:
17/03/2015, 14h12
Chen norris

Tu as donc ta réponse ^^
17/03/2015, 15h07
Silverat

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

En sachant que la question est crée dans la base que quand on clique sur le bouton get_question...
18/03/2015, 12h54
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 ;)
18/03/2015, 13h15
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:

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

Voir 40 message(s) de cette discussion en une page