I have the following code which generates the radio button properly.
<c:forEach items="#{sampleController.modelVo.valuesList}" var="valueVo">
<p:selectOneRadio
id="pickedSdlp_#{valueVo.id}"
value="#{sampleController.selectedValue}"
layout="responsive"
columns="1"
converter="omnifaces.SelectItemsConverter" >
<f:selectItem
id="valueVo#{valueVo.id}"
itemLabel="#{valueVo.valueVoDesc}"
itemValue="#{valueVo}">
</f:selectItem>
</p:selectOneRadio>
<p:selectManyCheckbox
id="timeBlocks_#{valueVo.id}"
value="#{valueVo.timeId}"
layout="responsive"
columns="1">
<f:selectItems value="#{valueVo.subValueList}" var="valueVoTime" itemLabel="#{valueVoTime.from} #{valueVoTime.to}" itemValue="#{valueVoTime.id}" />
</p:selectManyCheckbox>
</c:forEach>
Is it possible to hide/show p:selectManyCheckbox based on the value selected? the value is actually based on voList.canShow == 'Y', if Y then show else hide it.
Radio buttons are dynamically created so not sure how to achieve this.
I am able to generate the following and highlighted the radio selected under each radio button check boxes are generated but how to hide/show them based on the radio value(ON/OFF):
Related
PrimeFaces p:selectOneMenu items has a property called noSelectionOption which is basicly selected when no option is selected.
I would like my p:selectOneMenu to look a bit different when a value is selected or not, but nothing in HTML change on the DOMElement of the p:selectOneMenu when the noSelectionOption option is selected or not.
Any idea ?
I don't see what you've missed, but the CSS class ui-noselection-option is applied to the list item (li) of the no select option. Tested with:
<p:selectOneMenu>
<f:selectItem itemValue="0" itemLabel="0" noSelectionOption="true"/>
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
</p:selectOneMenu>
This now leaves you with How do I override default PrimeFaces CSS with custom styles?
For example:
.ui-noselection-option {
color: red;
}
I'm trying to permanently show the p:tooltip in a PrimeFaces project I'm working on.
This is my current code:
<p:graphicImage id="testImg" name="/img/testImg.jpg" onclick="PF('info').show();" style="cursor: pointer"/>
<p:tooltip for="testImg" value="further information" position="right" />
<p:dialog widgetVar="info" modal="true" closeOnEscape="true" >
<h:outputText value="bla bla bla"/>
</p:dialog>
I tried this:
<p:tooltip for="testImg" value="further information" position="right" showEevent="permanent"/>
but it didn't work.
Is there any way to control the tooltip and have it permanently visible without having to mouse over or focus the controlling element?
As you have noticed, there is no show event called permanent. What you could do is controlling the tooltip with JavaScript using a widget variable. You can assign one for the tooltip using the widgetVar attribute. The tooltip widget has several functions, one of them is show() (to show the tooltip).
When the tooltip is shown there is a delay of 150 msec, so set that to 0 to immediately show the tooltip. To prevent the tooltip from being hidden, set the hideEvent to some non existing event (like none).
Putting it all together:
<h:panelGrid columns="3">
<h:outputText value="Permanent" />
<p:inputText id="permanent"
title="Permanent tooltip" />
<p:tooltip id="permanentTip"
for="permanent"
widgetVar="permanentTip"
showDelay="0"
hideEvent="none"/>
</h:panelGrid>
<script>
$(function(){
PF('permanentTip').show();
});
</script>
See also:
How can I get a PrimeFaces widgetVar function list?
I want to implement functionality like, when I'm selecting one radio button it has to show one text box otherwise it should be in the hidden state. I wrote code like this
<tr>
<th><label for="selection">Register as ::</label></th>
<td> <h:selectOneRadio id="selection" value="#{LoginBean.role}" label="Action" required="true">
<f:selectItem itemValue="Customer" itemLabel="Customer" />
<f:selectItem itemValue="Manager" itemLabel="Manager" />
<p:ajax process="console" update="#form" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<th><h:outputLabel value="Enter your Fee ::" rendered="#{LoginBean.role eq 'Manager'}"></h:outputLabel></th>
<td><h:inputText id="fee" value="#{LoginBean.fee}" rendered="#{LoginBean.role eq 'Manager'}" required="true" requiredMessage="Fee is required." class="form-control" a:placeholder="200.00" ></h:inputText></td>
</tr>
Here, If I select Manager radio button it should show the outputLabel and inputeText.
There are getter and setters in the Bean Class.
Is there anything wrong?
instead of the input row as in your code,
I would recommend you put it in another form with rendered="#{LoginBean.isManager }", take out both rendered in your h tag.
Duplicate this form without any child tag, this form comes with rendered="#{!LoginBean.isManager }"
In your Bean, declare new boolean isManager with getter setter.
As you process your radio choice form, Bean will set isManager to false or true based on your choice and render the form according to your isManager.
I used this way to quick add "Edit" form. It works without POSTBACK. I hope it works for you!
PS: You may only need to set rendered to tr tag instead of h tag.
I am working on a JSF page which has a dropdown based on selectOneMenu
<h:selectOneMenu id="speciality_unit" value="#{editCdc.selectedUnit}">
<f:selectItem itemValue="" itemLabel="Select Unit" />
<f:selectItems value="#{editCdc.listOfUnit}" />
</h:selectOneMenu>
The problem I am facing here is that whenever I select this dropdown, it shows the default option in the list along with other items. I.e. it shows "Select Unit" along with other units. I want to remove this "Select Unit" from the dropdown list. How I can do this?
Hide it using CSS.
<h:selectOneMenu ... styleClass="hideFirstOption">
select.hideFirstOption option:first-child {
display: none;
}
I encountered a problem on selectOneMenu component and the primefaces fileupload.
<h:outputLabel value="Categorie :" />
<p:selectOneMenu value="#{composantbean.selectedCategoryId}" required="true" >
<f:selectItem itemLabel="Select categorie" itemValue="" />
<f:selectItems value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" />
<p:ajax update="panlecart2" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
My problem is at the display.
the selectOneMenu is displayed but ItemLabel is hidden with a black color of my theme "trontastic"
and the file upload is not displayed.
This problem no longer exite when I work with explorer instead of chrome
or when I do
<p:commandButton value="Annuler" update="panel1" process="#this">
<p:resetInput target="panel1" />
</ p: commandButton>
I should do, please thank you in advance
when I chnage my methode like this
public String Ajouter(){
selcetitem=new Composant();
return "AjoutC?faces-redirect=true";
}
instead of this
public String Ajouter(){
selcetitem=new Composant();
return "AjoutC";
}
it works fine :)
I am not sure about the root cause but here is a temporary solution:
$(document).ready(function() {
$(document.getElementById('button')).click();
});
And this script execute your button:
<p:commandButton id="button"value="Annuler" update="panel1" process="#this" style="display:none;">
<p:resetInput target="panel1" />
</p:commandButton>
Try to give exact client id of the button inside javascript function. You can detect it via browser's settings.
About problem's itself; p:selectOneMenu showing the selected value inside of a label. I guess sth. overrides it's css, let give an id to your p:selectOneMenu(let say menu) and if it is exists inside of a form(let's say it's id is form). So you can try to change the css of that label via:
$(document.getElementById('form:menu_label')).css("width":150);
Or directly alter the css class which is .ui-selectonemenu label
Also to be able to avoid from view state bug ajax=false should be added into navigation button. Actually navigation should be done via links and their outcome property like here.