Dom et jquery [Résolu]

[mower666]

Bonjour,

Voila je voudrai lors d'un appuie sur un lien "Editer" dans un tableau qui liste des images :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<tr>
  <td>
	<?php echo $nomPhoto ?>
  </td>
  <td>
	<a href="#"><img src="<?php echo $rep.$nomFichier; ?>"></a>
  </td>
  <td>
      <a href="#" id="" class="boutonEdit">Editer</a>&nbsp;|&nbsp;<a href="#">Supprimer</a>
  </td>
</tr>

Récupérer certaines informations contenu dans des champs img et texte des deux td précédent, pour les envoyé dans un formulaire d'edition qui apparait au dessous du tableau.

Je pensais faire simplement un

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
$(".boutonEdit").click(function(){
		image=this.parentNode;
		image=image.previousSibling;
		image=image.lastChild;
 
		nom=this.parentNode;
		nom=nom.previousSibling;
		nom=nom.previousSibling;
		nom=nom.firstChild;
		nom=nom.firstChild;
			});

Le this ne fait référence à rien, et je ne comprend pas vraiment pourquoi :/

[SpaceFrog]

Code :

$(this)

this fait référence à ta fonction anonyme

[mower666]

Comment je peux faire en sorte de lui dire d'enregistrer l'élément sur lequel je clic ?

[Arnaud F.]

Bonjour,

si vous voulez n'utiliser que l'élément cliqué et non tout ceux qui ont la classe ".boutonEdit", alors vous devez utiliser les propriétés de l'objet event passé en paramètre :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
$(".boutonEdit").click(function(event) {
	var target = $(event.target); // Le bouton cliqué uniquement
	var image = target.parentNode;
	image = image.previousSibling;
	image = image.lastChild;
 
	var nom = $(event.target).parentNode;
	nom = nom.previousSibling;
	nom = nom.previousSibling;
	nom = nom.firstChild;
	nom = nom.firstChild;
});

[mower666]

Super la classe ça marche (en retirant un $) merci
Seulement j'ai un autre soucis j'arrive à récuperer la valeur texte donné par

Code :

<?php echo $nomPhoto ?>

dans le premier td (j'ai vérifié avec un alert qui semble prendre en compte des saut de lignes Oo) et il m'est impossible d'envoyer cette derniere dans un champs type="text" je n'ai pas d'erreur dans la console pourtant suis-je forcé de stocker le

Code :

<?php echo $nomPhoto ?>

dans un type="text" également?

[Arnaud F.]

Un peu de code vaudra mieux qu'un long discours, je n'ai pas compris ce que vous souhaitez faire.

Postez un bout de code

[mower666]

Donc en fait je navigue dans ce tableau :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<tr>
<td>
	<input type="text" value="<?php echo $nomPhoto ?>" size="15">
</td>
<td>
	<a href="#"><img" src="<?php echo $rep.$nomFichier; ?>"></a>
</td>
<td>
	<a href="#" class="boutonEdit">Editer</a>&nbsp;|&nbsp;<a href="#">Supprimer</a>
</td>
</tr>

Au clic sur le liens Editer je vais rechercher le value du type="text" du premier td ainsi que le src de l'image du second td

avec un script js

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
//la fonction edite affiche le formulaire et rempli les champs nom et type automatiquement
		ajout=document.getElementById('ajoutPhoto');
		nomEdit=document.getElementById('nomEdit');
		apercuEdit=document.getElementById('apercuEdit');
 
		var target = (event.target); // Le bouton cliqué uniquement
 
		//On récupere le src de l'image pour l'aperçu de l'édition
		var image = target.parentNode;
		image = image.previousSibling;
		image = image.previousSibling;
		image = image.firstChild;
		image = image.nextSibling;
		image = image.firstChild;
 
		//On récupère le nom de l'image 
		var nom = (event.target).parentNode;
		nom = nom.parentNode;
		nom = nom.firstChild;
		nom = nom.nextSibling;
		nom = nom.firstChild;
		nom = nom.nextSibling;
 
		//On attribue leurs valeurs aux champs édition
		apercuEdit.src=image.src;
		nomEdit.value=nom.value;

et je rempli donc ce tableau ci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<tr>
	<td>
		<select id="filtreType" name="typeProduit">			
	        </select>
</td>
<td>
	<input type="text" size="15" value="" id="nomEdit" name="nomEdit">
</td>
<td>
	<img src="" id="apercuEdit">
</td>
</tr>

Ca fonctionne mais au lieu de récupérer le value du type="text" du premier td du premier tableau j'aurai voulu récupérer simplement une chaine de caractère (ce que j'avais fait au début) seulement au moment de remplir le

Code :

<input type="text" size="15" value="" id="nomEdit" name="nomEdit">

J'obtenai un champs vide et lorsque je faisais alert(ma chaine de caractere) j'obtenais bien cette dernière mais j'avais l'impression que des lignes était sauté au lieu de m'afficher

Code :

1
2
 
le nom de la photo

j'avais un truc du genre

Code :

1
2
3
4
5
6
 
 
 
 
 
le nom de la photo

Et donc je me demande comment j'aurai pu le récuperer si c'était toujours une chaine de caractères.
C'est juste par curiosité maintenant en fait

[Arnaud F.]

Tout ça :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
		var target = (event.target); // Le bouton cliqué uniquement
 
		//On récupere le src de l'image pour l'aperçu de l'édition
		var image = target.parentNode;
		image = image.previousSibling;
		image = image.previousSibling;
		image = image.firstChild;
		image = image.nextSibling;
		image = image.firstChild;
 
		//On récupère le nom de l'image 
		var nom = (event.target).parentNode;
		nom = nom.parentNode;
		nom = nom.firstChild;
		nom = nom.nextSibling;
		nom = nom.firstChild;
		nom = nom.nextSibling;

Pour ça :

Code :

1
2
3
4
5
6
7
8
9
10
 
// Si l'image est unique dans la table :
var image = $(target).closest("table").find("img").first();
 
var src = $(image).attr("src");
 
// Si l'input text est unique dans la table :
var inputText = $(target).closest("table").find("input:text").first();
 
var textValue = $(inputText).val();

[mower666]

*_* Mais c'est magique ce truc :O J'ai commencé jquery hier je connais pas trop les fonctions encore ^^ Mais ça va chercher l'élément de la fonction find() le plus proche du target dans la table en gros ?

[Arnaud F.]

Envoyé par mower666

*_* Mais c'est magique ce truc :O J'ai commencé jquery hier je connais pas trop les fonctions encore ^^

Et encore, c'est la toute base, vous n'avez encore rien vu

Envoyé par mower666

Mais ça va chercher l'élément de la fonction find() le plus proche du target dans la table en gros ?

Rien de tel que la documentation pour ça !

.closest() : remonte les éléments du DOM jusqu'a trouver le sélecteur spécifié (donc ici, la table).

.find() : va trouver tous les descendants répondant au sélecteur spécifié (donc ici, l'image). Si vous avez plusieurs balises <img> dans votre table, ça va tous vous les retourner sous forme de tableau.

Je vous encourage vivement à faire un tour du côté de l'API jQuery où se trouve un tas de fonction de base très, très intéressante