Difference between client id generated by component.clientId and p:component()

Question

I am trying to retrieve the client id of a h:panelGroup that is within a p:dataList.

I tried 2 approaches:

1.Using component.clientId e.g:

<h:panelGroup id="listItem">
    <h:outputText value="#{component.clientId}" />
</h:panelGroup>

2.Using p:component() e.g:

<h:panelGroup id="listItem">
    <h:outputText value="#{p:component('listItem')}" />
</h:panelGroup>

Please note that this panel group is within a datalist. Now, the client ids generates in both the cases is different. (1) does not have the value 'listItem' appended to the client id while (2) has the value 'listItem' in the generated clientId.

Also, the client id generated using (1) is different from that on the generated html component.

Could anyone shed some light on this issue as to why is this so ?

Superfluous

Please post real code. The #{component:clientId} is invalid. – Eliaeliades

Answer 1

The implicit EL object #{component} refers to the current component, which is in the case of

<h:outputText value="#{component.clientId}" />

the <h:outputText> itself!

If you intend to print the client ID of another component, then you need to bind the component instance to an unique variable in the view by binding, so that you can reference it anywhere else in the same view.

<h:panelGroup id="listItem" binding="#{listItem}">
    <h:outputText value="#{listItem.clientId}" />
</h:panelGroup>

See also:

• Implicit EL objects
• How does the 'binding' attribute work in JSF? When and how should it be used?

Eliaeliades

Thanks BalusC. I ended up using component.clientId. On a side note, I also observed that the binding attribute did not work for me. As I mentioned in my question, I have a panelGroup within a dataList and having a binding attribute for the panelGroup messed up the view (i.e. nothing in the panelGroup was rendered) – Superfluous

That may happen if it's not being bound to an unique variable as explicitly mentioned in the answer. The answer is complete as-is (note: no bean property!) and should work if you don't have a binding="#{listItem}" anywhere else in the view, also not in include files or composites and such. – Eliaeliades

Answer 2

There are two premises in my answer:

1. UIPanel class doesn't implement NamingContainer interface, thus, id of <h:panelGroup> won't end up in client id of its children;
2. #{component} resolves to the current component in which this variable is used.

In this light in the first snippet you're outputting client id of an <h:outputText>, that is the id of its naming container plus separator plus its autogenerated id (note that you mispaced : that should be . in your #{component:clientId}), and in the second snippet you use EL function p:component of PrimeFaces that searches the whole component tree for the component with id as specified in its parameter and returns client id of the found component.

So, you look for different components: <h:outputText> in the first case and <h:panelGroup> in the second case, and that explains the difference in results.

Under current setup the following expressions will yield identical results:

• #{component.parent.clientId} and
• #{p:component('listItem')}.

Sexism

The p:component() isn't a JSTL function, but an EL function. To understand what exactly JSTL is, read the introduction of stackoverflow.com/tags/jstl/info – Eliaeliades