How to preselect one radio button defaultly - jsf

When I run my application, "Single User" should be selected automatically.
<h:selectOneRadio onchange="showEmailDiv(this.id);" value="" id="emailValue" required="true">
<f:selectItem itemValue="Single" itemLabel="Single User" />
<f:selectItem itemValue="Multiple" itemLabel="Multiple User"/>
</h:selectOneRadio>
How can I preselect one radio button defaultly?

Set default value like this
<h:selectOneRadio onchange="showEmailDiv(this.id);" value="Single" id="emailValue" required="true">
<f:selectItem itemValue="Single" itemLabel="Single User" />
<f:selectItem itemValue="Multiple" itemLabel="Multiple User"/>
</h:selectOneRadio>
Note: you aren't binding this component with bean, not sure how would you use it

#ManagedBean
public class YourBean {
private String value = "Single User";
// getter & setter
}
And in your page
<h:selectOneRadio onchange="showEmailDiv(this.id);" value="#{yourBean.value}" id="emailValue" required="true">
<f:selectItem itemValue="Single" itemLabel="Single User" />
<f:selectItem itemValue="Multiple" itemLabel="Multiple User"/>
</h:selectOneRadio>

Related

h:selectOneMenu value is always null when submitting the form

I have a h:selectOneMenu which served me with no issues in the past but for some reason the value in searchResults.selectedCategories is always null when submitting the form.
The widget is inside a form. The backing bean has selectedCategories as a private String with accessor methods. I tried cleaning the project, closing down Eclipse, and republishing it to Tomcat. Nothing works. Any idea why?
This is the widget:
<h:selectOneMenu id="categoriesBoxSimple" value="#{searchResults.selectedCategories}" >
<f:selectItem itemLabel="Category 1" itemValue="283331" />
<f:selectItem itemLabel="Category 2" itemValue="281" />
<f:selectItem itemLabel="Category 3" itemValue="1115"/>
</h:selectOneMenu>
`Add`
<f:ajax listener="#{yourBean.ajaxChangeValue}" />
to h:selectOneMenu
<h:selectOneMenu value = "#{yourBean.numberValue}">
<f:selectItem itemValue="One" />
<f:selectItem itemValue="Two" />
<f:selectItem itemValue="Three" />
<f:ajax listener="#{yourBean.ajaxChangeValue}" />
</h:selectOneMenu>
YourBean.java
public void ajaxChangeValue(final AjaxBehaviorEvent event) {
// do something
}
//getter and setter of numberValue

Conditionally render other component when radiobutton is changed

I am trying to display a menu if a radiobutton is selected. I'm using the rendered attribute for this purpose.
Model:
private int type; // +getter+setter
View:
<h:selectOneRadio value="#{bean.type}">
<f:selectItem itemLabel="A" itemValue="1"/>
<f:selectItem itemLabel="B" itemValue="2"/>
</h:selectOneRadio>
<h:form id="formMention" rendered="#{bean.type == 1}">
<h:selectOneMenu ...>
<f:selectItems ... />
</h:selectOneMenu>
</h:form>
Nothing shows when I check A. How can I achieve this?
Normally, you'd grab ajax for this, but as you're apparently on dead JSF 1.x, which lacks ajax fanciness, you're resorted to "plain" HTML/JS as long as you don't want to introduce an ajax capable component library. One of the ways is just submitting the form outright on click of the radio button.
<h:form>
<h:selectOneRadio value="#{bean.type}" onclick="this.form.submit()">
<f:selectItem itemLabel="A" itemValue="1"/>
<f:selectItem itemLabel="B" itemValue="2"/>
</h:selectOneRadio>
</h:form>
<h:form id="formMention">
<h:selectOneMenu ... rendered="#{bean.type == 1}">
<f:selectItems ... />
</h:selectOneMenu>
</h:form>

Cannot click on selected Item when the value is null primefaces

