web-dev-qa-db-fra.com

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

J'essaie d'implémenter jQuery avec des composants PrimeFaces et JSF, mais cela ne fonctionne pas correctement. Lorsque j'ai essayé de faire de même avec les balises HTML, cela fonctionne correctement.

Voici le code avec des balises HTML qui fonctionne correctement avec jQuery:

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />

avec

$("#check2").change(function() {
    if ($("#check2").is(":checked")) {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }
});

Voici le code avec PrimeFaces/JSF qui ne fonctionne pas correctement avec jQuery:

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>

avec

$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }  
});
jqueryjsfjsf-2primefaces
40
Karthikeyan

Vous devez comprendre 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 qui est générée par ces composants JSF. Vous devez ouvrir la page dans le navigateur Web et faire un clic droit puis Voir la source. Vous verrez que JSF ajoute l'ID des éléments d'entrée HTML générés aux ID de tous les composants parents NamingContainer (tels que <h:form>, <h:dataTable>, etc) avec : comme caractère de séparation par défaut. Donc par exemple

<h:form id="foo">
    <p:selectManyCheckbox id="bar" />
    ...

se retrouvera dans le code HTML généré comme

<form id="foo" name="foo">
    <input type="checkbox" id="foo:bar" name="foo:bar" />
    ...

Vous devez sélectionner les éléments par exactement cet ID à la place. 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 un : Dans l'ID à l'aide de sélecteurs CSS dans jQuery, vous devez soit l'échapper par une barre oblique inverse, soit utiliser le sélecteur d'attribut [id=...] Ou simplement utiliser l'ancienne fonction getElementById():

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

Si vous voyez une partie j_idXXX Générée automatiquement dans l'ID où XXX représente un nombre incrémentiel, alors vous devez donner la un composant particulier un ID fixe, car le nombre incrémentiel est dynamique et peut être modifié en fonction de la position physique du composant dans l'arborescence.

Comme alternative, vous pouvez également simplement utiliser un nom de classe:

<x:someInputComponent styleClass="someClassName" />

qui finit en HTML comme

<input type="..." class="someClassName" />

afin que vous puissiez l'obtenir

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

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

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

<x:someComponent onclick="someFunction(this)" />

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

Voir également:

83
BalusC

Vous pouvez également utiliser le jQuery "Attribute Contains Selector" (voici l'url http://api.jquery.com/attribute-contains-selector/ )

Par exemple, si vous avez un

 <p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/>

et vous voulez faire quelque chose sur son objet, 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 vraie balise html de l'élément, vous pouvez toujours regarder l'élément html réel (dans ce cas, spinner a été traduit en entrée) en utilisant firebug ou c.-à-d. Des outils de développement ou voir la source ...

Daniel.

6
Daniel

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

<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>

Pour plus d'informations, veuillez vérifier doumentation .

J'espère que ça aide.

2
nndru