h:outputLabel and PrimeFaces components

[Oleg]

Hello,

h:outputLabel with "for" attribute renders a HTML label with "for". If user click on the label the corresponding component - input, checkbox, radio button, etc. gets focus or gets selected.

If we use PrimeFaces components like p:calendar, p:spinner, p:autoComplete, ... the rendered markup has following structure (using example of calendar):

Code: Select all

JSF
<h:outputLabel for="calendarID" value="..."/>
<p:calendar id="calendarID" .../>

HTML
<div id="calendarID" ...>
   <input id="calendarID_input" ...>
   <img .../>
</div>

The label ID points now to the div element and not to the input element which has an ID specified by renderer. A click on label has no effect. Not expected behavior in my opinion. If we write

Code: Select all

<h:outputLabel for="calendarID_input" value="..."/>
<p:calendar id="calendarID" .../>

renderer kit says "no component found for calendarID_input". Sure, there isn't such component.

The question is now would be not better to create UIInput, populate with data, add to the tree and let it render? The second better solution would be to render

Code: Select all

<div id="calendarID_container" ...>
   <input id="calendarID" ...>
   <img .../>
</div>

Input field should get the defined ID so that label works fine together with component specified in "for". At the moment using of outputLabel with some PrimeFaces components doesn't make sense.

What do you think?

[jfrank]

Did you ever come up with a solution to this?

[Oleg]

No, no solution until now. I don't use h:outputLabel with "problematic" PF components. I write simple h:outputText.

By the way, we had a similar problem with p:focus, but it was fixed by selector adjustment (first editable field). I guess, we need a new component p:outputLabel with an JavaScript based solution or PrimeFaces should do "problematic" components fit for h:outputLabel.

[cfr]

The problem still exists. Even the new components like p:selectBooleanCheckbox have a structure where the id of the input field is different to the primefaces component id. Is there a work around to select a chechbox with a click on the h:outputLabel? I would like to have a p:outputLabel component too.

[Oleg]

IMHO it's not a good idea to write p:outpuLabel with JavaScript. Heavy JS app for a lot of simple things is not good.

[djmj]

related to this post: viewtopic.php?f=3&t=17389&p=53294#p53294

I filed an issue for it which was marked as WontFix!

This is really a bad design issue since you can't know which element uses "_input", especially if you want to use javascript to access the input element. Now I always need to check the final html which component uses it and which not.

[cfr]

If someone else does not know how to combine the outputlabel with the checkbox, check out the following solution by using the widgetVar attribute of the checkbox.

Code: Select all

<p:selectBooleanCheckbox id="checkbox_id"
                                                immediate="true"
                                                value="#{myBean.parameter[myBean.const['MY_PARAMETER']].value}"
                                                widgetVar="checkbox_id">
</p:selectBooleanCheckbox>
<h:outputLabel onclick="checkbox_id.toggle()" for="checkbox_id"/>

[cagatay.civici]

Writing a p:outputLabel now to support advanced components like autocomplete, spinner and so on. No js included.

[martinbudden]

If someone else does not know how to combine the outputlabel with the checkbox, check out the following solution by using the widgetVar attribute of the checkbox.

Code: Select all

<p:selectBooleanCheckbox id="checkbox_id"
                                                immediate="true"
                                                value="#{myBean.parameter[myBean.const['MY_PARAMETER']].value}"
                                                widgetVar="checkbox_id">
</p:selectBooleanCheckbox>
<h:outputLabel onclick="checkbox_id.toggle()" for="checkbox_id"/>

Sorry but this doesn't work either. Does anyone know a solution which does work?

[kukeltje]

Please create a new topic