I have a selectOneMenu, in my xhtml page, when i want to click in a selectItem with the itemValue is null, there is no effect, it shows the default selection
<p:selectOneMenu id="cout" style="width: 120px;" value="#{serviceManagedBean.selectedService.coutSmsCalc}">
<f:selectItem itemLabel="Sélectionnez une" itemValue="" />
<f:selectItem itemLabel="oui" itemValue="oui" />
<f:selectItem itemLabel="non" itemValue="" />
</p:selectOneMenu>
So, when i click in the itemLabel "non", it remains on "Sélectionnez une"
The selectOneMenu use itemValue to change the displayed value. So if your value is null like the default one, the action changeListener is not called. Try to change the itemValue by empty or other key.
Try this if the item value is a String
<f:selectItem itemLabel="Sélectionnez une" itemValue="{null}" />
<f:selectItem itemLabel="oui" itemValue="oui" />
<f:selectItem itemLabel="non" itemValue="non" />
Or try this if the item value is boolean
<f:selectItem itemLabel="Sélectionnez une" itemValue="{null}" />
<f:selectItem itemLabel="oui" itemValue="true" />
<f:selectItem itemLabel="non" itemValue="false" />

Fire AJAX for certain selectItem in selectOneMenu

I have following selectOneMenu
<p:selectOneMenu value="#{bean.value}">
<f:selectItem value="#{bean.item1}"/>
<f:selectItem value="#{bean.item2}"/>
<f:selectItem value="#{bean.item3}"/>
<p:ajax listener="#{bean.item3AjaxEvent}" update="fieldToUpdate"></p:ajax>
</p:selectOneMenu>
Now I want to do some AJAX action only when item3 is selected from selectOneMenu. Not for all the items. Is there any way of doing that?
Putting ajax tag will fire the event for all the select items. I don't want to generate unwanted ajax requests to server.
I would do it in this way.
xhtml
<p:selectOneMenu widgetVar="selectOneMenuWV"
onchange="checkItem()">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneMenu>
<p:remoteCommand name="myRemoteCommand"
actionListener="#{bean.item3AjaxEvent()}"
update="fieldToUpdate"/>
<script>
function checkItem() {
if(selectOneMenuWV.getSelectedValue() == 3) {
myRemoteCommand();
}
}
</script>
Hope this helps.

JSF/PrimeFaces selectOneMenu change view-id

I'm using JSF2 and PrimeFaces3. How can I write selectOneMenu that would invoke JSF navigation to redirect user to another page when he change option in menu?
Attach an ajax listener and let it navigate by NavigationHandler.
E.g.
<h:form>
<h:selectOneMenu value="#{navigator.outcome}">
<f:selectItem itemLabel="Select page..." />
<f:selectItem itemValue="page1" itemLabel="Page 1" />
<f:selectItem itemValue="page2" itemLabel="Page 2" />
<f:selectItem itemValue="page3" itemLabel="Page 3" />
<f:ajax listener="#{navigator.navigate}" />
</h:selectOneMenu>
</h:form>
(the above example expects page1.xhtml, page2.xhtml and page3.xhtml in the same context; you can even make it a <f:selectItems> instead)
with
private String outcome;
public void navigate() {
FacesContext context = FacesContext.getCurrentInstance();
NavigationHandler navigationHandler = context.getApplication().getNavigationHandler();
navigationHandler.handleNavigation(context, null, outcome + "?faces-redirect=true");
}
The ?faces-redirect=true is not necessary, but it effectively sends a redirect so that the URL in browser address bar will properly change which is better for user experience and bookmarkability of the pages.
You could have something like:
<p:selectOneMenu value="#{myBean.mySelectedPage}">
<f:selectItem itemValue="http://www.yahoo.com" itemLabel="yahoo" />
<f:selectItem itemValue="http://www.google.com" itemLabel="google" />
<f:selectItem itemValue="search.jsf" itemLabel="search" />
<p:ajax event="change" listener="#{myBean.myNavigationMethod}" />
</p:selectOneMenu>
and on your navigationMethod you have:
String myPage = mySelectedPage
FacesContext.getCurrentInstance().getExternalContext().redirect(myPage);
The first two selectItem are for a full url and the last one is for another page in your web application(be careful that the extension must be the one set in your web.xml - it could be .jsf, .xhtml, .htm etc)
Instead of using ajax navigation use the following:
<p:selectOneMenu value="#{navigator.outcome}" onchange="window.location =this.options[this.selectedIndex].value">
<f:selectItem itemLabel="Select page..." />
<f:selectItem itemValue="page1" itemLabel="Page 1" />
<f:selectItem itemValue="page2" itemLabel="Page 2" />
<f:selectItem itemValue="page3" itemLabel="Page 3" />
<p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>
This works even if the session times out.

Resources