Comment sélectionner des composants JSF à l’aide de jQuery?

Vous devez savoir que jQuery fonctionne avec l’arborescence DOM HTML du côté client. jQuery ne fonctionne pas directement sur les composants JSF comme vous l’avez écrit dans le code source JSF, mais jQuery fonctionne directement avec l’arborescence DOM HTML générée par ces composants JSF. Vous devez ouvrir la page dans le navigateur Web, cliquer avec le bouton droit de la souris, puis Afficher la source . Vous verrez que JSF ajoute à l’ID des éléments d’entrée HTML générés l’ID de tous les composants NamingContainer parent (tels que , , etc.) avec le caractère de séparation par défaut. Donc par exemple

   ... 

se retrouvera dans HTML généré comme

 
  ... 

Vous devez plutôt sélectionner les éléments avec exactement cet ID. Le : est cependant un caractère spécial dans les identifiants CSS représentant un pseudo sélecteur. Pour sélectionner un élément avec : dans l’ID à l’aide de sélecteurs CSS dans jQuery, vous devez soit y échapper par une barre oblique inverse, soit utiliser le sélecteur d’atsortingbut [id=...] , ou simplement utiliser l’ancien getElementById() :

 var $element1 = $("#foo\\:bar"); // or var $element2 = $("[id='foo:bar']"); // or var $element3 = $(document.getElementById("foo:bar")); 

Si vous voyez une pièce j_idXXX générée j_idXXX dans l’ID, où XXX représente un nombre incrémentiel, vous devez atsortingbuer un ID fixe au composant concerné, car le numéro incrémental est dynamic et peut être modifié en fonction de la position physique du composant dans l’arborescence.

Alternativement, vous pouvez simplement utiliser un nom de classe:

qui se termine en HTML

afin que vous puissiez l’obtenir comme

 var $elements = $(".someClassName"); 

Cela permet une meilleure abstraction et une meilleure réutilisabilité. Ce genre d’éléments n’est certainement pas unique . Seuls les éléments de présentation principaux tels que l’en-tête, le menu, le contenu et le pied de page sont vraiment uniques, mais ils ne figurent généralement pas déjà dans un NamingContainer .

Comme autre alternative, vous pouvez simplement passer l’élément HTML DOM lui-même dans la fonction:

 function someFunction(element) { var $element = $(element); // ... } 

Voir également:

• Comment connaître l’identifiant d’un composant JSF afin de pouvoir l’utiliser en Javascript
• Comment utiliser l’ID d’élément HTML généré par JSF avec deux-points “:” dans les sélecteurs CSS?
• Par défaut, JSF génère des identifiants inutilisables, incompatibles avec la partie css des standards Web.
• Intégrer JavaScript dans le composant composite JSF, de manière propre

Vous pouvez également utiliser le sélecteur jQuery “Atsortingbute Contains Selector” (voici l’url http://api.jquery.com/atsortingbute-contains-selector/ )

Par exemple, si vous avez un

et vous voulez faire quelque chose sur son object, vous pouvez le sélectionner avec

 jQuery('input[id*="quantity"]') 

et si vous voulez imprimer sa valeur, vous pouvez le faire

 alert(jQuery('input[id*="quantity"]').val()); 

Afin de connaître la balise html réelle de l’élément, vous pouvez toujours consulter l’élément html réel (dans ce cas, spinner a été traduit en entrée) à l’aide de firebug ou des outils de développement ou de voir la source …

Daniel.

Si vous utilisez RichFaces vous pouvez vérifier rich:jQuery comonent. Il vous permet de spécifier un identifiant côté serveur pour le composant jQuery . Par exemple, vous avez un composant avec l’ID serveur spécifié, vous pouvez ensuite appliquer n’importe quel élément lié à jQuery de la manière suivante: .

Pour plus d’informations, s’il vous plaît vérifier la doumentation .

J’espère que ça aide.

regardez cela vous aidera quand je sélectionnerai l’expérience = Oui ma boîte de dialog dont l’id est dlg3 est popup.et si la valeur est No, elle ne s’ouvrira pas