Domanda

Vorrei usare JavaScript per manipolare campi di input nascosti in una pagina JSF / Facelets. Quando la pagina viene caricata, devo impostare un campo nascosto sulla profondità del colore del client.

Dal mio facelet:

<body onload="setColorDepth(document.getElementById(?????);">

<h:form>
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

Quando JSF elabora la pagina, sta ovviamente cambiando gli ID degli elementi. Qual è il modo migliore per fare riferimento a questi elementi dal mio codice JavaScript?

È stato utile?

Soluzione

Ti consigliamo di impostare l'ID del modulo in modo da sapere di cosa si tratta. Quindi sarai in grado di costruire l'ID elemento effettivo.

<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">

<h:form id="myForm">
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

Se non si desidera impostare il campo ID del modulo, è possibile trovarlo in fase di esecuzione, in questo modo:

<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">

Altri suggerimenti

Visualizza l'origine html generata e osserva come jsf ha chiamato l'attributo id del tag.

Presto vedrai come funziona la convenzione di denominazione. Di solito è come FORMNAME: FIELDNAME

Puoi usare clientId del controllo come restituito da UIComponent.getClientId (FacesContext) . Vedi qui per un esempio codice.

Definisci una funzione findElement a livello globale e usala ovunque

function findElement(elementId) {
        if(document.getElementById(elementId)) return elementId;
        for(var  i = 0; i < document.forms.length; i++) {
            if(document.getElementById(document.forms[i].id + ':' + elementId)) {
                return document.forms[i].id + ':' + elementId;
            }
        }
        return null;
    }


    <body onload="setColorDepth(findElement('colorDepth'));">
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top