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.
Related
I have this button in a form
<p:commandButton process="#this" update=":solution" title="Modify"
actionListener="#{controller.addSolutionAction(registerCause)}"
icon="ui-icon-plus" />
It displays this dialog (it's outside the form)
<p:dialog header="Solutions widgetVar="dlgSolution" id="solution"
showEffect="fade" hideEffect="drop" closable="true" resizable="true" modal="true">
<h:form id="dialog">
<p:pickList id="solutions" var="sol" effect="drop"
itemValue="#{sol}" itemLabel="#{sol.code}" converter="solutionConverter" label="Solutions" >
<f:facet name="sourceCaption">No Seleccionadas</f:facet>
<f:facet name="targetCaption">Seleccionadas</f:facet>
<p:ajax event="transfer" update="#form"
listener="#{controller.handleSolutionChange}" />
<p:column>
<h:outputText id="codeID" value="#{sol.code}" />
</p:column>
<p:column>
<p:commandButton id="button" icon="ui-icon-search" type="button" update="buttonP"/>
<p:overlayPanel id="buttonP" for="button" hideEffect="fade">
<p:editor id="description" required="true"
label="Ver más" width="300" widgetVar="descriptionWidget"
value="#{sol.description}" disabled="true" controls="">
</p:editor>
</p:overlayPanel>
</p:column>
</p:pickList>
<p:outputPanel styleClass="divButton">
<p:growl id="growlMessagePreview" life="2000" />
<p:commandButton icon="ui-icon-close" title="Close" process="#form" update="#form" value="Close" oncomplete="dlgSolution.hide()" />
</p:outputPanel>
</h:form>
</p:dialog>
What I want to do is show the solution's description when I click the button, but it's always empty. I need it to be an editor because the text is formatted
(I tried using a text area but it's empty too), then I put a string but it's not shown. I also used dynamic = "true" in the overlaypanel, it showed the hard coded string but not the value I need.
I'm using Primefaces 3.5. Any suggestions will be welcome, if you need more details, let me know.
How to reset the value of p:selectOneMenu on pressing p:commandButton on type reset. The code i have is as follows
<h:form id="form">
<p:panelGrid columns="2" cellspacing="10" >
<f:facet name="header">Login</f:facet>
<p:outputLabel value="Username" />
<p:inputText value="#{user.username}" />
<p:outputLabel value="Password" />
<p:password value="#{user.password}"></p:password>
<p:outputLabel value="Locale" />
<p:selectOneMenu >
<f:selectItem itemValue="Select Country" itemLabel="Select Country" />
<f:selectItem itemValue="Poland" itemLabel="Poland"/>
</p:selectOneMenu>
<p:commandButton value="Submit"></p:commandButton>
<p:commandButton type="reset" value="Clear" update="form"></p:commandButton>
</p:panelGrid>
</h:form>
On doing so, the username and password get cleared but the dropdown for select country is not reset.
First you are just showing the values in your p:selectOneMenu but not assigning those values, value property stands to be able to assign currently selected value from client side into the backing bean value, so;
<p:selectOneMenu id="myMenu" value="#{bean.selectedCountry}">
<f:selectItem itemValue="Select Country" itemLabel="Select Country" />
<f:selectItem itemValue="Poland" itemLabel="Poland"/>
</p:selectOneMenu>
Now if user selects Poland as country it will be setted as selectedCountry on the backing bean also do not forget to implement getter and setter methods.
Then if you want to reset the value of the component, p:selectOneMenu generates a label and changing it's text can do the trick on view:
<p:commandButton onclick="resetter();" type="reset" value="Clear" update="form"></p:commandButton>
And the js function:
function resetter() {
document.getElementById('form:myMenu_label').innerHTML = 'Select Country';
}
I have a jsf page having a popup button that opens a following dialog popup:
</h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
<h:form id="form23">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login" />
</f:facet>
</h:panelGrid>
</h:form>
</h:form>
But instead of opening as popup it is getting displayed outside the page itself. the dialog is outside the main form. Help!!
I tried that but still the same problem persists..below is my modified code..
<h:form id="create-ticket">
<p:dialog id="dialog" header="Select different user" widgetVar="dlg" appendToBody="true">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login"
/>
</f:facet>
</h:panelGrid>
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton"> <!-- This is the section where we get the grey background -->
<h:panelGroup id="input_search_section" styleClass="">
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show();" type="button"
>
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
Now i only have one form you can see the popup dialog section + the button which is calling the popup under h:panelgroup.Atached is the image how the form currently looks Thanks in advance
You need to restructure your code.
*Don't nest forms inside other forms.
*You dont have the end-tag of your p:dialog.
<h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
//Content ex inputtext
</p:dialog>
<p:commandButton value="Show Dialog" onclick="dlg.show();" type="button" />
</h: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 show and hide component in my JSF 2-PrimeFaces application, please find my code below for the same:
<p:outputLabel for="online_offer" value="Online offer#{msg._question_mark}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:selectBooleanButton id="online_offer" value="#{QckPstBen.offer.isExpired}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" >
<f:ajax event="click" render="#form" />
</p:selectBooleanButton>
</h:panelGrid>
</p:panel>
<h:outputLabel value=" " />
<h:panelGroup rendered="#{QckPstBen.offer.isExpired}">
<p:outputLabel for="website" value="Website/link to the offer#{msg._colon}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:inputText id="website" required="true" size="38" />
<p:watermark for="website" value="www.discountbox.in" />
</h:panelGrid>
</p:panel>
</h:panelGroup>
But it doesnt work, any clue
PrimeFaces components doesn't support <f:ajax>. Use <p:ajax> instead.
<p:selectBooleanButton ...>
<p:ajax update="#form" />
</p:selectBooleanButton>
Note that I omitted the event attribute, it defaults here to click already.
Place rendered on children of <h:panelGroup> instead or place a container of some sort around it, for example p:panel.
This may be OBE by now but...
When referencing the page bean, don't I recall in the #{} context, the convention of using lowercase for class names and method/attributes of the page bean (i.e. not #{QckPstBen.offer.isExpired} but #{qckPstBen.offer.isExpired}?