Discussion :

[Federico_muy_bien]

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

[tusssss]

Essaye avec des parentNode.

[SpaceFrog]

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

[Bovino]

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 :

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

[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 )

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

1) Est ce normal ?
2) Comment palier à cela ?
3) Quel est le taux de compatibilité de tout ça ?

[SpaceFrog]

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

[Federico_muy_bien]

Ah, je me suis peut etre mal exprimé.

J'ai une div

Code html :

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

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 ?

[Bovino]

Quand tu mets

Code :

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

obj.innerHTML = ...

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

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

[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.

[SpaceFrog]

Non il faut juste inhiber le href ..

Code :

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

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

sinon le href est actif et la page est rechargée ...

[Bovino]

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 :

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

innerHTML += ...

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

[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.

[SpaceFrog]

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

Code :

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

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.

[Federico_muy_bien]

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

Merci