Récupérer valeur parent-enfant d'une div cliquée [Débutant(e)]

**lefebvresdesigns** · 27/01/2012, 16h22

Bonjour, je souhaiterais récupérer (à l'appel d'une fonction,) la valeur affichée dans une div mais je n'arrive pas à accéder à celle-ci calim2: :

fonction défaillante :

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
function Alert_suppr(obj) {
	var Reference = obj.parentNode.getElementsByClassName("reference")[0].innerHTML;
	if (confirm("Etes vous certain(e) de vouloir supprimer cet article ?")) {
		window.location.href=('admin-index.php?reference='+Reference);}
}
</script>

code du tableau dans lequel je voudrais récupérer la valeur (dans la div de classe reference) :

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
 
<table width="700" border="0" cellspacing="0" cellpadding="0" class="products">
            <tr>
              <td width="109" height="105" align="center">
                <div class="capture">
                  <table width="80" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td valign="middle" bgcolor="#FFFFFF"><img src="images/products/nature-wallpaper-1366x768-065.jpg" width="1366" height="768" alt="grerg" onclick="window.location.href=('admin-article.php?reference=TANKPEJS')" /></td>
 
                      </tr>
                    </table>
                </div>
              </td>
              <td width="361">
                <div class="titre" style="float:left;" onclick="window.location.href=('admin-article.php?reference=TANKPEJS')">grerg</div>
                <div class="reference"><b>Réf. : </b>TANKPEJS</div>
 
                <div class="description" style="height:auto;"><b>Famille : </b>sfgvsf</div>
                <div class="description" style="margin-top: 0px; height: 60px;overflow: hidden;"><b>Description : </b>grerg</div>
              </td>
              <td width="97" valign="bottom">
                <div class="dimensions" align="center"><b>Unités en stock : </b><br />2</div>
              </td>
 
              <td width="133" valign="top">
                <div class="delete-to-basket" style="margin: 2px 1px 12px auto;">
                  <a href="javascript:Alert_suppr(this);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('delete-basket-cross-60','','images/suppr-cross-hover.png',1)">retirer l'article <img src="images/suppr-cross.png" width="13" height="13" alt="supprimer l'article" id="delete-basket-cross-60" /></a>
                </div>
                <div class="price">
                  <p>2.00 €</p>
                  </div>
                <div class="bouton-1" onclick="window.location.href=('admin-article.php?reference=TANKPEJS')">Voir les détails</div>
 
              </td>
            </tr>
</table>

Je dois récupérer la référence dans la div (de classe référence) pour la passer en paramètre sachant que ce tableau comporte plusieures lignes avec chacun une div de classe référence (c'est pour celà que c'est une classe et non un id après il m'est possible d'ajouter comme id à cette div la référence si vraiment c'est necessaire).

Encore une fois je remercie d'avance et grandement la communauté de son soutient

**Willpower** · 27/01/2012, 23h07

ton élément c'est la balise <a>

donc sa parente c'est un <div>

(qui ne contient pas d'objet avec la class "reference")

sa parente à elle c'est un <td>

(qui de même)

qui a encore pour parente un <tr>

(qui elle contient bien un enfant avec pour class "reference")

il te suffit donc de rajouter qqes remontées dans ton arbre :

Code :

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

var Reference = obj.parentNode.parentNode.parentNode.getElementsByClassName("reference")[0].innerHTML;

**eckerdecker** · 27/01/2012, 23h40

qui ne contient pas d'objet avec la class "reference"

J'allais le dire, et je voulais te proposer une petite méthode récursive pour que le tout soit plus facilement maintenable et je viens de découvrir un autre problème dans ton code.

Tu appelles ta méthode depuis l'attribut href de ton lien, or dans ce cas précis this ne sera pas la balise <a> cliquée mais l'objet window, pour que ce soit bien l'élément cliqué qui soit passé à ta fonction Alert_suppr() il faut que tu le fasses dans le onclick.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function Alert_suppr(obj) {
	var Reference = getClosestRef(obj).innerHTML;
	if (confirm("Etes vous certain(e) de vouloir supprimer cet article ?")) {
		window.location.href=('admin-index.php?reference='+Reference);}
}
function getClosestRef(obj) {
    var ret = obj.getElementsByClassName('reference');
    return ret.length > 0 ? ret[0] : getClosestRef(obj.parentNode);
}
</script>

Si tu appelles bien Alert_suppr depuis le onclick ca va le faire.

Par contre dans ton élément class="reference" tu n'aura pas directement ta référence mais "<b>Réf. : </b>TANKPEJS" ce qui n'est pas forcément ce que tu cherches

Note : pourquoi ne pas directement passer ta référence en paramètre de ta fonction sinon ... ?

**lefebvresdesigns** · 28/01/2012, 10h14

j'ai tenté :

Code :

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

1
2
 
var Reference = obj.parentNode.parentNode.parentNode.getElementsByClassName("reference")[0].innerHTML;

mais il me dit : obj.parentNode is undefined

j'ai aussi tenté :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function Alert_suppr(obj) {
	var Reference = getClosestRef(obj).innerHTML;
	if (confirm("Etes vous certain(e) de vouloir supprimer cet article ?")) {
		window.location.href=('admin-index.php?reference='+Reference);}
}
function getClosestRef(obj) {
    var ret = obj.getElementsByClassName('reference');
    return ret.length > 0 ? ret[0] : getClosestRef(obj.parentNode);
}

