jsf - atributo - ¿Cómo funcionan los selectores de PrimeFaces en update="@(. MyClass)"?

update ajax jsf

Question

No entiendo cómo funcionan los selectores PrimeFaces ( PFS ).

<h:outputText value="#{bean.text1}" styleClass="myClass" />
<p:commandButton update="@(.myClass)" />

Puedo utilizarlo. Y creo que es una herramienta fantástica, aunque no siempre funciona para mí. .myClass es el selector jQuery del lado del cliente. ¿Cómo sabe JSF en el servidor qué actualizar?

Puedo entender cómo funcionan los selectores de ID JSF normales.

<h:outputText value="#{bean.text1}" id="textId" />
<p:commandButton update="textId" />

El ID de textId referencia a una ID de componente en el árbol de componentes como se define en el archivo XHTML en el lado del servidor. Entonces puedo entender cómo JSF encuentra el componente correcto.

Pero si usa selectores de primos, se utilizan los selectores jQuery del lado del cliente. ¿Cómo sabe JSF qué componente debe actualizarse? A veces tengo problemas con PFS. No parece funcionar siempre para mí. ¿Hay algo que debes tener en cuenta si estás usando PFS?

Answer 1

Probablemente ya sepas que PrimeFaces usa jQuery bajo las sábanas. Los selectores de PrimeFaces se basan en jQuery. Todo lo que especifique en @(...) se usará como selector jQuery en el árbol DOM HTML actual. Para cualquier elemento HTML encontrado, que tenga una ID, esta ID se utilizará finalmente en la update .

Básicamente, para una update="@(.myclass)" , PrimeFaces lo hará bajo las siguientes coberturas:

var $elements = $(".myclass");
var clientIds = [];

$.each($elements, function(index, element) {
    if (element.id) {
        clientIds.push(":" + element.id);
    }
});

var newUpdate = clientIds.join(" "); // This will be used as `update` instead.

Entonces, en caso de, por ejemplo

<h:form id="formId">
    <h:outputText id="output1" styleClass="myclass" ... />
    <h:outputText styleClass="myclass" ... />
    <h:outputText id="output3" styleClass="myclass" ... />
</h:form>

este botón de comando actualiza

<p:commandButton ... update="@(.myclass)" />

terminará exactamente con el mismo efecto que

<p:commandButton ... update=":formId:output1 :formId:output3" />

Tenga en cuenta que esto también funciona para ID autogenerados. Es decir, la <h:form id> no es obligatoria.

A veces tengo problemas con PFS. ¿Hay algo que debes tener en cuenta si estás usando PFS?

Puede suceder que haya seleccionado "demasiado" (por ejemplo, @(form) no selecciona el formulario actual, pero todas las formas, exactamente como $("form") en jQuery!), O que realmente no seleccionó nada (cuando el deseado El elemento HTML DOM no tiene realmente ID). Investigar identificaciones de elemento en el árbol HTML DOM y la carga de solicitud en el monitor de tráfico HTTP deberían dar pistas.

Los elementos deseados en el árbol HTML DOM deben tener una ID (autogenerada). El parámetro de solicitud javax.faces.partial.render en el monitor de tráfico HTTP debe contener los ID de cliente correctos. El atributo rendered del elemento en el árbol de componentes JSF debe evaluar true durante la actualización. Etcétera

En su ejemplo particular, el <h:outputText> no terminará en el resultado HTML generado con ningún ID. Asignarle una id debería resolver su problema con la actualización.

Entonces, este ejemplo no funcionará

<h:form>
    <h:outputText value="#{bean.text1}" styleClass="myClass" />
    <p:commandButton value="Update" update="@(.myClass)" /> 
</h:form>

pero este ejemplo funcionará (tenga en cuenta que la asignación de un ID no es necesaria):

<h:form>
    <h:outputText id="myText" value="#{bean.text1}" styleClass="myClass" />
    <p:commandButton value="Update" update="@(.myClass)" /> 
</h:form>