Unable to style p:selectBooleanButton as normal button

[Oleg]

Task: Change the button text on click without AJAX and do some JavaScript operation.

Solution: Use p:selectBooleanButton

Problem: How to show p:selectBooleanButton as a normal button for two states? This code

Code: Select all

<p:selectBooleanButton value="true" onLabel="Show advanced search" offLabel="Hide advanced search"
                                    onchange="$(this).parent().removeClass('ui-state-hover ui-state-active'); myWidget.toggle()"/>

doesn't work because PrimeFaces checks "ui-state-active" class to identify Yes / No button state. The result: only onLabel is shown.

This code works

Code: Select all

<p:selectBooleanButton value="true" onLabel="Show advanced search" offLabel="Hide advanced search"
                                    onchange="$(this).parent().removeClass('ui-state-hover'); myWidget.toggle()"/>

but onLabel is always shown highlighted (active).

Any suggestions? I think PrimeFaces should save current state (Yes / No) in JS DOM object (e.g. via jQuery's data(...) on checkbox). Instead this CSS classes are checked. It's valid for the most PrimeFaces components. Do we need an issue, Cagatay? Workarounds are welcome. Using p:commandButton with type="button" is not desired because it needs JavaScript logic to change button text on click.

[Oleg]

This is actually a good recipe for the PrimeFaces Cookbook. But I can't see any simple solutions at the moment.

[Hamsterbau]

I do not know exactly what you want, but perhaps SplitButton can help. Looks like a button and has different possible actions.
In my opionion, the intention of selectBooleanButton (having a choice) is not really what you want - if i understand you right you want some kind of a "toggle button" with a set of possible actions?

Although it would be nice to have at least the ability to change styling of a selectBooleanButton

[Oleg]

"Toogle button" sounds good. What we need is a "toogle button" changing text on toogle. <p:toogleButton ... attributes like for normal button ... firstLabel="..." secondLabel="..."/>. I would take p:selectBooleanButton, but it looks different for both (yes / no) states. An additional attr. for styling p:selectBooleanButton as a normal button would be great and would solve this issue.

[Oleg]

Actually an example is here http://fractalsoft.net/primeext-showcas ... atures.jsf Instead of writing "Show / hide advanced search" I would define firstLabel="Show advanced search" and secondLabel="Hide advanced search". Every click on button toggles text.

[eziz]

Thanks.

[Oleg]

Thanks.

For what?

[Hamsterbau]

But in this case you should also have a button icon for different button states like fristIcon, secondIcon

[Oleg]

Good idea. Not sure if it will be implemented in PrimeFaces.