What 's the best way to execute a commandButton on the onchange event of an inputText?
I'm trying to build a dynamic search result while user digit string.
<p:inputText id="txtSearch" value="#{contattiDitteController.search}">
</p:inputText>
<p:commandButton id="btnSearch" value="Search" action="#{contattiDitteController.actionSearch}" update="pnlResult"/>
I'm using this, but is the best way (or I can do better with primeface)?
<script>
function refresh() {
jQuery('[id$="btnSearch"]').click();
}
</script>
<p:inputText id="txtSearch" value="#{contattiDitteController.search}" onkeypress="refresh();"/>
<p:commandButton id="btnSearch" value="Search" action="#{contattiDitteController.actionSearch}" update="pnlResult"/>
Use <p:ajax>.
<p:inputText id="txtSearch" value="#{contattiDitteController.search}">
<p:ajax event="keyup" listener="#{contattiDitteController.actionSearch}" update="pnlResult" />
</p:inputText>
See also the showcase.
Related
I am working with primefaces 3.5 and jsf2.I have a command Button that shows up a dialog as a popup to register a new customer. All fields are required. when i submit the form with missing some fields the popup disappears as if nothing happened. And when i click again on the button new it shows up the last filled form with error messages.
I need this to be shown first time i submit when validation is failed.
Here is a short version of my html code
<h:form id="mainForm">
<p:panel id="datatablePanel">
.........
<p:commandButton style="width: 8%;height: 100%" id="newButton" value="New" oncomplete="customerDialogNew.show()" icon="ui-icon-star"/>
</p:panel>
</:form>
<h:form id="newCustomerForm">
<p:panel id="customerPannel">
<p:dialog draggable="true" header="New Customer" widgetVar="customerDialogNew" id="dialog2">
<p:panelGrid id="newCustomer" columns="6" >
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{customerMB.name}" title="Name" required="true" requiredMessage="The Name field is required."/>
<p:message for="name" />
......
<p:commandButton style="height: 100%;width: 15%" value="Cancel" update="customerPannel" icon="ui-icon-arrowrefresh-1-n" process="#this" oncomplete="customerDialogNew.show()" />
<p:commandButton ajax="false" style="height: 100%;width: 15%" value="Save" icon="ui-icon-circle-check" styleClass="ui-priority-primary" actionListener="{customerMB.addCustomer()}"/>
</p:dialog>
</p:panel>
</h:form>
Cancel Button：
Change oncomplete="customerDialogNew.show()" to
oncomplete="customerDialogNew.hide()".
Save Button：
Remove ajax=false.
Add update="newCustomer".
So your Buttons looks like:
<p:commandButton style="height: 100%;width: 15%" value="Cancel" update="customerPannel" icon="ui-icon-arrowrefresh-1-n" process="#this" oncomplete="customerDialogNew.hide()" />
<p:commandButton style="height: 100%;width: 15%" value="Save" icon="ui-icon-circle-check" styleClass="ui-priority-primary" actionListener="#{customerMB.addCustomer()}" update="newCustomer"/>
Backing Bean：
public void addCustomer(){
//do something
System.out.println(name+"");
//set name to null to prevent seeing old value when adding the second(or more) customer
name=null;
//Hide customerDialogNew if everything done.
RequestContext.getCurrentInstance().execute("customerDialogNew.hide()");
}
I have a code which is for a Registration Form. There are some fields and a Submit button of type <p:commandButton>.Now when I submit the button it shows a datatable under the form which renders the values of the input filed.
I want to clear the input text fields after the form submit. But the values remains.
How can I clear the values of the text fields of the form?
<p:panel header="Registration Form" closable="true" closeSpeed="100" toggleable="true" toggleSpeed="100" toggleOrientation="vertical">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="*First Name"/>
<p:inputText id="firstname" value="#{registrationDetails.firstName}" required="true" label="First Name" requiredMessage="First Name required!"/>
<p:outputLabel value="*Last Name"/>
<p:inputText id="lastname" value="#{registrationDetails.lastName}" required="true" label="Last Name" requiredMessage="Last Name required!"/>
<p:outputLabel value="Location"/>
<p:selectOneMenu id="location" value="#{registrationDetails.location}">
<f:selectItem itemLabel="Select Location" itemValue=""/>
<f:selectItems value="#{registrationDetails.locations}"/>
</p:selectOneMenu>
<p:outputLabel id="email" value="*Email"/>
<p:inputText value="#{registrationDetails.email}" required="true" label="Email" requiredMessage="Email address required!"/>
<p:outputLabel value="*Contact Number"/>
<p:inputText id="contactNumber" value="#{registrationDetails.contactNumber}" autocomplete="false" maxlength="10" required="true" label="Contact Number" requiredMessage="Contact Number required!"/>
<p:outputLabel value="Address"/>
<p:inputTextarea value="#{registrationDetails.address}"/>
</h:panelGrid>
<p:commandButton value="Submit" actionListener="#{registrationDetails.formSubmit}" id="buttonSubmit"
update="form:msg form:regDetailPanel form:regData" ajax="true">
<f:attribute name="fname" value="#{registrationDetails.firstName}"/>
<f:attribute name="lname" value="#{registrationDetails.lastName}"/>
<f:attribute name="loc" value="#{registrationDetails.location}"/>
<f:attribute name="email" value="#{registrationDetails.email}"/>
<f:attribute name="contact" value="#{registrationDetails.contactNumber}"/>
<f:attribute name="address" value="#{registrationDetails.address}"/>
<p:ajax event="click" immediate="true" update="form:regDetailPanel form:regData"/>
</p:commandButton>
You have to clear the values in your backing bean so the value expressions like "#{registrationDetails.firstName}" return null or an empty string.
i.e. in Java code, set all values that have to be cleared to null after the registration is successful.
This has to be done somewhere in your actionListener "#{registrationDetails.formSubmit}".
As you are using AJAX, you have to make sure the parts of your JSF page with the text fields are updated after the successful ajax call.
You can use the p:commandButton thus:
<p:commandButton action="#{myBean.method()}" value="Send" update="myForm" />
When I used the attribute update="myForm" of p:commandButton.
The values of fields in the form will empty after submitting the form.
I am trying out the Omnifaces validators especially the validateEqual and so I created a test page such as this.
<p:messages autoUpdate="true" showDetail="false" />
<h:form id="registerForm" prependId="false">
<p:panelGrid columns="2" styleClass="register-grid">
<h:outputLabel for="password" value="Password *" />
<p:inputText id="password" value="" label="Password"
requiredMessage="Password is required" size="30">
<f:validateRequired />
</p:inputText>
<h:outputLabel for="confirmPassword" value="Confirm Password *"
requiredMessage="Confirm Password is required" />
<p:inputText id="confirmPassword" value="" label="Confirm Password" requiredMessage="Confirm password is required"
size="30">
<f:validateRequired />
</p:inputText>
<o:validateEqual components="password confirmPassword" message="Passwords are not equal"/>
<f:facet name="footer">
<p:commandButton value="Register" action="/pages/public/login"/>
<p:commandButton value="Cancel" immediate="true" action="/pages/public/login"/>
</f:facet>
</p:panelGrid>
</h:form>
Not sure but nothing is happening and I see from firebug below error.
<partial-response>
<error>
<error-name>class javax.faces.component.UpdateModelException</error-name>
<error-message>/pages/public/register.xhtml #26,57 value="": Illegal Syntax for Set Operation</error-message>
</error>
<changes>
<extension ln="primefaces" type="args">{"validationFailed":true}</extension>
</changes>
</partial-response>
What could be the cause?
/pages/public/register.xhtml #26,57 value="": Illegal Syntax for Set Operation
This is basically telling that it's not possible to perform a "set" operation (a setter method call) on an empty value expression.
Either remove the value attribute altogether (at least from the "confirm" field), or specify a valid value expression such as value="#{bean.password}" (at least for the first field). So, basically:
<p:inputText id="password" value="#{bean.password}" label="Password"
requiredMessage="Password is required" size="30" required="true" />
<p:inputText id="confirmPassword" label="Confirm Password"
requiredMessage="Confirm password is required" size="30" required="true" />
<o:validateEqual components="password confirmPassword"
message="Passwords are not equal" />
This has nothing to do with using <o:validateEqual>. You'd have exactly the same problem when not using it. You may however want to use OmniFaces FullAjaxExceptionHandler in order to get a real error page on an exception during an ajax request instead of complete lack of visual feedback.
I need to set some values in my model and navigate page to another one but nothing happens on button click(neither page navigated nor method triggered)....My code works perfect outside the carousel but inside carousel its doesn't work(no page navigation)
<p:carousel value="#{catalog.getServices()}" var="s" rows="1">
<h:outputLabel for="id" value="Service ID " />
<h:outputText id="id" value="#{s.id}" />
<br></br>
<h:outputLabel for="name" value="Service Name" />
<h:outputText id="name" value="#{s.name}" />
<br />
<h:commandLink action="detail">
<f:setPropertyActionListener value="#{s}" target="#{sh.currentService}" />
<h:commandButton value="getService" style="float:right;" />
</h:commandLink>
</p:carousel>
And my navigation works perfect outside this carousel
<h:commandLink action="detail">
<f:setPropertyActionListener value="#{s}" target="#{sh.currentService}" />
<h:commandButton value="getService" style="float:right;" />
</h:commandLink>
Above code can make my page navigate and method which I want to trigger is also working fine
You should avoid nesting h:commandButton inside h:commandLink.
Simply use h:commandButton this way:
<h:commandButton value="getService" action="#{yourBean.yourActionMethod}">
<f:setPropertyActionListener .../>
</h:commandButton>
And in your backing bean return the navigation target as result from the action method:
public String yourActionMethod() {
// do your stuff here
return "detail";
}
Try to put the commandButton inside p:column. I had this issue and here http://forum.primefaces.org/viewtopic.php?f=3&t=16120 helped me.
I have a form and two command buttons. I want that on pressing the enter key, the second commandButton is pressed, but the first commandButton is being pressed.
Please consider the following sample code.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
</h:form>
When Enter key is pressed, first commandButton(with id="startNewChat") is pressed, but I want that second commandButton(with id="submitChatMessage") should be pressed.
What I have tried: accesskey="13", type="submit", id="submit"
I assume that you want to apply this on the second input field, in that case you need to capture the keypress event and invoke the button by JS when the key code is 13.
<form id="form">
...
<p:inputText value="#{bean.newChatMessageFromWeb}" onkeypress="if (event.keyCode == 13) { document.getElementById('form:submitChatMessage').click(); return false; }" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
(note that I added an id to the <h:form> so that the command button gets a fixed ID which is selectable by JS, also note the return false, this will block the default button from getting fired)
A more clean way would be to put each form in its own <h:form>.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update=":chatWindow" />
</h:form>
<p:outputPanel id="chatWindow">
<h:form>
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</h:form>
</p:outputPanel>
It's like that in html. The submit button that comes first in markup is the one activated with enter. Try setting
type="button"
on the first command button, if that doesn't work, you don't have much choice except maybe reordering your buttons and styling them so that one appears before another, or as BalusC said capturing keypresses with js.
If your inputText and submit buttons are inside the same form, put this inside the form
<p:defaultCommand target="yourButtonId" />
the enter key will trigger the button with the target id.
In case of the op's question, just putting that line at the end of the form with the desired button's id as the target would solve the problem.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
<p:defaultCommand target="submitChatMessage" />
</h:form>