Come selezionare i componenti JSF usando jQuery?

Sto cercando di implementare jQuery con i componenti PrimeFaces e JSF, ma non funziona correttamente. Quando ho provato a fare lo stesso con i tag HTML, funziona correttamente.

Ecco il codice con i tag HTML che funziona correttamente con jQuery:

   

con

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

Ecco il codice con PrimeFaces / JSF che non funziona correttamente con jQuery:

 

con

 $("#rad").change(function() { if ($("#rad:checked").val() == "one") { $("#p2").hide(); } else { $("#p2").show(); } }); 

Dovresti capire che jQuery funziona con l’albero DOM HTML sul lato client. jQuery non funziona direttamente sui componenti JSF come hai scritto nel codice sorgente JSF, ma jQuery lavora direttamente con l’albero DOM HTML generato da quei componenti JSF. È necessario aprire la pagina in webbrowser e fare clic con il tasto destro del mouse e quindi su Visualizza sorgente . Vedrai che JSF antepone l’ID degli elementi di input HTML generati con gli ID di tutti i componenti principali di NamingContainer (come , , ecc.) Con : come carattere separatore predefinito. Quindi per esempio

   ... 

finirà nel codice HTML generato come

 
...

È necessario selezionare gli elementi esattamente da quell’ID invece. Il : è tuttavia un carattere speciale negli identificatori CSS che rappresentano uno pseudo-selettore. Per selezionare un elemento con a : nell’ID utilizzando i selettori CSS in jQuery, è necessario getElementById() l’escape tramite barra rovesciata o utilizzare il selettore di attributo [id=...] o semplicemente utilizzare il vecchio getElementById() :

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

Se viene visualizzata una parte j_idXXX autogenerata j_idXXX dove XXX rappresenta un numero incrementale, è necessario fornire al componente specifico un ID fisso, poiché il numero incrementale è dinamico ed è sobject a modifiche in base alla posizione fisica del componente nella struttura.


In alternativa, puoi anche solo usare un nome di class:

  

che finisce in HTML come

  

in modo che tu possa averlo

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

Ciò consente una migliore astrazione e riusabilità. Sicuramente quel tipo di elementi non sono unici . Solo gli elementi di layout principali come intestazione, menu, contenuto e piè di pagina sono davvero unici, ma a loro volta non NamingContainer già in NamingContainer .


Come un’altra alternativa, potresti semplicemente passare l’elemento HTML DOM stesso nella funzione:

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

Guarda anche:

  • Come posso conoscere l’id di un componente JSF in modo da poterlo usare in Javascript
  • Come utilizzare l’ID dell’elemento HTML generato da JSF con i due punti “:” nei selettori CSS?
  • Per impostazione predefinita, JSF genera ID inutilizzabili, che sono incompatibili con la parte css degli standard web
  • Integrazione di JavaScript nel componente composito JSF, in modo pulito

Puoi anche usare jQuery “Attribute Contains Selector” (ecco l’url http://api.jquery.com/attribute-contains-selector/ )

Ad esempio, se hai un

   

e vuoi fare qualcosa sul suo object puoi selezionarlo con

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

e se vuoi stampare il suo valore puoi farlo

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

Per conoscere il vero tag html dell’elemento puoi sempre guardare l’elemento html reale (in questo caso lo spinner è stato tradotto in input) usando firebug o ie strumenti di sviluppo o vista sorgente …

Daniel.

Se stai usando RichFaces puoi controllare rich:jQuery comonent. Permette di specificare l’ID lato server per il componente jQuery . Ad esempio, hai un componente con id server specificato, quindi puoi applicare qualsiasi roba relativa a jQuery in modo seguente: .

Per maggiori informazioni, si prega di controllare la duplicazione .

Spero che sia d’aiuto.

inserisci la descrizione dell'immagine qui guarda questo ti aiuterà quando seleziono esperienza = Sì, la mia finestra di dialogo che id è dlg3 è popup.e se il valore è No non si aprirà