TOC

Comment obtenir un identifiant JSF via jQuery

Voir un exemple simple de JSF: 

<h:form id="signup-form">
    <h:inputText id="email" value="#{beanBean.email}"/>
</h:form>

Il va générer le code HTML suivant: 

<input id="signup-form:email" type="text"/>

Utilise le sélecteur jQuery pour obtenir l’identifiant du courrier électronique, mais a échoué. 

<script>
   jQuery(document).ready(function($) {

    $('#signup-form:email').checkEmailFormat();

   });
</script>

Solution

Il s’agit d’un problème bien connu pour intégrer JSF et jQuery - les deux-points «`: `» sont réservés au sélecteur jQuery. Pour utiliser jQuery seletor pour obtenir l’identifiant JSF, vous devez “** échapper” les deux points en plaçant deux barres obliques inverses devant celui-ci: 

<script>
   jQuery(document).ready(function($) {

    $('#signup-form\\:email').checkEmailFormat();

   });
</script>

Pour PrimeFaces

PrimeFaces est livré avec une fonction permettant d’échapper à l’identifiant JSF: 

<script>
   jQuery(document).ready(function($) {

    $(PrimeFaces.escapeClientId('signup-form:emil')).checkEmailFormat();

   });
</script>

Cette fonction PrimeFaces.escapeClientId provient de` primefaces.js`, passez en revue le code source. Il s’agit simplement d’une fonction wrapper js permettant de remplacer le signe deux-points «:» par l’ajout d’une double barre oblique inversée.

primefaces.js 

escapeClientId:function(a){return"#"+a.replace(/:/g,"\\:")}

P.S Testé avec PrimeFaces 3.3

Références

  1. jQuery selector

  2. http://docs.jquery.com/Frequent Asked Questions#How do I select an element by an ID that has characters used in CSS__notation.3F[How

puis-je sélectionner un élément par un ID qui a des caractères utilisés en CSS notation?]. http://www.tequilafish.com/2007/12/04/jquery-how-to-get-the-id-of-your-current-object/ [jQuery

jQuery]. jQuery, identifiants JSF et PrimeFaces

lien://tag/jquery/[jquery]lien://tag/jsf/[jsf] primefaces

Related