I am new to JSF and PrimeFaces. I wish to use on-screen keyboard in my login page for my JSF project and I found primefaces keyboard. When I press the enter button in the primefaces keyboard, it doesn't work.
Even if I added onkeypress="if (event.keyCode == 13) #{usersBean.login()};"
I tried to add in <h:form> and the <p:keyboard>. It only work for pressing the physical enter button but not the one in the primefaces keyboard.
Below is the sample of my login page that using the primefaces keyboard:
<f:view>
<h:form id="loginForm" onkeypress="if (event.keyCode == 13) #{usersBean.login()};">
<h2><h:outputText value="User Login"/></h2>
<h:panelGrid columns="2" style=" padding-top: 20px">
<h:outputLabel value="Email / ID:" for="userIdEmail" />
<h:inputText id="userIdEmail" value="#{usersBean.userIdEmail}" title="Email / ID" required="true" requiredMessage="The Email / ID field is required." style="width: 200px"/>
<h:outputLabel value="Password:" for="userPassword" />
<p:keyboard id="userPassword" value="#{usersBean.loginPassword}" title="UserPassword" showMode="button" password="true" style="width: 195px" />
</h:panelGrid>
<div>
<h:commandButton id="loginButton" value="Login" action="#{usersBean.login()}" binding="#{usersBean.loginButton}" style="margin-right: 5px"/>
<h:message for="loginButton" styleClass="errorStyle" style="text-align: center"/>
</div>
</h:form>
</f:view>
Anyone have any idea how to proceed to the login method after pressing the enter button in the primefaces keyboard?
Related
When I hit the edit button I need a dialog to show corresponding xhtml page. I mean when I press edit, editStudent.xhtml should appear in the dialog box. the xhtml page works fine, but i need to show it in pop-up not separate xhtml page. I tried to do it but it doesn't work. Here is the code i have written for dialog box when edit button is pressed. as you see i have used p:dialog for pop-up to appear. but when pressing edit button nothing happens and the dialog box does not appear.
studentsList.xhtml:
<h:column>
<f:facet name="header">Update</f:facet>
<h:commandButton action="#{studentBean.editStudentRecord(student.id)}" value="Edit" class="btn btn-primary" onclick="PF('dlg2').show();"/>
</h:column>
<h:column>
<f:facet name="header">Delete</f:facet>
<h:commandButton action="#{studentBean.deleteStudentRecord(student.id)}" value="Delete"
class="btn btn-danger" onclick="if (confirm('Are u sure?') == false)
return false;"/>
</h:column>
</h:dataTable>
<p:dialog header="Update" widgetVar="dlg2" modal="true" height="200" width="600" dir="ltr">
<h:form>
<h:panelGrid columns="4" cellpadding="4">
<h:outputLabel for="name" style="font-weight:bold"/>
<p:inputText name="name" id="Nameid" type="text" value="#{student.name}"
autocomplete="off"/>
<h:outputLabel for="password" style="font-weight:bold"/>
<p:inputText name="password" id="Passid" type="text" value="#{student.password}"
autocomplete="off"/>
<h:outputLabel for="gender" style="font-weight:bold"/>
<p:selectOneRadio value="#{student.gender}"/>
<h:commandButton action="#{studentBean.updateStudentDetails(student)}" value="Update" class="btn btn-primary" onclick="PF('dlg2').hide();"/>
</h:panelGrid>
</h:form>
</p:dialog>
Can somebody tell me what is wrong with the dialog box and why it doesn't appear?
So i have designed a simple form having selectOneListbox / selectManyMenu elements which I am using to generate a piece of text based upon the user selections.
It's working fine. Now what I want is when the user clicks 'clear' button, the selections should be undone and the page should come back to the initial state(no selections).
How can I achieve this ?
xhtml
<h:form>
<h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">Comment Type</h6>
<!-- comment type -->
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
</h:panelGrid>
<!-- Text Area -->
<p:inputTextarea id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
</p:inputTextarea>
<br/>
<p:commandButton id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:commandButton id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
</h:form>
In my bean, I have a clear method which clears the content of the textarea. I want this button to undo the selections as well as part of the ajax call.
public void clearText() {
this.decisionNotes=" ";
}
(for brevity I have included just 2 columns here in xhtml. There are in total 5 separate selection columns with same functionality)
I would simply reset the values of the Menu/Box in the bean method too:
public void clearText() {
this.decisionNotes=" ";
this.option1 = null;
//and so on...
}
Then you just need to update the components in the update attribute of your button. But I'd update the whole form instead of each component if you want to refresh nearly each component in the form. So just use update="#form":
Note: The default process value of p:commandButton is #form. So your clear button will process the whole form on every click altough it doesn't need to. I'd set it to process="#this", so it will just perform it's action.
I am designing a page technology using jsf 2.0 and primefaces. In my page I insert a prime faces calendar. When the user click on calendar to change the default date, a warning message shown which is a dialog box containing two command button. Now what I am trying to do is when the user click on cancel command button, the date should be changed back to the default date which was populated from the first time page when the page loaded. I wrote a java script but its not working.
<label>Date<label>
<p:calendar readonlyInput="true" widgetVar="calDate" yearRange="c-20:c+20" navigator="true" id="b1incomeeffectfrom#{incmStatus.index}" value="#{userDate.effectiveFrom}" pattern="dd/mm/yyyy">
<p:ajax event="dateSelect" oncomplete="checkForDefault(this);" global="false"/>
</p:calendar>
<p:dialog rendered="#{user.Lock}" widgetVar="dlg1" header="Warning" modal="true">
<h:panelGroup layout="block" styleClass="modal-dialog">
<h:panelGroup layout="block" styleClass="modal-content">
<h:panelGroup layout="block" styleClass="modal-body">
<div class="form-horizontal">
<h:panelGroup layout="block" styleClass="form-group">
<h:outputLabel styleClass="col-xs-8 control-label">Are you sure want to change?</h:outputLabel>
</h:panelGroup>
</div>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="modal-footer">
<p:commandButton value="Ok" type="button" styleClass="btn btn-primary" onclick="PF('dlg1').hide();PF('dlg2').show();" />
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary" onclick="resetDate();" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:dialog>
javascript
function resetDate(){
PF('dlg1').hide();
calDate.setDate(null);
}
Your calendar value is coming from your backing bean (userDate.effectiveFrom). You will have to change the value there to take effect
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary"
onsuccess="PF('dlg1').hide()" action="#{userDate.resetDate()}" update="calDate" />
class UserDate{
[..]
public void resetDate(){
this.effectiveFrom = initialDate;
}
[..]
}
I would like to display in a dialog the number inserted in the inputText.
<p:inputText id="nbr"
type="number"
value="#{MB.number}"
required="true"
label="nbr" />
<p:confirmDialog id="confirmPurchase"
message="Your Database was successfully created. And contains "
appendToBody="true"
header="Buy Emails List"
severity="info"
widgetVar="purchase">
<a class="boldtext">
#{MB.number}
<h5> datas</h5>
</a>
<p:commandButton id="confirm" value="Buy" actionListener="#{MB.buy())}" />
<p:commandButton id="decline"
value="Decline"
onclick="purchase.hide();"
type="button" />
</p:confirmDialog>
The code below returns always 0 as a number in the confirm dialog.
Update1
the dialog is showing once the action in the commandButton is completed
<p:commandButton value="Extract" update="table nbr" id="ajax" ajax="true" widgetVar="extractButton action="#{MB.search()}" oncomplete="purchase.show();"/>
First of all, you need a <h:form/> around your <p:inputText> and your <p:commandButton>.
Your <p:commandButton> should have the attribute update=":outputUserText".
Inside your Dialog, you need a <p:outputLabel id="outputUserText" value="#{MB.number}"
i am working on login page in which there is 2 input field user name and password and 2 submit button login and forgot password. All these 4 elements are in a form. I have applied validation for null input to user name password. If a user click on login without providing username and password it shows some primefaces message. Forgot password is a popup, which has also two field username and email, same blank alidation is also here. my problem is when i click on login witout providing any input, it popups the forgot password window along with username and password validation error.
Following is my code.
Thanks
Login Page
<h:form >
<p:panel id="panel" >
<p:focus context="panel"/>
<h:panelGrid >
<h:outputLabel for="firstname" value="#{app.username} : " style="font-weight:bold; font-size:12px;">
<h:outputLabel value="*" style="color:red; font-size:12px;"/></h:outputLabel>
<p:inputText id="firstname" required="true" label="Firstname" value="#{userManageBean.user.userName}" size="35" maxlength="10" requiredMessage="User Name is required."/>
<p:message for="firstname" />
<br/>
<h:outputLabel for="surname" value="#{app.paswrd} : " style="font-weight:bold; font-size:12px;">
<h:outputLabel value="*" style="color:red; font-size:12px;"/></h:outputLabel>
<p:inputText id="surname" required="true" label="#{app.paswrd}" value="#{userManageBean.user.password}" type="password" size="35" maxlength="10" requiredMessage="Password is Required" />
<p:message for="surname" />
<h:outputText value="#{userManageBean.message}" style="font-weight:bold; font-size:12px; color:red; "></h:outputText>
</h:panelGrid>
<br/>
<p:commandButton id="SubmitButton1" value="#{app.log_in}" action="#{userManageBean.submitLoginUser}" ajax="false" />
<p:commandButton value="#{app.forgotpwd}" onclick="dlg1.show();" ajax="false" />
</p:panel>
</h:form>
Pop up
<h:form>
<p:dialog header="#{app.forgotpwd}" widgetVar="dlg1" resizable="false" width="300" showEffect="clip" hideEffect="fold" modal="true" visible="#{facesContext.validationFailed}" >
<table>
<tr>
<td><h:outputText value="#{app.username} : "/> <h:outputText value="*" style="color:red; font-size:12px;"/></td>
<td> <p:inputText id="txt" value="#{forgetPwdBean.userID}" required="true" requiredMessage="User Name is Required" />
<p:message for="txt" ></p:message>
<!-- <p:tooltip for="txt" value="#{viewcontrollerBundle.username}" showEffect="fade" hideEffect="fade" /> -->
</td>
</tr>
<tr><td>
<h:outputText value="#{app.emp_id} : "/><h:outputText value="*" style="color:red; font-size:12px;"/></td>
<td> <p:inputText id="txt1" value="#{forgetPwdBean.emailID}" required="true" requiredMessage="Email is Required"/>
<p:message for="txt1"></p:message>
<!-- <p:tooltip for="txt1" value="#{viewcontrollerBundle.mailid}" showEffect="fade" hideEffect="fade" /> -->
</td>
</tr>
<tr><td><p:commandButton value="#{app.submit}" action="#{forgetPwdBean.forgetPassword}" ajax="false"/>
</td></tr>
</table>
</p:dialog>
</h:form>
The following code causes your dialog to popup whenever a validation of your form fails.
<p:dialog ... visible="#{facesContext.validationFailed}">
Edit (Why the dialog isnt shown without above code):
The underlying problem is that your commandButtons are non-ajax, so the page will be completly reloaded and you might only see the dialog for a split second
If you look into the primefaces showcase you can see that the button that use onclick="dlg.show()" use ajax:
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>