Discussion :

[Unusual]

Bonjour,
Je ne suis pas trop utilisateur de javascript, mais j'en ai besoin pour pallier un manque du langage de développement que j'utilise...

Voici le code côté javascript...

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript">
	  
	  function DoInitStatut(aComposant, aValeurOrigine) 
      {
        var obj = document.getElementById(aComposant.id)
        if (obj)
        {
        	for (i=0; i < obj.length; i++)
			{
				if (obj.options[i].disabled == false)
			    {
					if (obj.options[i].value == aValeurOrigine)
					{
						obj.options[i].style.color  = 'black';
						// obj.options[i].style.fontWeight = 'normal';
					}
					else	
					{
						obj.options[i].style.color  = '#FF6A00';
						// obj.options[i].style.fontWeight = 'bold';
					}
				}
			}
		}
	  }	
      
      function DoRefreshOnChange(aComposant, aValeurOrigine) 
      {
	        var obj = document.getElementById(aComposant.id)
	        if (obj)
	        {
			var objetlien = obj.parentNode.parentNode;

			if (aComposant.value != aValeurOrigine)
		        {        	            	        	
		        	obj.style.color = '#FF6A00';
	    			if (objetlien)
			        {
			        	
			        	objetlien.style.display = 'inline';
			        }    	
		        }
		        else
		        {
		            obj.style.color  = 'black';		            
		            if (objetlien)
			        {
			        	objetlien.style.display = 'none';
			        }
		        }		        		        
	        }
      }
      
      function DoResetStatut(aComposant, aValeurOrigine) 
      {
      	
      }
 </script>

Le problème se situe en ligne 32 (en rouge ci-dessus) car je n'arrive pas à "atteindre" BlocLienContact ...en chemin relatif car en fait ceci est un extrait de champs colonnes d'une grille où tout ceci est répété...autrement dit, ces blocs sont dupliqués et le comportement est à avoir sur chaque enregistrement (i.e. chaque ligne)

Aevc la ligne, j'atteinds bien "BlocContact" qui est affiché dans mon alert, mais je voudrais atteindre "BlocLienContact" en dessous du bloc contact en question pour le cacher.

In fine, je veux afficher un bouton "undo" à côté de la liste déroulante (seulement si la valeur de liste est modifiée) et le cacher si la valeur est inchangée (ou redevient inchangée)...de même qu'actuellement je change la couleur du texte si la valeur de liste est changée ou pas.

Voici les objets du document...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
   <div id="BlocContact" >
      <div id="BlocListe" >
		  <apex:selectList size="1" id="ContactMAJGrille" value="{!c.ContactMAJGrille}" onfocus="DoInitStatut(this, '{!c.AtlContact.StatutContact__c}')" onchange="DoRefreshOnChange(this, '{!c.AtlContact.StatutContact__c}')"  >
		  <apex:selectOptions value="{!StatutsContactGrille}"></apex:selectOptions>	  
		  </apex:selectList>
	  </div>
	  <div id="BlocLienContact" style="display:none;">
		  <a id="Test" class="inlineEditUndoLink" title="Annuler" href="javascript:DoResetStatut(this, '{!c.AtlContact.StatutContact__c}')"  >
		  <img width="16px" height="16px" class="inlineEditUndo" alt="Annuler" src="/s.gif"></img>
		  </a>
	  </div>
  </div>

Voici un aperçu visuel pour mieux comprendre la problématique qui n'est pas d'accéder "bêtement" à un DIV unique et connu :



Quand je change de valeur dans une des listes déroulantes, je veux afficher un petit bouton undo en vis-à-vis comme pour les autres champs dans la capture.

Merci d'avance pour l'aide

[Bovino]

mais je voudrais atteindre "BlocLienContact"

Ben, rien de plus simple puisque "BlocLienContact" est un id :

Code :

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

document.getElementById('BlocLienContact');

Et au passage : le code serveur, on s'en balance, ce que l'on veut voir, c'est le code à partir duquel JavaScript travaille, c'est-à-dire le HTML généré !

[Bovino]

Tiens, j'avais pas fait attention à cette curiosité sémantique :

Code :

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

var obj = document.getElementById(aComposant.id)

[Unusual]

des "blocliencontact", j'en ai un pour chaque ligne de ma grille...je doute que le getElementById soit suffisamment doué pour me retourner celui qui est le plus proche ^^ enfin, celui qui est sur la même ligne...

[Unusual]

Tiens, j'avais pas fait attention à cette curiosité sémantique :

Code :

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

var obj = document.getElementById(aComposant.id)

Sous SalesForce, on peut définir une partie cliente "type".

