Discussion :

[Pandapi]

Bonjour à vous,
Je ne suis pas un expert jQuery et j'ai un petit problème dont je ne trouve pas la solution.

Je présente mon code au cas où quelqu'un saurait me débloquer, l'idée c'est d'avoir un bouton supprimer qui fait apparaître un message (pas une alert) demandant une confirmation de suppression. Dans le cas où l'utilisateur indiquerait "Non", je voudrais que le message reparte d'où il est venu.
Tout se passe bien lors de l'affichage du message, j'utilise une classe hidden qui display: none appliquée par défaut à l'élément, et je la retire lorsqu'on clique sur le bouton de suppression, ce qui fait apparaître le message.
Pour la suite ça coince, je fais exactement la même chose avec le bouton de confirmation "Non", en ajoutant cette fois la classe hidden, mais rien ne se passe.

Voici le code de déclaration de ces fonctions :

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
$(document).ready(function()
{
	// Initialisation des boutons supprimer de la visualisation
	$(".btn-danger").each(function(index) 
	{
	    $(this).click(function()
	    {
	    	$(".confirm-message#".concat($(this).attr('id'))).removeClass("hidden");
	    });
	});
 
	$(".btn-no").each(function(index) 
	{
	    $(this).click(function()
	    {
	    	$("confirm-message#".concat($(this).attr('id'))).addClass("hidden");
	    });
	});	
});

Et 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
21
22
23
<td>
       	<input id='delete_competence_<?php echo $k ?>' type='submit' value='Supprimer' class='btn btn-danger'>
 
		</td></tr>
		<tr class='hidden confirm-message' id='delete_competence_<?php echo $k ?>'>
		<td colspan="5">
 
		<div class="alert alert-danger" role="alert"> Etes-vous sûr de voulour supprimer cette compétence ?
 
			<div class="btn-group btn-group-justified" role="group" aria-label="...">
 
				<div class="btn-group" role="group">
				<button type="button" class="btn btn-default btn-yes">Oui</button>
				</div>
 
				<div class="btn-group" role="group">
				<button type='button' id='delete_competence_<?php echo $k ?>' class='btn btn-default btn-no'>Non</button>
				</div>
 
			</div>
 
		</div>
		</td></tr>

Je précise que j'utilise bootstrap bien qu'il n'intervienne pas réellement ici.

Mon bloquage porte surtout sur le pourquoi du comment qui fait que le jQuery fonctionne parfaitement pour faire apparaître le message, mais que la seconde fonction ayant quasiment le même fonctionnement n'arrive pas à le faire disparaître.

Merci d'avance pour l'aide.

[freddou17]

Slt,

et les fonctions .show() et .hide() de $ ne te suffiraient elles pas?

++

[Pandapi]

Non parce que c'est un <tr> que j'affiche/cache, qui contient des <td>, qui eux-même contiennent des <div> qui contiennent le message et les boutons affichés. A moins d'avoir fait une erreur j'ai cru lire que show() et hide() n'étaient pas récursifs et n'iraient pas appliquer le CSS en cascade sur les descendants, du coup j'ai opté pour cette solution qui semble marcher correctement vu que lorsque je retire la classe hidden tout apparaît y compris le contenu final.

[danielhagnoul]

id='delete_competence_<?php echo $k ?>'.

Attention ! Un ID doit être unique, il suffit donc à identifier un élément du DOM.

les fonctions .show() et .hide() de $ ne te suffiraient elles pas?

Rappel : je recommande d'oublier show()/hide() et d'utiliser le CSS. Voir : http://www.developpez.net/forums/d15...ponible-tests/

[Pandapi]

En fait la page comporte de nombreuses données qui peuvent être supprimées, donc pour avoir des ID html différents à chaque fois j'ajoute l'ID de la BDD à une base fixe.
Dans le code que j'ai donné il y a effectivement plusieurs fois le même ID, il faudrait que je modifie la partie fixe en fonction de lélément considéré.

C'est aussi parce que j'avais lu quelque chose dans ce goût là que je n'avais pas utilisé show() et hide(), ceci dit du coup j'ai toujours mon problème, je ne vois pas pourquoi le code fonctionne pour enlever le hidden et donc afficher le message alors que le second code quasiment identique ne fonctionne pas.

[Pandapi]

Autant pour moi, le code marche très bien, j'avais juste oublié un point dans la ligne :

Code :

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

$("confirm-message#".concat($(this).attr('id'))).addClass("hidden");

=

Code :

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

$(".confirm-message#".concat($(this).attr('id'))).addClass("hidden");

Comme quoi, petite erreur, grandes conséquences.
Merci de l'aide en tous cas.