Comment utiliser un masque dans le champ de saisie en JSF 2 + RichFaces 4?

J'ai besoin d'avoir des masques dans mon champs de saisie dans mon formulaire.
J'essaie d'insérer le jQuery.js et jQuery.MaskedInput.js comme le montre le code ci-dessous:

<h:head>
    <h:outputScript name="jquery-1.6.4.min.js" library="javascript" />
    <h:outputScript name="jquery.maskedinput-1.3.js" library="javascript" />

    <script>
        jQuery(function($){
           $("#date").mask("99/99/9999");
           $("#phone").mask("(999) 999-9999");
           $("#tin").mask("99-9999999");
           $("#ssn").mask("999-99-9999");
       });
    </script>

    <title>TITLE</title>
</h:head>

<h:body>
     <h:form id="form">
        <h:inputText id= "date"  />
    </h:form>
</h:body>

Mais rien jusqu'à présent.

Mise à JOUR
Avec BalusC $("[id='form:phone']").mask("(99) 9999-9999"); il fonctionne très bien! (merci mec).
Mais j'ai besoin d'appliquer ce masque dans un datatable :

<script>
    jQuery(function($){
       $("input.phones").mask("(999) 999-9999");
   });
</script>

<title>TITLE</title>

 <h:form id="form">

   <h:panelGrid columns="3">
        <h:outputLabel for="phones" value="Telefone(s) :" />                
        <h:dataTable id="phones" value="#{profile.user.userPhones}" var="item">
            <h:column>
                <h:inputText id= "phone" value="#{item.phone}" />
            </h:column>
            <h:column>
                <h:commandButton value="Remove" action="#{profile.removePhone}"/>
            </h:column>
            <h:column>
                <rich:message id="m_phone" for="phone" />
            </h:column>
        </h:dataTable>
    <h:commandButton value="Add" action="#{profile.addPhone}"/>
   </h:panelGrid>    

</h:form>

Une idée ?

OriginalL'auteur Valter Silva | 2011-10-24

7

JavaScript/jQuery s'exécute dans le navigateur et fonctionne sur le DOM HTML arbre qui est généré par l'ACI et de l'envoyer au navigateur, il n'intercepte pas sur le JSF composant de l'arbre lui-même. Votre $("#date") sera de retour rien qu'il n'existe pas d'élément avec l'ID dans le HTML arborescence DOM. Ouvrez la page dans votre navigateur, faites un clic droit et l'Affichage de la Source. Vous verrez que c'est en fait généré <input id="form:date">, pas comme <input id="date">.

Vous devriez plutôt utiliser les sélecteurs suivants (à noter que : est un caractère illégal en CSS, et doit donc être échappé):
```
$("#form\\:date").mask("99/99/9999");
$("#form\\:phone").mask("(999) 999-9999");
$("#form\\:tin").mask("99-9999999");
$("#form\\:ssn").mask("999-99-9999");
```
ou, sans la nécessité pour une évasion:
```
$("[id='form:date']").mask("99/99/9999");
$("[id='form:phone']").mask("(999) 999-9999");
$("[id='form:tin']").mask("99-9999999");
$("[id='form:ssn']").mask("999-99-9999");
```
Ou, sinon, suffit de leur donner un nom de classe:
```
<h:inputText id="date" styleClass="date" />
<h:inputText id="phone" styleClass="phone" />
<h:inputText id="tin" styleClass="tin" />
<h:inputText id="ssn" styleClass="ssn" />
```
qui peut alors plus génériquement désignés de la manière suivante sans avoir besoin de jongler avec les Id de peut-être plusieurs champs d'entrée de même type dans la vue, comme à l'intérieur d'un <h:dataTable>:
```
$("input.date").mask("99/99/9999");
$("input.phone").mask("(999) 999-9999");
$("input.tin").mask("99-9999999");
$("input.ssn").mask("999-99-9999");
```
Balusc, j'ai suivi votre démarche et m'aider, merci mec. Mais j'essaie de comprendre l'identifiant généré par ma datatable à utiliser dans le jQuery masque, pourriez-vous svp m'aider ?
Ah, c'est à l'intérieur d'un datatable? Vous pouvez utiliser les extrémités-avec sélecteur de $("[id$=date]"), mais en utilisant une classe CSS est beaucoup mieux (lire: pas enclins à faire des erreurs) pour le cas où vous avez plusieurs d'entre eux maintenant.
Merci ! à l'aide de $("[id$= "date"]") vraiment résoudre mon problème. Vous avez dit d'utiliser le CSS, mais il n'y a pas d'attribut "class" in <h:inputText />, ne doivent pas être styleClass à la place ?
Oui, styleClass en effet.
pour la première fois-je vous aider , ayeeeeee! 😉 (au fait, vous avez beau les enfants, merci pour tout compagnon)

OriginalL'auteur BalusC

Utilisant JSF et RichFaces
J'ai réussi à résoudre le conflit masques comme ceci:

var $j = jQuery.noConflict();

window.onload = function () {
    $j(#{rich:element('parProcecessoNumProtocolo')}).mask('9999.999999/9999-99');
}

OriginalL'auteur erivanio

Vous devez vous connecter pour publier un commentaire.