Ainsi, "ContactMAJGrille" n'existe pas au moment de l'exécution, mais je passe le this en paramètre de ma méthode afin d'accèder à l'ID réel, il y a un nom à rallonge qui est obtenu car ces composants sont répétés x fois (c'est une grille)...Cela fait comme un pattern avec un compteur et le nom est généré "automatiquement"...d'où le :

Code :

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

var obj = document.getElementById(aComposant.id)

qui m'est nécessaire car le code doit être valable pour chaque occurrence de champs, donc pour chaque occurrence de liste...

[Auteur]

des "blocliencontact", j'en ai un pour chaque ligne de ma grille...je doute que le getElementById soit suffisamment doué pour me retourner celui qui est le plus proche ^^ enfin, celui qui est sur la même ligne...

grosse erreur ! La valeur d'un id doit être unique dans ta page !

[Bovino]

Cela fait comme un pattern avec un compteur et le nom est généré "automatiquement"...d'où le :

Code :

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

var obj = document.getElementById(aComposant.id)

qui m'est nécessaire car le code doit être valable pour chaque occurrence de champs, donc pour chaque occurrence de liste...

Ca ne changera rien au fait que quel que soit l'id,

Code :

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

var obj = document.getElementById(aComposant.id)

revient à dire

Code :

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

var obj = aComposant

et du coup, l'utilité de la variable obj est largement discutable...

[Unusual]

Code :

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

var obj = document.getElementById(aComposant.id)

marche très bien. Ceci me permet déjà de faire apparaître en une couleur modifiée une valeur ayant été changée dans une des listes déroulantes.
cf Capture ci-dessous, SalesForce génère un Id unique pour le select en question.



Avec

Code :

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

var objetlien = obj.parentNode.parentNode;

dans objetlien, je pointe bien sur LE "BlocContact" grand-parent de la liste, et je voudrais faire apparaître/disparaître (sous condition) LE BlocLienContact fils de CE BlocContact (autrement dit, le frère du BlockListe parent sur la capture.

C'est pour cela que je voudrais me servir du DOM pour atteindre "de façon relative" le BlockLienContact en question.

Y a-t-il un moyen de faire cela ?

[Auteur]

je vois du code javascript dans les événements il faut éviter ça autant que possible et tout mettre dans des fonctions.

[Unusual]

je vois du code javascript dans les événements il faut éviter ça autant que possible et tout mettre dans des fonctions.

Je te remercie pour la leçon de code ...mais ce code est dynamique et des paramètres sont susbtitués à la génération de page :

Tu remarqueras que dans le code que j'ai publié au début le code était :

Code :

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

onfocus="DoInitStatut(this, '{!c.AtlContact.StatutContact__c}')"

et est devenu à l'exécution, dans ce que tu as lu et pris comme sacrilège :

Code :

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

onfocus="DoInitStatut(this, 'a0K2000000947UiEAI')"

mais si je t'avais fourni une autre ligne le code aurait été par exemple :

Code :

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

onfocus="DoInitStatut(this, 'a0K20000009yKB0EAM')"

[Bovino]

Code :

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

var obj = document.getElementById(aComposant.id)

marche très bien.

J'ai jamais dit que ça marchait pas, j'ai juste dit que c'était inutile.
Pour info, aComposant est un élément HTML.
Tu récupères son identifiant avec aComposant.id.
Enfin, tu cherches à retrouver l'élément HTML ayant l'identifiant récupéré sur l'élément HTML (celui que tu cherches ) en utilisant getElementById()... Tu récupères donc aComposant.

Bref... commence déjà par corriger ton erreur d'identifiants dupliqués dans la page, suite à ça, il sera probablement plus facile de t'aider à résoudre ton problème...

[Unusual]

Pour le var obj = document.getElementById(aComposant.id)...au temps pour moi...

Pour ce qui est de la génération de la page, je ne la contrôle pas...pour une grille de ce type, on définit les colonnes ...les composants apex ont un id qui est retravaillé pour donner ce qui est montré (id unique)...les éléments autres sont juste dupliqués à l'identique pour chaque ligne de la grille.

N'y a-t-il pas moyen d'accéder de manière relative au div concerné ? J'ai essayé

Code :

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

1
2
3
4
 
var objetlien = aComposant.parentNode.nextSibling;
if (objetlien)
objetlien.style.display = 'inline';

mais cela ne marche pas...

[Unusual]

J'ai réussi à avoir des noms dynamiques pour les autres éléments...et que je saurais reconnaitre, le code donne :

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
 
<apex:column >
   <apex:facet name="header">
   <apex:commandLink action="{!DoFiltrer}" value="Statut {!IF(ExpressionTri=='StatutContact__r.Name',IF(DirectionTri='ASC','▼','▲'),'')}" rerender="TableContact" >
       <apex:param value="StatutContact__r.Name" name="column" assignTo="{!ExpressionTri}" ></apex:param>
   </apex:commandLink>
   </apex:facet>
   <div id="BlocContact_{!c.AtlContact.id}" >
      <div id="BlocListe_{!c.AtlContact.id}" >
		  <apex:selectList size="1" id="ContactMAJGrille" value="{!c.ContactMAJGrille}" onfocus="DoInitStatut(this, '{!c.AtlContact.StatutContact__c}')" onchange="DoRefreshOnChange(this, '{!c.AtlContact.StatutContact__c}', '{!c.AtlContact.id}')"  >
		  <apex:selectOptions value="{!StatutsContactGrille}"></apex:selectOptions>	  
		  </apex:selectList>
	  </div>
	  <div id="BlocLienContact_{!c.AtlContact.id}" style="display:block;visibility:hidden">
		  <a id="LienContact_{!c.AtlContact.id}" class="inlineEditUndoLink" title="Annuler" href="javascript:DoResetStatut(this, '{!c.AtlContact.StatutContact__c}')"  >
		  <img width="16px" height="16px" class="inlineEditUndo" alt="Annuler" src="/s.gif"></img>
		  </a>
	  </div>
  </div>
</apex:column>

et du coup, le javascript (plus propre, merci Bovino) permet de changer les attributs du bloc voulu :

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
 
function DoRefreshOnChange(aComposant, aValeurOrigine, aId) 
      {
	        if (aComposant)
	        {
			    var objetlien = document.getElementById('BlocLienContact_'+aId);
			    if (aComposant.value != aValeurOrigine)
		        {        	            	        	
		        	aComposant.style.color = '#FF6A00';	    			
	    			if (objetlien)
			        {			        	
			        	objetlien.style.display = 'inline';
			        	objetlien.style.visibility = 'visible';
			        }    	
		        }
		        else
		        {
		            aComposant.style.color  = 'black';		            
		            if (objetlien)
			        {
			        	objetlien.style.display = 'none';
			        	objetlien.style.visibility = 'hidden';
			        }
		        }		        		        
	        }
      }

Sous Firefox, avec firebug, on voit bien les attributs qui ont changé...mais visuellement, rien...

En fait, le DIV de la liste déroulante "BlocListe_{!c.AtlContact.id}" occupe toute la largeur de la cellule.

Comment peut-on faire en sorte qu'une place soit réservée au DIV "BlocLienContact_{!c.AtlContact.id}" voisin ?

[Unusual]

Nickel..J'ai réussi en remplaçant les DIV par des SPAN avec style="display:inline-block;" sur le bouton "UNDO" et sur le SPAN "BlocLienContact_{!c.AtlContact.id}" quand la valeur est modifiée par rapport à l'origine :

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
 
<apex:column >
   <apex:facet name="header">
   <apex:commandLink action="{!DoFiltrer}" value="Statut {!IF(ExpressionTri=='StatutContact__r.Name',IF(DirectionTri='ASC','▼','▲'),'')}" rerender="TableContact" >
       <apex:param value="StatutContact__r.Name" name="column" assignTo="{!ExpressionTri}" ></apex:param>
   </apex:commandLink>
   </apex:facet>
   <span id="BlocContact_{!c.AtlContact.id}" >
      <span id="BlocListe_{!c.AtlContact.id}">
		  <apex:selectList size="1" id="ContactMAJGrille" value="{!c.ContactMAJGrille}" onfocus="DoInitStatut(this, '{!c.AtlContact.StatutContact__c}')" onchange="DoRefreshOnChange(this, '{!c.AtlContact.StatutContact__c}', '{!c.AtlContact.id}')"  >
		  <apex:selectOptions value="{!StatutsContactGrille}"></apex:selectOptions>	  
		  </apex:selectList>
	  </span>
	  <span id="BlocLienContactFixe_{!c.AtlContact.id}" >	      
	      <span id="BlocLienContact_{!c.AtlContact.id}" style="visibility:hidden" >	      
		  <a id="LienContact_{!c.AtlContact.id}" class="inlineEditUndoLink" style="display:inline-block;" title="Annuler" href="javascript:DoResetStatut(this, '{!c.AtlContact.StatutContact__c}')"  >
		  <img width="16px" height="16px" class="inlineEditUndo" alt="Annuler" src="/s.gif"></img>
		  </a>
		  </span>
	  </span>
  </span>
</apex:column>

el en javascript :

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
27
28
 
function DoRefreshOnChange(aComposant, aValeurOrigine, aId) 
      {
	        if (aComposant)
	        {
			    var objetlien = document.getElementById('BlocLienContact_'+aId);
			    var objetlienfixe = document.getElementById('BlocLienContactFixe_'+aId);
 
			    if (aComposant.value != aValeurOrigine)
		        {        	            	        	
		        	aComposant.style.color = '#FF6A00';	    			
	    			if (objetlien)
			        {			        	
			        	objetlien.style.display = 'inline-block';
			        	objetlien.style.visibility = 'visible';
			        }  	
		        }
		        else
		        {
		            aComposant.style.color  = 'black';		            
		            if (objetlien)
			        {
			        	objetlien.style.display = 'none';
			        	objetlien.style.visibility = 'hidden';
			        }   
		        }		        		        
	        }
      }

reste plus qu'à écrire le code du "UNDO"