Getting null value when trying to use variable value for id attribute

[Colm McHugh]

I would like to use a variable value for the id of my components. That is, use:

<h:panelGrid id="unique_id_#{bean.value}" rendered="#{bean.boolValue}" >
<!-- stuff -->
</h:panelGrid>

instead of:
<h:panelGrid id="unique_id"

But, even though I can trace the call to bean.value, the value assigned to the id is: unique_id_

I'm expecting it to be something like unique_id_1123. Also If I try id="#{bean.value}" , the app server (Glassfish) gives error: javax.servlet.ServletException: Empty id attribute is not allowed

The other attributes in the component that use the bean behave as expected, such as the rendered attribute.
But, Im guessing, the id value is getting computed before bean is assigned. Are there any special rules about when id attribute values are evaluated?

Notes:
The h:panelGrid component is within a ui:repeat component, which assigns the bean from a list of Java beans.
I'm using JSF core, facelets, html as well as the primefaces component library.

Hope this is clear (??) Let me know if not, or if I can provide more detail.

And many thanks for any tips/advice.
Colm.

[Tim Holloway]

When in doubt, RTFM: http://download.oracle.com/javaee/5/javaserverfaces/1.2/docs/tlddocs/h/panelGrid.html

Notice that most of the attributes are of type " javax.el.ValueExpression ". That means that you can use EL expressions.

Unfortunately for you, id is "java.lang.String". Which means you're out of luck.

However, I have done something similar for Facelets included components. The EL processor for open text can construct IDs. The way I did it was to supply a param name/value as part of the ui:include. So instead of id="unique_id_#{bean.property}", I coded id="save_#{myparam}".

One thing you should consider, however. JSF works on the concept of naming containers. An h:form is a naming container, as is an h:datatable. At the JSF level, you can use the simple ID to reference objects within the naming container. At the JavaScript and CSS level, you have to use the fully-qualified id, which is the concatenated name of the object and its parents - for example: "form1:table_x:3:username". The "3" is the row index, so that each row object has a unique ID.

Cooking up IDs from symbolic expressions is rarely necessary.

[Colm McHugh]

Thanks Tim, that's really helpful. My motivation for using the variable in setting id name was to ensure the component had a unique id. But, based on naming containers, it sounds like that's not necessary, because, in the context of a loop, the ids for these panelGrid component(s) will be things like "form1:table_x:1:id", "form1:table_x:2:id", "form1:table_x:3:id", etc, and referring to the id in another component should resolve fine, as long as we're at the same container/scope:

<ui:repeat var="bean" values="#{controller.values}">
<h:panelGrid id="id" rendered="#{bean.boolValue}" >
<!-- stuff -->
</h:panelGrid>
</ui:repeat>

I'll test and see.

Thanks,
Colm.

[Colm McHugh]

I've managed to remove expression evaluation from my id attribute values, but there's one situation I think I need it...
I have a depedent field whose content values comes from two other fields. One of these other fields is in the same scope (loop iteration) so id can be resolved fine when updating it's content from that field, but the other field is in a different scope (loop iteration) so the question remains, how to update my dependent field content when that field value changes?

I've thought about forcing the user to make the dependent field visible after they have populated the two dependent-on fields (and disabling input to the two dependent-on fields to ensure that the user doesn't edit them again to ensure consistency with values in the dependent field). But that feels like it's complicating the architecture of the UI when what I want is to just have dependent field values automatically re-populated when either or both of the two dependent-on field values change... Anyone faced a similar issue before?

Thanks,
Colm.

[neelNilesh pal]

Colm McHugh wrote:Thanks Tim, that's really helpful. My motivation for using the variable in setting id name was to ensure the component had a unique id. But, based on naming containers, it sounds like that's not necessary, because, in the context of a loop, the ids for these panelGrid component(s) will be things like  "form1:table_x:1:id",  "form1:table_x:2:id", "form1:table_x:3:id", etc, and referring to the id in another component should resolve fine, as long as we're at the same container/scope:

  <ui:repeat var="bean" values="#{controller.values}">
    <h:panelGrid id="id" rendered="#{bean.boolValue}" >
            <!-- stuff -->
    </h:panelGrid>
 </ui:repeat>

I'll test and see.

Thanks,
Colm.

Hi Colm,

I have done the same as mentioned in this thread for getting unique Ids for the h:outputText tag in my Jsp page. However, I ran into another issue that the row Index is getting added twice. Could you please let me know what could be wrong here. Below is the code snippet.

<t:dataTable id="dataTable" value="#{documentList.documentList}" var="data" styleClass="dataTable" columnClasses="MWP100StatusCol,MWP100EffDateCol,MWP100DeptNoCol,MWP100WsNoCol,MWP100WorksheetTypeCol,MWP100PrcTypeDescCol,MWP100ReasonDescCol,MWP100StoreSelectedCol,MWP100EstDollarsCol,MWP100CreatedDateCol,MWP100CreatedByCol,MWP100SpecInstructCol,hiddenCol" rowOnClick="selectMultipleRowsRed(this)"  rowIndexVar="rowIndex" rendered="#{documentList.documentListRowCount > 0}" rowStyleClass="#{(data.currentRow) ? 'rowSelectedRed' : (data.selectedRow) ? 'rowSelected' : (rowIndex%2==0) ? 'rowEven' : 'rowOdd'}" > <h:column><h:outputText id="status" value="#{data.status}"  title="#{data.updateTimestamp}" /></h:column> <h:column><h:outputText id="effDate" value="#{data.effDate}" > <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText></h:column> <h:column><h:outputText id="deptNo" value="#{data.deptNo}" title="#{data.deptDesc}" /></h:column> <h:column><h:outputText id="worksheetNo" value="#{data.worksheetNo}" /></h:column> <h:column><h:outputText id="worksheetType" value="#{data.worksheetType}" /></h:column> <h:column><h:outputText id="priceTypeDesc" value="#{data.priceTypeDesc}" /></h:column> <h:column><h:outputText id="reasonDesc" value="#{data.reasonDesc}" style="text-transform: capitalize;" /></h:column> <h:column><h:outputText id="storeSelected" value="#{data.storeSelected}" /></h:column> <h:column><h:outputText id="estDollars" value="#{data.estDollars}" > <f:convertNumber pattern="$###,###,###" /> </h:outputText></h:column> <h:column><h:outputText id="createdDate" value="#{data.createdDate}" > <f:convertDateTime pattern="MM/dd/yy HH:mm" /> </h:outputText></h:column> <h:column><h:outputText id="createdBy" value="#{data.createdBy}" title="#{data.createdBy}" /></h:column> <h:column><h:outputText id="specInstruct" value="#{data.specInstruct}" style="text-transform: capitalize;" /></h:column> <h:column><h:inputText id="rowSelected" value="#{data.rowSelected}" /></h:column> </t:dataTable>

When I inspect the value in the browser, I see the ID attribute value comes as documentListForm:dataTable:1:1:status as a result of which the Javascripts are failing. Any help in this regards will be Highly helpful.

[Tim Holloway]

Welcome to the Ranch, NeelNilesh!

I've added formatting to your XML to make it more readable. The "Code" button on our message editor can be used to place special tags around code, data, and XML that preserve their formatting when you post.

I'm afraid I do not understand your problem. The ID you are referencing (documentListForm:dataTable:1:1:status ) uniquely defines the element based on its context:

Outer container: documentListForm (the h:form)
Table: dataTable (h:dataTable)
column ID: 1 (default, because there's no id on the h:column)
row ID: 1 (no JSF tag)
control ID: status (h:outputText)