Manipulation du (this)

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,
Une petite aide serait bienvenue pour la manipulation du (this) dans le cas suivant:
J'aimerais pouvoir effacer le rdv concerné, lorsque l'on clique sur la petite poubelle (a droite du rdv)

J'ai une liste de rendez-vous générée par un select dans ma db.
Pièce jointe 210977

l'html de chaque rdv est:

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
 
htmlRdv +=
                            "<input type='hidden' id='hiddenId'" +
                            "value='" + Id + "'/>" +
                            "<table class='Tab_Rdv'>" +
                            "   <tr>" +
                            "       <td >" +
                            HDeb + ":" + MDeb +
                            "       </td>" +
                            "       <td >" +
                            HFin + ":" + MFin +
                            "       </td>" +
                            "       <td class='Col_100'>" +
                            Genre + ' ' + Nom + ', ' +
                            Prenom + "&nbsp;&nbsp; (" + Specialite + ") " +
                            "       </td>" +
                            "   </tr>" +
                            "   <tr >" +
                            "       <td colspan='6' class='TdLeft'>" +
                            "           &nbsp;&nbsp;&nbsp;&nbsp;Lieu: " + Lieu +
                            "       </td>" +
                            "   </tr>" +
                            "   <tr >" +
                            "       <td colspan='6'>" +
                            "           <textarea class='Col_70'>" + Comm + "</textarea>" +
                            "       </td>" +
                            "       <td class='Col_20'>" +
                            "           <a href='#'" +
                            "              id='B_DelRDV' " +
                            "              data-rel='popup'>" +
                            "               <img src='img/corbeille.png'" +
                            "              class='imgbtMini'" +
                            "              alt='Supprimer rdv'/>" +
                            "           </a>" +
                            "       </td>" +
                            "   </tr>" +
                            "</table>";

qui est inséré dans une <div id="ListRdv" data-inset="true"></div>
Je trigger le clic sur la poubelle par:

Code:

1
2
3
4
5
6
7
8
 
$("#Pop_NouvRDV").on("click", "#ListRdv a", function ()
{
    var $I = $(this);
    var ThisID = $I.parent("hiddenId").val(); 
    alert ("ThisID = " + ThisID);
    RDVDelete(ThisID);
}); // ------------------------------------------------------------

Mais ThisID reste désespérement 'undefined'

Je n'utilise certainement pas 'this' à bonne escient, quelqu'un pourrait-il m'orienter ?
D'avance merci

Le pb ne vient pas de ton utilisation de "this" mais de ta structure.
En fait $(this).parent() pointe sur une cellule...

Tu cliques sur une ancre (balise <a..>) contenue dans une cellule (balise <td..>) elle-même contenue dans une ligne (balise <tr...>) elle même contenue dans un tableau (balise <table..>) donc pour obtenir l'id que tu souhaites, cachée dans le input hidden tu dois remonter d'autant de parent que de niveau hiérarchique... mauvaise idée !

La meilleure solution est d'embarquer la data que tu souhaites retrouver directement dans l'objet que tu veux cliquer, en l'occurrence ton ancre.
Pour ça tu peux y insérer une balise personnalisée, donc commençant par 'data-'.
Par exemple, data-monIdentifiant =>
Code:

1 2 3 "<a href='#'" + " id='B_DelRDV' " + " data-rel='popup' data-monIdentifiant='" + Id + "'>" +
De cette manière tu peux récupérer directement ton information en faisant :
Code:

1 2 3 4 5 6 7 8 $("#Pop_NouvRDV").on("click", "#ListRdv a", function () { var $I = $(this); var ThisID = $I.attr("data-monIdentifiant"); alert ("ThisID = " + ThisID); RDVDelete(ThisID); }); // ------------------------------------------------------------
et tu n'as du coup plus besoin de ton input hidden...

27/05/2016, 10h26
Goltar

Mais bien sûr que c'est bien sûr !!!!

Merci EddiGordo !
En effet beaucoup plus simple !
Problème résolu
27/05/2016, 10h32
chadoum

Bonjour,
Plusieurs remarques :
Dans ton code, aucun élément ne possède cet ID "Pop_NouvRDV", tu as du oublié de l'envoyer dans ton code ou renommer l'ID de ta balise ("B_DelRDV" ?) !
Ensuite tu devrais essayer de construire ton html dans autre chose qu'une table...
Egalement n'oublie pas qu'un ID est unique.

Il y a aussi un problème sur la ligne

Code:

var ThisID = $I.parent("hiddenId").val();

, il faudrait que tu écrives

Code:

var ThisID = $I.parent("#hiddenId").val();

Bonjour,
nul besoin d'ID ou autre data-xxx, il suffit de remonter au parent choisi et de le « remover »

exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>remove parent</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
  <p><span>[X]</span> paragraphe 1</p>
  <p><span>[X]</span> paragraphe 2</p>
  <p><span>[X]</span> paragraphe 3</p>
  <p><span>[X]</span> paragraphe 4</p>
<script>
$( "span").on( 'click',(function() {
    var parent = $( this ).parent('P');
    console.log( parent);
    parent.remove();
  })
);
</script>
</body>
</html>

la fonction de suppression sera simplement

Code:

1
2
3
4
5
$( "span").on( 'click',(function() {
    var parent = $( this ).parent('P');
    parent.remove();
  })
);

27/05/2016, 14h39
Goltar

re-Bonjour

@Chadoum,
En effet "Pop_NouvRDV" est dans ma partie html, le contenu est généré par script après lecture dans ma db et injecté dans "Pop_NouvRDV" qui est le conteneur.

@NoSmoking
Le but était de récupérer l'id afin de pouvoir faire un delete du rdv dans la db.
N'empêche que je vais faire une ch'tite recherche sur parent.remove(); car je ne connaissait pas.

En tout les cas merci pour votre feedback !
Bonne journée