i hava a register page and i need if i select item radio for example item one password required get true and if i select item two required get false
<p:selectOneRadio id="connection" value="#{UserBean.connection}" >
<f:selectItem itemValue="One" />
<f:selectItem itemValue="two" />
</p:selectOneRadio>
and i want something with this logic
<c:if test="#{UserBean.connection =='One'}" >
<p:password id="pwd" value="#{UserBean.pwd}" required="false" />
</c:if>
<c:if>
<p:password id="pwd" value="#{UserBean.pwd}" required="true" />
</c:if>
kind regards and thanks in advance :-)
Related
I make use of JSF , now I need to change the style of the radio buton by using plain HTML5 tag . How can I use the html tag to replace this
<h:selectOneRadio id="selectedAnswer" value="#{testBean.userAnswer}" layout="pageDirection">
<f:ajax event="change" execute="selectedAnswer" render="#none" />
<f:selectItems value="#{testBean.question.answers}" var="selectedAnswer" itemLabel="#{selectedAnswer.answer}" itemValue="#{selectedAnswer.id}" />
</h:selectOneRadio>
with this:
<ui:repeat var="selectedAnswer" value="#{testBean.question.answers}">
<label for="#{selectedAnswer.id}">
<input type="radio" id="#{selectedAnswer.id}" name="a-radio" value="#{selectedAnswer.id}" >
</input>
<span>#{selectedAnswer.answer}</span>
</label>
</ui:repeat>
How Can I set the value in the backing bean, in JSF you do this <h:selectOneRadio value="#{testBean.userAnswer}". in HTML what do you do?
I am using p:calendar Primefaces component for specifying 2 dates : start and end.
An evident control is to verify if end date is not before start date.
Is there a way to do it ?
I found the solution :
<p:outputLabel for="startDate" value="#{msg.StartDate}" />
<p:calendar id="startDate" value="#{employeeBean.employee.startDate}" required="true" pattern="dd-MM-yyyy" language="#{msg.CalendarLanguage}" mask="true"
requiredMessage="#{msg.required}">
<p:ajax event="dateSelect" update="endDate" />
</p:calendar>
<p:message for="startDate" />
<p:outputLabel for="endDate" value="#{msg.EndDate}" />
<p:calendar id="endDate" mindate="#{employeeBean.employee.startDate}" value="#{employeeBean.employee.endDate}" required="false" pattern="dd-MM-yyyy"
language="#{msg.CalendarLanguage}" mask="true">
</p:calendar>
<p:message for="endDate" />
I have the two text box(Using JSJ).
I have given txt box size as 50. It is working fine. Based on logic I have make one of the text to readonly disabled = true or disable = disabled. The read only text width is increasing its size.
When I inspect through f12,the size are showing 50 only,In inspect mode when i remove the
disable = disabled,it is reducing to actual size
I checked by the sample.
<h:inputText value="test" type="text" size="50">
</h:inputText>
<br/><br/>
<h:inputText value="tes1t" type="text" size="50" disabled="true">
</h:inputText>
I have pass the param to form as below :
Param
<ui:param name="validationMessageOnTheSameLine" value="true" />
<ui:param name="rowWidth" value="650px" />
<ui:param name="helpTextPaddingLeft" value="130px" />
<ui:param name="showAsterik" value="false" />
<ui:param name="showAsterikForUsername" value="false" />
<ui:param name="inputTextSize" value="50" />
<h:panelGrid columns="2" style="width: #{rowWidth}" id="emailValidated"
columnClasses="#{columnClass1}, #{columnClass2}">
<h:outputLabel value="#{uit.emailAddress}:" for="email">
<h:outputLabel styleClass="asterik" value="*"
rendered="#{showAsterik}" />
</h:outputLabel>
<h:panelGrid columns="2" styleClass="tableNoPadding">
<h:inputText value="#{userBean.emailAddress}" id="email"
styleClass="ux-margin-right-1t" size="#{inputTextSize}"
required="true" disabled="#{disableEmailInput}"
requiredMessage="#{uitkem.valueRequired}"
validatorMessage="#{uitkem.emailValidator}">
<f:validator validatorId="emailValidator" />
</h:inputText>
<rich:message for="email" />
</h:panelGrid>
</h:panelGrid>
Check that these <h:inputText> are enclosed in <h:form>.
Also, you don't need to add type="text" in <h:inputText>.
From my test environment (JSF 2.2), both these inputs have the same size when rendered.
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've got a login form that looks something like this, using RichFaces and Seam:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
</h:form>
I'd like to be able to allow the user to hit 'enter' and automatically submit the form to login. I've tried using Richfaces' <rich:hotKey /> feature, but I think I'm doing something wrong. The code I've put in looks like this:
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()" />
However, when I hit enter inside the form, nothing happens. Any idea what I'm doing wrong here?
I think you need to use selector property. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
Also, instead of submitting the form, you should click submit button. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginButton')}.click()"
selector="#loginForm"/>
Try the following code. I hope you can get some idea..
<body>
<h:form id="loginForm">
<h:outputLabel value="Username : " />
<h:inputText id="userNameId" value="#{Login.username}" />
<h:outputLabel value="Password : " />
<h:inputText id="passwordId" value="#{Login.password}" />
<a4j:commandButton id="loginButton" action="#{Login.loginButton}" value="Login" focus="button"/>
<rich:hotKey key="return"
selector="#userNameId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
<rich:hotKey key="return"
selector="#passwordId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
</h:form>
</body>
For all those still struggling with this issue, I've finally gotten something that works. My code now looks like this:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
</h:form>
You can also use a more specific selector so that an enter press only submits the form when the focus is on one of the form fields. Either way, this FINALLY solved my problem.