Come posso conoscere l’id di un componente JSF in modo da poterlo usare in Javascript

Problema: a volte vorrete accedere a un componente da javascript con getElementById , ma gli ID vengono generati dynamicmente in JSF, quindi è necessario un metodo per ottenere l’id di un object. Rispondo di seguito su come puoi farlo.


Domanda originale: voglio usare un codice come di seguito. Come posso fare riferimento al componente JSF di inputText nel mio Javascript?

   Input Name Page  function myFunc() { // how can I get the contents of the inputText component below alert("Your email address is: " + document.getElementById("emailAddress").value); }      Please enter your email address:

Aggiornamento : questo post ID cliente in JSF2.0 discute utilizzando una tecnica come:

  function myFunc() { alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value); }    

Suggerendo che l’ id dell’attributo sul componente inputText crei un object a cui è ansible accedere con EL utilizzando #{myInptTxtId} , nell’esempio precedente. L’articolo prosegue affermando che JSF 2.0 aggiunge il metodo getClientId() all’argomento zero alla class UIComponent . Consentendo in tal modo il costrutto #{myInptTxtId.clientId} suggerito sopra per ottenere l’ID generato effettivo del componente.

Anche se nei miei test questo non funziona. Qualcun’altro può confermare / negare. Le risposte suggerite di seguito soffrono di inconveniente che la tecnica di cui sopra non lo fa. Quindi sarebbe bene sapere se la tecnica sopra funziona davvero.

È necessario utilizzare esattamente l’ID come JSF ha assegnato nell’output HTML generato. Fai clic con il pulsante destro sulla pagina nel browser Web e seleziona Visualizza sorgente . Questo è esattamente il codice HTML che JS vede (sai, JS viene eseguito in webbrowser e intercetta su albero DOM HTML).

Dato a

   

Assomiglierà a qualcosa del genere:

 

Dove j_id0 è l’ID generato dell’elemento HTML

generato.

Preferisci dare a tutti i componenti di NamingContainer JSF un id fisso in modo che JSF non li autogenera. è uno di questi.

   

In questo modo il form non otterrà un ID autogenerato come j_id0 e il campo di input otterrà un ID fisso di formId:emailAddress . Puoi quindi semplicemente fare riferimento come tale in JS.

 var input = document.getElementById('formId:emailAddress'); 

Da quel momento in poi puoi continuare ad usare il codice JS come al solito. Ad esempio, ottenere valore tramite input.value .

Guarda anche:

  • Come selezionare i componenti JSF usando jQuery?

Aggiornamento come da aggiornamento: hai frainteso l’articolo del blog. Il riferimento speciale #{component} si riferisce al componente corrente in cui è stata valutata l’espressione EL e questo funziona solo all’interno di uno qualsiasi degli attributi del componente stesso. Qualunque cosa tu voglia, può anche essere ottenuta come segue:

 var input = document.getElementById('#{emailAddress.clientId}'); 

con (nota il binding alla vista, non dovresti assolutamente legarlo a un fagiolo)

  

ma questo è semplicemente brutto. Meglio usare il seguente approccio in cui si passa l’elemento HTML DOM generato come JavaScript this riferimento alla funzione

  

con

 function show(input) { alert(input.value); } 

Se stai usando jQuery, puoi anche fare un passo avanti astraggiandoli usando una class di stile come interfaccia marcatore

  

con

 $(document).on("click", ".someMarkerClass", function() { var $input = $(this); alert($input.val()); }); 

Risposta: Quindi questa è la tecnica con cui sono più felice. Non richiede di fare troppe cose strane per capire l’id di un componente. Ricorda che il punto è che puoi conoscere l’ id di un componente da qualsiasi punto della pagina, non solo dal componente stesso. Questa è la chiave. Premo un pulsante, lancio la funzione javascript e dovrebbe essere in grado di accedere a qualsiasi altro componente, non solo a quello che lo ha lanciato.

Questa soluzione non richiede alcun “clic con il tasto destro” e viene visualizzato l’ID. Quel tipo di soluzione è fragile, poiché l’id è generato dynamicmente e se cambio pagina dovrò passare attraverso quell’assurdità ogni volta.

  1. Associare il componente a un bean di supporto.

  2. Fai riferimento al componente associato dove vuoi.

Quindi ecco un esempio di come si può fare.

Presupposti: ho una pagina * .xhtml (potrebbe essere * .jsp) e ho definito un backing bean. Sto anche usando JSF 2.0.

* .xhtml pagina

    

BackBean.java

 UIInput emailAddyInputText; 

Assicurati di creare il tuo getter / setter anche per questa proprietà.

L’ID viene generato dynamicmente, quindi devi definire i nomi per tutti gli elementi genitore per evitare id simili a j_id123.

Nota che se usi jQuery per selezionare l’elemento, devi usare la doppia barra prima dei due punti:

  jQuery("my-form-id\\:my-text-input-block\\:my-input-id") 

invece di:

  jQuery("my-form-id:my-text-input-block:my-input-id") 

Nel caso di Richfaces puoi usare l’espressione el sulla pagina jsf:

  #{rich:element('native-jsf-input-id')} 

per selezionare l’elemento javascript, ad esempio:

  #{rich:element('native-jsf-input-id')}.value = "Enter something here"; 

So che questo non è il modo JSF, ma se si vuole evitare il dolore ID è ansible impostare una speciale class CSS per il selettore. Assicurati di usare un buon nome in modo che quando qualcuno legge il nome della class sia chiaro che è stato usato per questo scopo.

  

Nel tuo JavaScript:

 jQuery('.emailAddressesForSelector'); 

Ovviamente dovresti ancora gestire manualmente l'univocità del nome della class. Penso che questo sia mantenibile finché non lo usi in componenti riutilizzabili. In quel caso potresti generare i nomi delle classi usando una convenzione.

Puoi visualizzare il codice sorgente HTML quando viene generato e vedere a cosa è impostato l’ID, quindi puoi utilizzarlo nel tuo JavaScript. Dato che è in un modulo, è probabilmente in fase di preparazione l’id del modulo.