¿Cómo seleccionar componentes JSF usando jQuery?

Debes darte cuenta de que jQuery funciona con el árbol HTML DOM en el lado del cliente. jQuery no funciona directamente en los componentes JSF como lo escribió en el código fuente de JSF, pero jQuery funciona directamente con el árbol HTML DOM generado por esos componentes JSF. Debe abrir la página en el navegador web, hacer clic derecho y luego Ver código fuente . Verá que JSF antepone el ID de los elementos de entrada HTML generados con los ID de todos NamingContainerlos componentes principales (como <h:form>, <h:dataTable>etc.) con :un 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 elementos exactamente con esa ID. Sin embargo, es :un carácter especial en los identificadores CSS que representa un pseudoselector. Para seleccionar un elemento con a :en el ID usando selectores CSS en jQuery, debe escapar mediante barra invertida o usar el [id=...]selector de atributos 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 j_idXXXpieza generada automáticamente en el ID que XXXrepresenta un número incremental, entonces debe darle al componente en particular un ID fijo, 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 puedas conseguirlo como

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

Esto permite una mejor abstracción y reutilización. Seguramente ese tipo de elementos no son únicos . Sólo los elementos principales del diseño, como el encabezado, el menú, el contenido y el pie de página, son realmente únicos, pero, a su vez, normalmente no están incluidos en ningún NamingContainerotro.

Como otra alternativa, puedes simplemente 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 la identificación de un componente JSF para poder usarlo en Javascript?
• ¿Cómo utilizar el ID de elemento HTML generado por JSF con dos puntos ":" en los selectores de CSS?
• De forma predeterminada, JSF genera ID inutilizables, que son incompatibles con la parte CSS de los estándares web.
• Integre JavaScript en un componente compuesto JSF, de forma limpia

Oct 28 '2011 10:10 BalusC