Dom et jquery

**mower666** · 08/02/2011, 20h07

Bonjour,

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

Code :

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

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 :

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

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** · 08/02/2011, 20h26

Code :

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

$(this)

this fait référence à ta fonction anonyme

**mower666** · 08/02/2011, 21h13

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

**Arnaud F.** · 08/02/2011, 23h41

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 :

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

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** · 09/02/2011, 10h43

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 :

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

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

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

<?php echo $nomPhoto ?>

dans un type="text" également?

**Arnaud F.** · 09/02/2011, 12h40

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** · 09/02/2011, 13h07

Donc en fait je navigue dans ce tableau :

Code :

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

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 :

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

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

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 :

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

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

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

1
2
 
le nom de la photo

j'avais un truc du genre

Code :

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

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.** · 09/02/2011, 18h20

Tout ça :

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

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

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** · 09/02/2011, 22h13

*_* 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.** · 10/02/2011, 20h48

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

Dom et jquery

jQuery

Discussions similaires

Partager

Partager