mais il me dit obj.getElementsByClassName is not a function

quand à :

Note : pourquoi ne pas directement passer ta référence en paramètre de ta fonction sinon ... ?

j'ai tenté :

Code html :

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

<a href="admin-index.php?reference=<?php echo $row_Recordset1['Reference'];?>"

mais je n'ai plus de fenêtre de confirmation...

je préférais pourtant la première solution, toutefois si besoin est (pour plus de simplicité) je peux ajouter id dont la valeur sera la référence à la div contenant le <a> sur lequel on a cliqué mais il faudrait m'exppliquer comment récupérer l'attribut (le id qui sera la référence)

**eckerdecker** · 28/01/2012, 10h45

mais il me dit : obj.parentNode is undefined
...
mais il me dit obj.getElementsByClassName is not a function

Tu as essayé quelque chose comme ça :

Code :

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

<a href="javascript:void(0)" onclick="Alert_suppr(this);">

?

mais je n'ai plus de fenêtre de confirmation...

je voulais dire :

Code :

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

<a href="javascript:Alert_suppr('<?php echo $row_Recordset1['Reference'];?>')">

avec

Code :

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

1
2
3
4
5
6
<script type="text/javascript">
function Alert_suppr(Reference) {
	if (confirm("Etes vous certain(e) de vouloir supprimer cet article ?")) {
		window.location.href=('admin-index.php?reference='+Reference);}
}
</script>

Sinon tu peux aussi faire :

Code :

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

<a href="admin-index.php?reference=<?php echo $row_Recordset1['Reference'];?>" onclick="return confirm('Vous êtes sûr ?')">

**Willpower** · 28/01/2012, 10h47

Comme te l'as dis eckerdecker :

Tu appelles ta méthode depuis l'attribut href de ton lien, or dans ce cas précis this ne sera pas la balise <a> cliquée mais l'objet window, pour que ce soit bien l'élément cliqué qui soit passé à ta fonction Alert_suppr() il faut que tu le fasses dans le onclick.

Tu utilises ton lien pour faire une injection javascript dans l'url, tu perds donc ton objet dans le code injecté.

