Navigation sur une page web et tableaux dynamiques
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:
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:
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:
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!
