con - ¿Cómo puedo saber el ID de un componente JSF para poder usarlo en Javascript?
jquery id primefaces (5)
Id se genera dinámicamente, por lo que debe definir los nombres de todos los elementos principales para evitar los identificadores j_id123-like.
Tenga en cuenta que si usa jQuery para seleccionar un elemento, entonces debe usar doble barra antes de los dos puntos:
jQuery("my-form-id//:my-text-input-block//:my-input-id")
en lugar de:
jQuery("my-form-id:my-text-input-block:my-input-id")
En el caso de Richfaces puede usar la expresión el en la página jsf:
#{rich:element(''native-jsf-input-id'')}
para seleccionar el elemento javascript, por ejemplo:
#{rich:element(''native-jsf-input-id'')}.value = "Enter something here";
Problema: a veces querrá acceder a un componente desde javascript con getElementById , pero los id se generan dinámicamente en JSF, por lo que necesita un método para obtener una identificación de objetos. A continuación respondo sobre cómo puedes hacer esto.
Pregunta Original: Quiero usar algún código como a continuación. ¿Cómo puedo hacer referencia al componente inputText JSF en mi Javascript?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>
Actualización : esta publicación identificadores de cliente en JSF2.0 analiza el uso de una técnica como:
<script type="javascript" >
function myFunc() {
alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
}
</script>
<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
Sugiere que el id atributo en el componente inputText crea un objeto al que se puede acceder con EL usando #{myInptTxtId} , en el ejemplo anterior. El artículo continúa getClientId() que JSF 2.0 agrega el método zero-argument getClientId() a la clase UIComponent . De este modo, permite el constructo #{myInptTxtId.clientId} sugerido anteriormente para obtener el ID generado real del componente.
Aunque en mis pruebas esto no funciona. ¿Alguien más puede confirmar / negar? Las respuestas sugeridas a continuación adolecen del inconveniente de que la técnica anterior no lo hace. Por lo tanto, sería bueno saber si la técnica anterior realmente funciona.
Necesita usar exactamente la ID como JSF ha asignado en la salida HTML generada. Haga clic con el botón derecho en la página en su navegador web y elija Ver origen . Ese es exactamente el código HTML que JS ve (ya sabes, JS se ejecuta en webbrowser e intercepta en el árbol HTML DOM).
Dado un
<h:form>
<h:inputText id="emailAddresses" ... />
Se verá algo como esto:
<form id="j_id0">
<input type="text" id="j_id0:emailAddress" ... />
Donde j_id0 es el ID generado del elemento HTML generado <form> .
Preferiría dar a todos los componentes JSF NamingContainer una id fija para que JSF no los NamingContainer . La <h:form> es una de ellas.
<h:form id="formId">
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
De esta forma, el formulario no obtendrá un ID autogenerado como j_id0 y el campo de entrada recibirá un ID fijo de formId:emailAddress . A continuación, puede simplemente hacer referencia como tal en JS.
var input = document.getElementById(''formId:emailAddress'');
A partir de ese punto, puede continuar usando el código JS como de costumbre. Por ejemplo, obtener valor a través de input.value .
Ver también:
Actualice según su actualización: usted no entendió el artículo del blog. La referencia especial #{component} refiere al componente actual donde se evalúa la expresión EL y esto funciona solo dentro de cualquiera de los atributos del componente en sí. Lo que quieras también se puede lograr de la siguiente manera:
var input = document.getElementById(''#{emailAddress.clientId}'');
con (tenga en cuenta el binding a la vista, no debe vincularlo a un bean)
<h:inputText binding="#{emailAddress}" />
pero eso es feo. Mejor utilice el siguiente enfoque en el que pasa el elemento DOM HTML generado como JavaScript this referencia a la función
<h:inputText onclick="show(this)" />
con
function show(input) {
alert(input.value);
}
Si está utilizando jQuery, puede incluso ir un paso más allá al abstraerlos utilizando una clase de estilo como interfaz de marcador
<h:inputText styleClass="someMarkerClass" />
con
$(document).on("click", ".someMarkerClass", function() {
var $input = $(this);
alert($input.val());
});
Puede ver el código fuente HTML cuando se genera y ver en qué está configurado el ID, para que pueda usarlo en su JavaScript. Como está en una forma, probablemente esté anteponiendo el ID del formulario.
Sé que esta no es la manera JSF, pero si quieres evitar el dolor de ID, puedes establecer una clase CSS especial para el selector. Solo asegúrese de usar un buen nombre para que cuando alguien lea el nombre de la clase, quede claro que se usó para este propósito.
<h:inputText id="emailAddresses" class="emailAddressesForSelector"...
En tu JavaScript:
jQuery(''.emailAddressesForSelector'');
Por supuesto, todavía tendría que administrar manualmente la exclusividad del nombre de clase. Creo que esto es mantenible siempre y cuando no uses esto en componentes reutilizables. En ese caso, podría generar los nombres de clase utilizando una convención.
Respuesta: Esta es la técnica con la que estoy más feliz. No requiere hacer demasiadas cosas extrañas para descubrir la identificación de un componente. Recuerde que el objetivo de esto es que pueda conocer la id de un componente desde cualquier lugar de su página, no solo desde el componente real en sí. Esta es la clave. Presiono un botón, inicio la función JavaScript y debería poder acceder a cualquier otro componente, no solo al que lo lanzó.
Esta solución no requiere ningún ''clic derecho'' y ve lo que es la identificación. Ese tipo de solución es frágil, ya que la identificación se genera dinámicamente y si cambio la página tendré que pasar por esa tontería cada vez.
Enlace el componente a un bean de respaldo.
Haga referencia al componente vinculado donde desee.
Así que aquí hay una muestra de cómo se puede hacer eso.
Supuestos: tengo una página * .xhtml (podría ser * .jsp) y he definido un bean de respaldo. También estoy usando JSF 2.0.
* .xhtml página
<script>
function myFunc() {
var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")
alert("The email address is: " + inputText.value );
}
</script>
<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
BackBean.java
UIInput emailAddyInputText;
Asegúrese de crear su getter / setter para esta propiedad también.