Discussion :

[sendoshi]

Bonjour tout le monde.

J'ai actuellement un fichier xhtml qui contient ceci:

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
 
<s:decorate id="typeAvenant" template="../layout/edit.xhtml">
            <ui:define name="selectOneMenu">
              <h:selectOneMenu id="listTypeAvenant" value="#{ecr_cta_a_1.monTypeAvenant}"
                converter="#{ecr_cta_a_1.avenantConverter}" styleClass="selectPolice">
                <f:selectItem itemLabel="" />
                <f:selectItems value="#{ecr_cta_a_1.avenantConverter.activeContent}" />
                <a4j:support event="onchange"
                  reRender="libelleDateEffetPanel,dateEffetPanel,libelleImmatriculationPanel,immatriculationPanel"></a4j:support>
              </h:selectOneMenu>
            </ui:define>
          </s:decorate>
 
(...)
 
<a4j:outputPanel id="dateEffetPanel" style="unQuart">
            <h:panelGroup >
              <s:decorate id="dateDebutEffet" template="../layout/edit.xhtml" styleClass="unQuart">
                <ui:define name="calendar">
                  <rich:calendar id="dateEffet" value="#{ecr_cta_a_1.dateEffet}" enableManualInput="true"
                    datePattern="#{messages['commons_datePattern']}" oninputkeyup="addSlashes()" rendered="#{ecr_cta_a_1.afficheDateEffet}">
                  </rich:calendar>
                </ui:define>
              </s:decorate>
            </h:panelGroup>
          </a4j:outputPanel>

Ainsi, typeAvenant définit l'apparition de dateEffet. Lorsque j'entre des données dans dateEffet, le js addSlashes() est appelé à partir d'un fichier global.js et affirme que

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
function addSlashes(e){ 
	var length = this.value.length;
	var keyId = (window.event) ? event.keyCode : e.keyCode;
	if(keyId !=8)//Backspace
	{
		if(2 == length || 5 == length) {
	    	this.value=this.value+"/";
 
	    } else if (length > 6) {
            // ajouter le siècle si la fin de la valeur est
            // / suivi de 2 chiffres suivi d'un nombre de blancs 
            var re = /\/\d{2}(\s)*$/;
            var result = re.exec(this.value);
 
            if (result != null) {
              this.value = this.value.substr(0,result.index+1) + "20" + this.value.substr(result.index+1,2);
            }
 
  	        if (length > 10) {
	    	   this.value = this.value.substring(0,10);
	        }
        }
    } 
}

Or, lorsque je sélectionne la bonne valeur qui va bien dans typeAvenant, de manière à afficher dateEffet,j'obtient un vilain

Code :

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

'this.value.length' a la valeur null ou n'est pas un objet

mais si je fait un refresh (F5) de ma page, le js fonctionne alors parfaitement.

J'avoue que ça me plonge dans des abimes de perplexité. Quelqu'un aurait-il
a) une explication à mais qu'est ce qui se passe donc
b) une solution à me proposer (sachant que je ne peux pas me permettre de déplacer le code contenu dans global.js)

Merci d'avance.

[Sniper37]

l'ajax c'est du javascript, la moindre des chose c'est qu'ils se supportent
tu peux expliquer ce que tu veux faire avec la fonction js..peu etre tu peux le faire dans passer par du code js.
si c'est convertir une date dans un format particulier..ou convertir une autre donnée tu peux le faire avec JSF.

[sendoshi]

Ben le but du js c'est effectivement de transformer le format de dates: l'utilisateur doit pouvoir entrer "01012010", relever le nez et voir sur son écran "01/01/2010". Pas trop standart donc, je doute de trouver un composant jsf qui le fasse .

[Sniper37]

Ben le but du js c'est effectivement de transformer le format de dates: l'utilisateur doit pouvoir entrer "01012010", relever le nez et voir sur son écran "01/01/2010". Pas trop standart donc, je doute de trouver un composant jsf qui le fasse .

pas besoin de tous ce code illisible de javascript

Code :

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

1
2
3
4
5
 
<h:inputText value="#{bean.date}" id="date">
<f:convertDateTime pattern="MMddyyyy" />
<a4j:support event="onkeyup" reRender="date"/>
</h:inputText>

ceci avec l'utilisation du converter standard, tu peux t'en créer à ta sauce si tu veux aussi..

[sendoshi]

Je viens de tester ta solution, résultat je perds le focus sur le champ dès que j'appuye sur une touche. Si je livre ça le chef de projet va venir me trouver avec un crochet de boucher.
De plus pour rester cohérent avec le projet je dois utiliser ce js, aussi incompréhensible soit il. Je vais essayer à la bourrin: faire rafraichir la page à la sélection sur le selectOneMenu. C'est moche mais...

[romaintaz]

Je viens de tester ta solution, résultat je perds le focus sur le champ dès que j'appuye sur une touche. Si je livre ça le chef de projet va venir me trouver avec un crochet de boucher.

L'event a utiliser est onchange plutôt que onkeyup !

[romaintaz]

Sinon, ton Javascript peut-être que tu peux essayer de faire ça :

Code :

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

1
2
3
4
5
6
7
function addSlashes(e){ 
    if (!this.value || !this.value.length) {
        return;
    }
    var length = this.value.length;
    ...
}

Ca t'évitera d'avoir l'erreur normalement...

[sendoshi]

certes ca m'evite l'erreur mais ça résoud pas le probleme, malheureusement. Et je ne comprend toujours pas pourquoi il perd son value quand on lui applique un rendered

[romaintaz]

M'est avis que cela doit merdouiller dans la gestion du this.value, et de son initialisation...

[Sniper37]

Je viens de tester ta solution, résultat je perds le focus sur le champ dès que j'appuye sur une touche. Si je livre ça le chef de projet va venir me trouver avec un crochet de boucher.
De plus pour rester cohérent avec le projet je dois utiliser ce js, aussi incompréhensible soit il. Je vais essayer à la bourrin: faire rafraichir la page à la sélection sur le selectOneMenu. C'est moche mais...

pour le focus, tu peux ajouter l'attribut focus :

Code :

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

<a4j:support focus='date"  .../>