¿Cómo seleccionar componentes JSF usando jQuery?
jsf-2 primefaces (4)
Debe tener en cuenta que jQuery funciona con el árbol HTML DOM en el lado del cliente. jQuery no funciona directamente en los componentes JSF como lo ha escrito en el código fuente JSF, pero jQuery trabaja directamente con el árbol DOM HTML generado por esos componentes JSF. Debe abrir la página en navegador web, hacer clic con el botón derecho y luego Ver origen . Verá que JSF antepone el ID de los elementos de entrada HTML generados con los ID de todos los componentes principales de NamingContainer (como <h:form> , <h:dataTable> , etc.) con : como carácter separador predeterminado. Así por ejemplo
<h:form id="foo">
<p:selectManyCheckbox id="bar" />
...
terminará en HTML generado como
<form id="foo" name="foo">
<input type="checkbox" id="foo:bar" name="foo:bar" />
...
En su lugar, debe seleccionar los elementos exactamente por esa ID. El : es, sin embargo, un carácter especial en los identificadores CSS que representan un pseudo selector. Para seleccionar un elemento con un : en el ID usando los selectores de CSS en jQuery, debe escaparlo por barra invertida o usar el selector de atributo [id=...] o simplemente usar el antiguo getElementById() :
var $element1 = $("#foo//:bar");
// or
var $element2 = $("[id=''foo:bar'']");
// or
var $element3 = $(document.getElementById("foo:bar"));
Si ve una parte j_idXXX autogenerada en la ID donde XXX representa un número incremental, entonces debe darle una ID fija al componente en particular, porque el número incremental es dinámico y está sujeto a cambios dependiendo de la posición física del componente en el árbol.
Como alternativa, también puedes usar un nombre de clase:
<x:someInputComponent styleClass="someClassName" />
que termina en HTML como
<input type="..." class="someClassName" />
para que pueda obtenerlo como
var $elements = $(".someClassName");
Esto permite una mejor abstracción y reutilización. Sin duda, ese tipo de elementos no son únicos . Solo los elementos principales de diseño, como el encabezado, el menú, el contenido y el pie de página, son realmente únicos, pero a su vez ya no están en un NamingContainer .
Como otra alternativa más, puedes pasar el elemento HTML DOM a la función:
<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
var $element = $(element);
// ...
}
Ver también:
- ¿Cómo puedo saber el ID de un componente JSF para poder usarlo en Javascript?
- ¿Cómo usar el ID de elemento HTML generado JSF con dos puntos ":" en los selectores de CSS?
- De forma predeterminada, JSF genera identificadores inutilizables, que son incompatibles con css parte de los estándares web
- Integre JavaScript en el componente compuesto JSF, la manera limpia
Estoy tratando de implementar jQuery con los componentes PrimeFaces y JSF, pero no está funcionando correctamente. Cuando traté de hacer lo mismo con las etiquetas HTML, funciona correctamente.
Aquí está el código con etiquetas HTML que funciona correctamente con 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" />
con
$("#check2").change(function() {
if ($("#check2").is(":checked")) {
$("#p2").hide();
} else {
$("#p2").show();
}
});
Aquí está el código con PrimeFaces / JSF que no funciona correctamente con jQuery:
<p:selectManyCheckbox >
<f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>
con
$("#rad").change(function() {
if ($("#rad:checked").val() == "one") {
$("#p2").hide();
} else {
$("#p2").show();
}
});
Si usa RichFaces , puede verificar rich:jQuery comonent. Le permite especificar la identificación del lado del servidor para el componente jQuery . Por ejemplo, tiene un componente con un ID de servidor especificado, luego puede aplicar cualquier elemento relacionado con jQuery de la siguiente manera: <rich:jQuery selector="#<server-side-component-id>" query="find(''.some-child'').removeProp(''style'')"/> .
Para obtener más información, verifique la doumentation .
Espero eso ayude.
También puede usar el jQuery "Selector de contenido de atributos" (aquí está la URL http://api.jquery.com/attribute-contains-selector/ )
Por ejemplo, si tiene un
<p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/>
y desea hacer algo en su objeto, puede seleccionarlo con
jQuery(''input[id*="quantity"]'')
y si quieres imprimir su valor, puedes hacer esto
alert(jQuery(''input[id*="quantity"]'').val());
Para conocer la etiqueta html real del elemento siempre se puede ver el elemento html real (en este caso, spinner se tradujo en entrada) usando firebug o herramientas de desarrollador o ver fuente ...
Daniel.
