Recuperer la div qui lance la fonction

Version imprimable

Bonjour à tous !

Je me mets au JS mais dur dur !
Je dois ajouter du contenu à une div qui n'a pad d'ID. Mais l'appel de la fonction pour rajouter ce contenu se fait depuis cette div donc ... j'aimerais recuperer la div qui lance la fonction. J'ai trouvé la fonction : window.event.srcElement mais je ne sais pas si elle est compatible avec les derniers navigateurs (IE7 =>) et comment l'utiliser.

exemple concret :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script language="javascript"> function lancer_fonction(){ div_a_modifier = recuperer la div qui a lancer la fonction ; div_a_modifier.innerHTML = "blabla" ; } </script> <div id="principal"> <div> <a href="#" onclick="lancer_fonction();" /> </div> <div> <a href="#" onclick="lancer_fonction();" /> </div> </div>
precision : je ne peux pas leur donner d'ID car elles sont crées dynamiquement et je ne vois pas quoi leur donner comme id ...

04/08/2010, 16h44
tusssss

Essaye avec des parentNode.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="javascript">
	function lancer_fonction(obj){
		div_a_modifier = obj.parentNode ;
		div_a_modifier.innerHTML = "blabla" ;
	}
</script>
 
<div id="principal">
 
	<div>	
		<a href="#" onclick="lancer_fonction(this);" >ici</a>
	</div>
 
	<div>	
		<a href="#" onclick="lancer_fonction(this);" >ou ici </a>
	</div>
</div>

Au passage a n'est pas une balise autofermante

Au cas où tes div ne soient pas nécessairement l'élément parent des liens, tu peux aussi affecter une classe (par exemple 'ajout') aux div créées dynamiquement puis reprendre la solution de Spaffy :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script language="javascript"> function lancer_fonction(obj){ while(obj.className != 'ajout'){ obj = obj.parentNode; } obj.innerHTML = "blabla" ; } </script> <div id="principal"> <div class="ajout"> <a href="#" onclick="lancer_fonction(this);" >ici</a> </div> <div class="ajout"> <a href="#" onclick="lancer_fonction(this);" >ou ici </a> </div> </div>

05/08/2010, 11h07
Federico_muy_bien

Salut !

OK magnifique !
Exactement ce que je voulais faire. Magnifique ce forum !
(oui des a autofermant ça sert pas a grand chose :mouarf:)

Derniere précision :

Dans mes div j'ai des select et des inputs. A chaque fois que je fais un innerHTML ça me remets tous les select et input à zero !! 8O

1) Est ce normal ?
2) Comment palier à cela ?
3) Quel est le taux de compatibilité de tout ça ?
05/08/2010, 11h11
SpaceFrog

innerHTML comme son nom l'indique est le code html contenu dans le div

Ah, je me suis peut etre mal exprimé.

J'ai une div
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="principal"> <div class="ajout"> <select><option>[...]</option></select> <input type="text" value="blabla" /> <a href="#" onclick="lancer_fonction(this);" >ici</a> </div> <div class="ajout"> <a href="#" onclick="lancer_fonction(this);" >ou ici </a> </div> </div>
Quand je lance la fonction innerHTML sur la 1ere div de class ajout pour y ajouter une div par exemple mon select et mon input sont réinitialisés :?
C'est bien ce que tu dis Space Frog ?

Pour récuperer un noeud frére plutot qu'un parent, j'utilise previousSibling. C'est assez compatible ?

05/08/2010, 11h33
Bovino

Quand tu mets

Code:

obj.innerHTML = ...

tu affectes à la propriété innerHTML un contenu, donc tu remplaces celui existant.

Citation:

Pour récuperer un noeud frére plutot qu'un parent, j'utilise previousSibling. C'est assez compatible ?

Non, pas trop : http://javascript.developpez.com/faq...M#DOMIEFirefox
05/08/2010, 11h42
Federico_muy_bien

OK
Donc il faut que je demer... pour à chaque fois ajouter dans une nouvelle div toute fraiche, si je veux pas perdre toutes mes données.

Sinon Bovino, si avec previousSibling je couple ta méthode de comparaison du nom de la classe, c'est bon ? Puisque apparement FF ajoute des noeuds mais vides. C'est la seule différence.
05/08/2010, 11h43
SpaceFrog

Non il faut juste inhiber le href ..

Code:

<a href="#" onclick="lancer_fonction(this);return false;" >ici</a>

sinon le href est actif et la page est rechargée ...
05/08/2010, 11h44
Bovino

Citation:

Envoyé par Federico_muy_bien

OK
Donc il faut que je demer... pour à chaque fois ajouter dans une nouvelle div toute fraiche, si je veux pas perdre toutes mes données.

Code:

innerHTML += ...

Citation:

Envoyé par Federico_muy_bien

Sinon Bovino, si avec previousSibling je couple ta méthode de comparaison du nom de la classe, c'est bon ?

Oui, comme ça, ce sera bon, ou alors en faisant un test sur le type du noeud ;)
05/08/2010, 17h09
Federico_muy_bien

OK
merci à vous deux !

Mais tous mes href sont désactivés et mes innerHTML sous la forme +=. Je vais faire en sorte d'utiliser innerHTML sur une nouvelle div à chaque fois.
Je teste je teste mais je m'embrouille un peu entre le Ajax, le HTML, le css, le php ...
Je vais reprendre tout ça à tête reposée.
:ccool:
05/08/2010, 20h00
SpaceFrog

que veux tu dire par href désactivé ????

Code:

href="#"

ne veut pad dire désactiver ...

il faut, si tu utilise le onclick d'une balise a, inhiber le href avec un return false à la fin du onclick.
06/08/2010, 09h24
Federico_muy_bien

:lol: je me disais aussi !
Alors je rajoute des "return false" là où il en manque et je vois le résultat ...

Merci
:pastaper: