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

[lefebvresdesigns]

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 :

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 :

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]

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 :

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

[eckerdecker]

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 :

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]

j'ai tenté :

Code :

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 :

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 :

<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]

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 :

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

?

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

je voulais dire :

Code :

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

avec

Code :

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 :

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

[Willpower]

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 :

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

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

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]

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]

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

Code :

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]

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 :

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 :

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]

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]

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]

Envoyé par lefebvresdesigns

Code :

Code html :

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

[lefebvresdesigns]

Envoyé par eckerdecker

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

très très bonne remarque ! je fais ça de suite, moins il y a de code, mieux c'est ! encore merci de m'inculquer vos compétences c'est grâce à vous que j'évolue !