(il faut aussi passer le "this" à la fonction en question, ou l'événement..)

Tu dois faire ça proprement en utilisant l’évènement approprié : onclick :

Code :

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

<a href=# onclick="Alert_suppr(this);">supprimer</a>

mais pour être vraiment propre tu devrais déjà générer le lien en php(puisque j'ai vu que c'est le langage que tu utilises) et le onclick devrait juste autoriser ou non l'action :

Code :

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

<a href="admin-index.php?reference=REF_OBTENU_EN_PHP" onclick="return confirm('Etes vous certain(e) de vouloir supprimer cet article ?');">supprimer</a>

sinon une autre solution plus propre que la première mais en restant en javascript uniquement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function Alert_suppr(obj) {
	var Reference = obj.parentNode.parentNode.parentNode.getElementsByClassName("reference")[0].innerHTML;
	if (confirm("Etes vous certain(e) de vouloir supprimer cet article ?")) {
		this.href=('admin-index.php?reference='+Reference);
		return true;
	}
	return false;
}
</script>
<a href="#" onclick="return Alert_suppr(this);">supprimer</a>

EDIT: AARRRG pris de vitesse par eckerdecker (enfin, heureux de voir qu'on est sur la même longueur d'ondes dans nos solutions. ^^

**eckerdecker** · 28/01/2012, 10h57

AARRRG pris de vitesse par eckerdecker (enfin, heureux de voir qu'on est sur la même longueur d'ondes dans nos solutions. ^^

^^

Selon moi, LA meilleure solution serait de séparer le code javascript du HTML, mais ajouter des écouteurs onclick en js pur c'est la barbe (je suis un adepte de jQuery, c'est plus fort que moi maintenant ^^)

**NoSmoking** · 28/01/2012, 10h58

Bonjour à tous,
vu la structure de ton document, je chercherais la TR parent

Code :

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

1
2
3
4
  var oElem = obj.parentNode;
  while( oElem && oElem.tagName != 'TR'){
    oElem = oElem.parentNode;
  }

afin d'avoir la référence de celle ci pour rechercher l'élément contenant la référence.

Comme il a été dit, il te faut faire l'appel sur le onclick afin d'avoir accès à l'objet cliqué

**lefebvresdesigns** · 28/01/2012, 11h24

j'ai pas testé toutes les solutions car là elles se multiplient (j'en prends une combinée à une autre et ainsi de suite

) bref j'ai trouvé mon bonheur parmi vos solution (PS euh la toute dernière par contre elle a pas marché, mais peu importe vu que je suis parvenu à mes fin et ce sans trop de code). donc je vous donne la solution pour laquelle j'ai opté :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
function Alert_suppr(obj) {
	var Reference = obj.parentNode.parentNode.parentNode.getElementsByClassName("reference")[0].innerHTML;
	if (confirm()) {
		this.href=('admin-index.php?reference='+Reference);
		return true;
	}
	return false;
}
</script>

Code html :

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

1
2
 
<a href="admin-index.php?reference=<?php echo $row_Recordset1['Reference']; ?>" onclick="return confirm('Etes vous certain(e) de vouloir supprimer cet article ?');">supprimer</a>

Je remercie encore et toujours la communauté d'être présente pour servir nos causes ! franchement chapeau-bas !

**NoSmoking** · 28/01/2012, 11h32

PS euh la toute dernière par contre elle a pas marché, mais peu ...

elle te permettrait simplement de remplacer obj.parentNode.parentNode.parentNode. dans le cas ou tu rajouterais un conteneur autour de ta balise A.

Perso je trouve qu'il y a beaucoup de DIV inutiles dans ta conception, mais si cela fonctionne...

**lefebvresdesigns** · 28/01/2012, 11h40

Envoyé par NoSmoking

elle te permettrait simplement de remplacer obj.parentNode.parentNode.parentNode. dans le cas ou tu rajouterais un conteneur autour de ta balise A.

Perso je trouve qu'il y a beaucoup de DIV inutiles dans ta conception, mais si cela fonctionne...

ben en fait nan elles sont toutes utiles au design tiens si tu veux je te joins le fichier php et le fichier styles.css (tu comprendras mieux pourquoi àsinon c'est sur j'ai préféré les div plutôt que les cellules de tableau)

**eckerdecker** · 28/01/2012, 11h43

Envoyé par lefebvresdesigns

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
function Alert_suppr(obj) {
	var Reference = obj.parentNode.parentNode.parentNode.getElementsByClassName("reference")[0].innerHTML;
	if (confirm()) {
		this.href=('admin-index.php?reference='+Reference);
		return true;
	}
	return false;
}
</script>

Code html :

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

1
2
 
<a href="admin-index.php?reference=<?php echo $row_Recordset1['Reference']; ?>" onclick="return confirm('Etes vous certain(e) de vouloir supprimer cet article ?');">supprimer</a>

Ton lien n'utilises pas ta fonction javascript, tu peux la supprimer !