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.
Related
I have this working button in a p:dataTable
<p:commandButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:commandButton>
It sets the selectedTx in the model so that I can do stuff with it in the dialog.
Now I want to add a new functionality to my button, so I chose a p:splitButton:
<p:splitButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update=":otherDialog" />
</p:splitButton>
When I use the new button, the selectedTx is not set. Only the first button works.
How to update my property in the model when the new button is clicked ?
The solution was to add the setPropertyActionListener inside of the menuitem (as Apostolos suggested), and the datatable needed to be updated (instead of only the dialog):
<p:splitButton update="datatable :dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update="datatable :otherDialog">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:menuitem>
</p:splitButton>
I have a templating search.xhtml page to accept user's search term on the page. After the user click the "Search!" button, the result will be displayed on the same page, below the search box, as shown in the simple code below.
search.xhtml:
<ui:define name="search">
<h:form id="wordForm">
<h:inputText id="word" value="#{wordController.word}" />
<h:commandButton id="search" value="Search!"
action="#{wordController.search}" />
</h:form>
</ui:define>
/*** From here to display the search results!!! ***/
<ui:define name="searchResult">
<h:outputText value="Search Results:"/>
<c:forEach items="#{wordController.wordInfoList}" var="wordInfo">
<h:outputText value="#{wordInfo.display}"
rendered="#{not empty wordInfo.display}" />
<ui:repeat value="#{wordInfo.relatedWords}" var="relatedInfo">
<h:outputLink value="index.xhtml">
<h:outputText value="#{relatedInfo}" />
<f:param name="relatedWord" value="#{relatedInfo}" />
</h:outputLink>
</ui:repeat>
</c:forEach>
/*Edit: Add a f:medatadata tag to accept the parameter "relatedWord" */
<f:metadata>
<f:viewParam id="related" name="relatedWord"
value="#{wordController.word}" />
<f:viewAction action="#{wordController.info()}" />
</f:metadata>
</ui:define>
The layout.xhtml inserts the search.xhtml to the page.
layout.xhtml:
<ui:fragment rendered="#{not empty wordController.word}">
<div id="searchResult">
<ui:insert name="searchResult">
</ui:insert>
</div>
</ui:fragment>
The problem is that, when the user visits the page, even before he clicks the "Search!" button, the search results will be always displayed together with teh search box, although the search result will be empty, except that the string "Search results: " is not empty.
How can I modify this so that before user performs a search, it will only display the search box. and only display the search results together with the search box after the user clicks the search button.
Thank you.
<p:overlayPanel appendToBody="true"
id="panel_l#{level.name.hashCode()}
f{filterTypeConfiguration.filterType.name.hashCode()}"
for="conrolForm_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}:
button_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}"
dynamic="true" >
...
and in overlayPanel I have:
<p:inputText value="#{filterTypeConfiguration.textToSearch}">
<p:ajax id="ajaxFilterSearch" event="keyup" update="overlayForm_l
#{level.name.hashCode()} f#{filterTypeConfiguration.filterType.name.hashCode()}
:select_l#{level.name.hashCode()}
f#{filterTypeConfiguration.filterType.name.hashCode()}"
</p:inputText>
I need clean data in inputText when overlayPanel is opening or closing.
I didn't use p:overlayPanel yet but I am able to trigger p:dialog diaglodReturn event like, I think it should be similar like this
<p:ajax event="dialogReturn" update="#form" listener="#{backing.refreshPage}" />
Or
Example from primefaces showcase, How about add action attribute for button?
<p:commandButton id="imageBtn" value="Basic" type="button" action="#{backing.refresh}" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>
i'm working in a web application with jsf and primefaces.
My code for the navBar looks as follow:
<p:layoutUnit position="north" >
<h:form>
<img src="resources/images/logo.png" alt="" />
<p:outputLabel value="Rechercher " style="font-size: large"/>
<p:inputText value="#{acount.searchWord}" required="true" requiredMessage="Le titre est requit"/>
<p:commandButton value="Go" action="#{acount.rechercherLivre(acount.searchWord)}" styleClass="btngo" />
<h:link outcome="main.xhtml" value="Accueil" style="margin-left: 400px;font-size: medium"/>
<h:link outcome="Contact.xhtml" value="Contact" style="font-size: medium"/>
<h:link outcome="Info.xhtml" value="Info" style="font-size: medium"/>
<h:link outcome="Login.xhtml" value="Login" style="font-size: medium" rendered="#{!acount.connected}" />
<h:link outcome="exe.xhtml" value="S'enregistrer" style="font-size: medium" rendered="#{!acount.connected}" />
<p:menuButton value="Panier #{shopingCart.produits.size()}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Afficher" action="#{shopingCart.afficherPanier()}"/>
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
<p:menuButton value="Options" rendered="#{acount.connected}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Compte" />
<p:menuitem value="Mes Commandes " />
<p:menuitem value="Se deconnecter" action="#{acount.doLogout()}" />
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
</h:form>
</p:layoutUnit>
And the image for this code is:
The problem is if i don't put anything in the imput text the action for the commandButton is not executed, also the action method in the menuButton are not executed if i don't put something in the inputText.
I can solve this problem with putting a form for each action method but my navbar got larger and it looks worth.
how can i solve this issues?
If you do not need to post any value to your bean by your commandButton then add process attribute to the commandButton. I think you are trying to leave some of the inputs blank and still send the request, but the problem is that one of them has the required attribute set to 'true'. Remove required attribute form your inputs and add process="#this" to your commandButton. I hope I am right.
I have a Dialog to input details. At the first time , InputText are empty.
But from the second input, InputText maintain the previous value.
This is my code :
<p:commandButton id="showDialogButton1" type="button" value="add" onclick="dlg1.show()" update="firstname1"/>
<p:dialog id="dialogAjout" header="add department" widgetVar="dlg1" resizable="false">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="firstname1" value="Libellé :" />
<p:inputText id="firstname1" value="#{departementBean.departement.libelleDepartement}" />
</h:panelGrid>
<p:commandButton id="submitButton1" value="Valider" oncomplete="dlg1.hide();" action="#{departementBean.addDept()}" update="tabView"/>
</p:dialog>
How can I resolve this, please !!
You can use this primefaces component:
http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
Regarding dialogs in general: don't put them inside forms.
Have this instead: <p:dialog><h:form>...
Regarding update="" values, if your appendToBody is true, put a colon in front of the id (that means it`s in another form).
You should use the following code:
<h:commandButton value="Reset" style="margin-right:20px;">
<p:ajax update="registrationForm" resetValues="true" />
</h:commandButton>
Add resetValues="true" to your commandButton
<p:commandButton resetValues="true" action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
modify you open button like this : open dialog in oncomplete and before that update it by adding its id to update attribute and add action method to do the server side logic to actually init the dialog fields (populate / reset)
<p:commandButton action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
b.t.w it looks like your dialog located inside your form together with your opening button , this is a "bad practice" move your dialog away from that form and place a new form inside the dialog , e.g <p:dialog><h:form> ...
I solved this question thus
<p:dialog header="myDialog" widgetVar="dlg1" minHeight="40">
<h:outputLabel for="fild1" value="Fill the field" />
<p:password id="fild1" value="#{myBean.attribute}" required="false" label="Field" redisplay="false" /><br />
<p:commandButton action="#{myBean.method()}" value="Send" oncomplete="dlg1.hide()" update="field1" />
</p:dialog>
When I used the attribute update="field1" of p:commandButton.
The value of field p:password will empty after submitting the form.
I tried do the suggestion of Dani but my attribute going empty when I submitted my form and not stayed empty after submit