[JSF+JavaScript] javascript ne supporte pas l'ajax

Version imprimable

Bonjour tout le monde.

J'ai actuellement un fichier xhtml qui contient ceci:

Code:

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:

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:

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

08/04/2009, 21h41
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.
09/04/2009, 10h28
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 .
09/04/2009, 11h13
Sniper37
Citation:

Envoyé par 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 .

pas besoin de tous ce code illisible de javascript ;)
Code:

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..
09/04/2009, 11h30
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...
09/04/2009, 11h42
romaintaz

Citation:

Envoyé par 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.

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

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

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

09/04/2009, 11h51
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
09/04/2009, 12h09
romaintaz

M'est avis que cela doit merdouiller dans la gestion du this.value, et de son initialisation...
09/04/2009, 13h14
Sniper37

Citation:

Envoyé par 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...

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

Code:

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