Discussion :

[Aurelienjjj]

Bonjour

je travaille sur un client (techno Primeface) sur lequel je dois ajouter une navigation utilisant les flèches clavier.
Jusque là, j'utilisais un petit script qui fonctionnait bien. Et là, le soucis: le déplacement ne fonctionne pas sur certains écrans, dans des cas bien spécifiques:

- Quand on affiche des colonnes supplémentaires à un tableau (mais la navigation redevient fonctionnel après un F5)
- Quand on bascule d'un panel à un autre

J'imagine que cela vient du fait que l'appel javascript n'arrive pas à gérer les dernières modifications de la page, cependant je ne trouve pas de solution à mon problème (d'autant que je n'ai pas d'expérience en Js ).

Le code JS que j'utilise:

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
 
		<script>
		$(document).ready(function(){
			 $('input').keyup(function(e){
			  if(e.which==39)
			   $(this).closest('td').next().find('input').focus();
			  else if(e.which==37)
			   $(this).closest('td').prev().find('input').focus();
			  else if(e.which==40)
			   $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
			  else if(e.which==38)
			   $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
			 });
			});
</script>

Un exemple (rapide) de code qui pose problème

Code :

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

1
2
3
4
5
6
7
 
<p:panel id="premierPanel"closable="true" toggleable="true" toggleSpeed="0" closeSpeed="0" style="overflow:auto;overflow:visible;">
<TableauLambdaFonctionnant>				
</p:panel>
<p:panel id="secondPanel" closable="true" toggleable="true" toggleSpeed="0" closeSpeed="0" visible="false" style="overflow:visible;">
<MemeTableauLambdaNeFonctionnantPas>
</panel>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<Bouton Id="AjoutDeDonneesSupDansLeTableau">
						<p:dataTable value="#{MesValeurs}" autoUpdate="true" rowIndexVar="rowIndex"  >
							<p:columns columnIndexVar="index" var="columnNames"
								value="#{MesColonnes}" width="40" >
								<f:facet name="header">
									<h:outputText value="#{columnNames}" />
								</f:facet>
									<h:outputText value="#{row[index]}"
										rendered="#{(getRendered(index,rowIndex) and row[index] != '-1')}" />
									<h:outputText value="" rendered="#{row[index] == '-1'}" />
									<p:inputText value="#{row[index]}" 	rendered="#{(!getRendered(index,rowIndex))}"immediate="true"/>
							</p:columns>
						</p:dataTable>

Techno: Javascript, Primeface 2.0

Je suis assez dubitatif sur comment résoudre ce soucis, si une ame charitable pouvait me pointer du doigt ou je fais de la merde, ou une solution fonctionnel, ça serait génial!

[SpaceFrog]

les éléments ajoutés dynamiquement n'heritent pas des évènement attribués de façon, simple sur le ready ...

il faut passer par on() avec 3 paramètre ou délégate...

[Aurelienjjj]

J'ai trouvé

Je suis passé par l’intermédiaire d'un OnKeyDown(), et ça a bien fonctionné (j'avais déjà essayé avec OnKeyPress, mais "oups", ça n'existe pas dans primefaces, et donc forcément, rien n'était déclenché).

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>
function moveOnDoc(){				 
				 $('input').keyup(function(e){
					 console.log( "Handler for .keypress() called." );
				  if(e.which==39)
				   $(this).closest('td').next().find('input').focus();
				  else if(e.which==37)
				   $(this).closest('td').prev().find('input').focus();
				  else if(e.which==40)
				   $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
				  else if(e.which==38)
				   $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
				 });
			 }
</script>
<h:form onkeydown="moveOnDoc();">

Et ça passe. C'est pas très propre, mais Whatever!
Merci en tout cas.