i do this the radio button is diplying vertical, I want to display vertically.
<p:selectOneRadio id="operation" value="#{tradingMobileBean.selectedOperation}">
<f:selectItems value="#{tradingMobileBean.listOperation}" />
<p:ajax event="change" process="#this" listener="#{tradingMobileBean.operationChangeListner()}" update="stockname" />
</p:selectOneRadio>
Add layout attribute with value pageDirection which will give the vertical layout. The default value is lineDirection which gives you the horizontal layout.
<p:selectOneRadio layout="pageDirection" id="operation" value="#{tradingMobileBean.selectedOperation}">
<f:selectItems value="#{tradingMobileBean.listOperation}" />
<p:ajax event="change" process="#this" listener="#{tradingMobileBean.operationChangeListner()}" update="stockname" />
</p:selectOneRadio>
Related
I try to show a pop-up calendar in a overlaypanel, but when I click in the associated input box the calendar is displayed behind the overlaypanel and i cannot see the header of the calendar. Here is my code:
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" dismissable="false" for="advancedSearch" hideEffect="fade" my="right top" dynamic="true">
<h:form>
<h:panelGrid>
<!--<p:inputText
value="#{searchForm.processSubject}"></p:inputText>-->
<p:outputLabel value="Pesquisa:" for="type"/>
<h:selectOneMenu id="type" value="#{searchForm.type}">
<f:selectItems value="#{searchForm.listProcessTypes}"/>
</h:selectOneMenu>
<p:inputText value="#{searchForm.processNumber}"></p:inputText>
<p:calendar id="datetime" pattern="MM/dd/yyyy HH:mm:ss" />
<p:commandButton value="Submit" action="#{searchForm.save}"></p:commandButton>
</h:panelGrid>
</h:form>
</p:overlayPanel>
Any Idea?
I solved the problem by setting
dismissable = "false"
Use p:overlay's appendToBody="true".
Hi guys I have a few radio buttons that I want vertical, but I can only seem to get the horizontal.
Currently my code is:
<p:panelGrid columns="1">
<p:selectOneRadio id="options" value="{formBean.number}">
<f:selectItem itemLabel="0 - 19" itemValue="1" />
<!-- Add in the help button by the side of each item once its lined up, use a grid ?
<p:button icon="ui-icon-help" title="Help">
</p:button> -->
<f:selectItem itemLabel="20 - 39" itemValue="2" />
<f:selectItem itemLabel="40 - 49" itemValue="4" />
<f:selectItem itemLabel="50 - 59" itemValue="5" />
<f:selectItem itemLabel="60 - 69" itemValue="6" />
<f:selectItem itemLabel="70 - 79" itemValue="7" />
<f:selectItem itemLabel="80 - 100" itemValue="8" />
</p:selectOneRadio>
</p:panelGrid>
How can I change it from horizontal to vertical, I have tried the grid way but still the same.
Thanks guys
EDIT
i have now achieved what i set out :
<p:panelGrid columns="1">
<p:selectOneRadio id="options" value="{formBean.number}" layout="grid" columns="1" required = "True"
requiredMessage="#{bundle.requiredGender}">
<f:selectItem itemLabel="0 - 19" itemValue="1" />
<f:selectItem itemLabel="20 - 39" itemValue="2" />
<f:selectItem itemLabel="40 - 49" itemValue="4" />
<f:selectItem itemLabel="50 - 59" itemValue="5" />
<f:selectItem itemLabel="60 - 69" itemValue="6" />
<f:selectItem itemLabel="70 - 79" itemValue="7" />
<f:selectItem itemLabel="80 - 100" itemValue="8" />
</p:selectOneRadio>
</p:panelGrid>
only issue is now the grid is the size of the page, any way this can be aligned to left and made only the size of the labes ?
Use the layout attribute on p:selectOneRadio with value pageDirection.
Here are possible values for layout:
lineDirection - For Horizontal Direction
pageDirection - For Vertical direction.
grid - For a grid pattern
pageDirection - For Vertical direction.
responsive - For dynamically using the space provided
custom - For custom Layout.
Example
I met a problem for two days. nowhere I advance
my problem is to make a dynamic content in a panel according to the selected element in the list p: selectOneMenu
<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="panl" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
<p:panel id="panl" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" >
<h:panelGrid id="panlecart" columns="2" cellpadding="5" rendered="true">
<c:forEach items="#{composantbean.categorie.proprietes}" var="var">
<h:outputText value="#{var.nomProp}"/>
<h:inputText value="" />
</c:forEach>
</h:panelGrid>
</p:panel>
content appears this is true but unfortunately it is not synchronized is displayed shift
but if I use another <p: selectOneMenu id = "panel" content is displayed and synchronized
Haw can I fixe my prblem .Please and thank you in advance
As Lucas said, it is a bad idea using c:foreach (and all kind of JSTL) in JSF, especially with ajax.
Here are references you should read, to know more about JSTL in JSF:
JSTL in JSF2 Facelets... makes sense?
https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat
Using ui:repeat in h:panelGrid is not recommended also. You may read the discussion here.
So, IMHO, you should try another approach, such as using dataTable, as stated in above link.
Or, you could use html's table tag (<table>) as replacement of h:panelGrid, with html's tr and td tag inside ui:repeat. For example:
<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="panl" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
<p:panel id="panl" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" >
<table>
<ui:repeat value="#{composantbean.categorie.proprietes}" var="var">
<tr>
<td><h:outputText value="#{var.nomProp}" /></td>
<td><h:inputText value="" /></td>
</tr>
</ui:repeat>
</table>
</p:panel>
I have simple flow of 3 tabs. I have tested the Simple tabview example on showcase.
But When I change the first tab with my content, I can't switch to other tabs.
Kindly guide me with what is wrong that needs to be changed.
Earlier I was using Wizard but I had the same tab change problem there as clicking on next was taking me to the last tab everytime.
and Now facing other issue with Tabview
I am posting the code:
<h:form id="compositionmaster">
<p:tabView id="tabView">
<p:tab id="tab1" title="Committee Details">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Committee Type: " />
<p:selectOneMenu id="type" value="#{userWizard.comm.committeeType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="New" itemValue="1" />
<f:selectItem itemLabel="Existing" itemValue="2" />
</p:selectOneMenu>
<h:outputText value="Concerned Division: " />
<p:selectOneMenu id="division" value="#{userWizard.comm.committeeSubType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="Administration" itemValue="1"/>
<f:selectItem itemLabel="Finance" itemValue="2" />
<f:selectItem itemLabel="Marketing" itemValue="3" />
<f:selectItem itemLabel="Others" itemValue="4" />
</p:selectOneMenu>
<h:outputText value="Committee Name: " />
<p:inputText value="#{userWizard.comm.committeeName}" maxlength="100"/>
<h:outputText value="Subject: " />
<p:inputText value="#{userWizard.comm.committeeSubject}" maxlength="100" />
<h:outputText value="Description: " />
<p:inputText value="#{userWizard.comm.committeeDescription}" maxlength="500" />
<h:outputText value="Tenure of Committee: " />
<p:panelGrid columns="2" >
<p:inplace id="Tenure" label="From">
<p:calendar value="#{userWizard.comm.startDate}" id="start" showOn="button" />
</p:inplace>
<p:inplace label="To">
<p:calendar value="#{userWizard.comm.endDate}" id="end" showOn="button" />
</p:inplace>
</p:panelGrid>
<h:outputText value="Add Document: " />
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" mode="advanced" update="messages" multiple="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|doc|pdf)$/"/>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab2Text" value="stature grows."/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab3Text" value="After a promise that his family would one day be completely legitimate."/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
Don't use nested forms
HTML doesn't allow nested forms, so you shouldn't use them in primefaces either.They can cause undesired behavior.
See: other stackoverflow questions, or a nice collection of things to avoid in JSF: here (note point 2)
This is the only problem I see in your code. Other than that in rare cases you might have problems if using ajax and not processing the whole form. But as I can see this is not the case in your code.
I am working on webflow 2.3.1, primefaces 3.4.2 project.
As you see, i tried to update selectOneMenu according to parent city as shown at example from primefaces showcase. However i used p:remoteCommand to call webflow action.
At remoteCommand , if i set process="#this, subSelectOneMenu", action did not call . But if i did not set "process",it called action but it also give error for captcha which is empty.
How can i use remoteCommand to call action partially?
<h:form id="signUpUserInfo">
<p:panelGrid id="grid" columns="2">
<p:selectOneMenu id="citySelectOneMenu" value="#{userBean.address.cityId}" label="#{label.address_city}" onchange="selectionChanged()">
<f:selectItem itemValue="" itemLabel="" />
<f:selectItems value="#{flowScope.cityList}" />
</p:selectOneMenu >
<p:selectOneMenu id="subSelectOneMenu"
value="#{userBean.address.subId}" label="#{label.address_sub}">
<f:selectItem itemValue="" itemLabel="" />
<f:selectItems value="#{flowScope.subList}" />
</p:selectOneMenu>
<p:captcha id="captcha" label="Captcha" language="en" theme="white" required="true" secure="true" />
<f:facet name="footer">
<p:commandButton id="save" value="#{label.save_button}" ajax="false"
action="signUpStandartMember" update="signUpUserInfo" />
</f:facet>
</p:panelGrid>
<p:remoteCommand id="selectionChanged" name="selectionChanged" action="cityChangedAction" update="subSelectOneMenu" process="#this, subSelectOneMenu" />
</h:form>