I have a scenario like the below..
<h:selectOneRadio id="someId" value="#{myBean.type}" required="true">
<f:ajax event="valueChange" execute="#form" render="myPanel">
<f:selectItem itemLabel="Existing Type" itemValue="Existing Type" />
<f:selectItem itemLabel="New Type" itemValue="New Type" />
<h:selectOneRadio>
<h:panelGroup id="myPanel" rendered="#{myBean.checkforNewType()}">
<h:inputText id="txtval" value="#{mybean.val}" required = "true" requiredMessage="Some message">
<h:message for="txtval" styleClass="error"/>
<h:panelGroup>
Basically the panel containing the textbox should be hidden if the value of the property type is "Existing Type".
But the issue I am facing is if user leave the box blank the panel is not hidden as it fails the validation.
Is there anyway to avoid the validation when the panel containing the textbox is being hidden?
Better check the request parameter value instead. The model value is namely not updated when the validation has failed in general and thus your rendered condition will fail when being bound to a request scoped bean.
<h:selectOneRadio id="someId" value="#{myBean.type}" required="true">
<f:ajax event="valueChange" execute="#form" render="myPanel">
<f:selectItem itemLabel="Existing Type" itemValue="Existing Type" />
<f:selectItem itemLabel="New Type" itemValue="New Type" />
<h:selectOneRadio>
<h:panelGroup id="myPanel" rendered="#{param['formId:someId'] == 'New Type'}">
<h:inputText id="txtval" value="#{mybean.val}" required="true" requiredMessage="Some message">
<h:message for="txtval" styleClass="error"/>
<h:panelGroup>
Here, I assume that the parent <h:form> has an id="formId".
Related
This question already has an answer here:
How to display dialog only on complete of a successful form submit
(1 answer)
Closed 6 years ago.
For my school project I have to realize a mini website where I use primefaces framework. In a form I want after pressing the Save button two things:
1 - Validate the data entered. that's why I put
<p:message for="date" /> and <p:message for="zone" />
As the values are not correct, the dialog box should not be displayed.
2 - When all data is correct, and I click Save, I want to display my dialog box.
Now I can not. Can you help me? I use version 4 primefaces.
<h:form>
<p:panel id="panel" header="Create" style="margin-bottom:10px;border-color:blueviolet" >
<p:messages id="messages" />
<h:panelGrid columns="3">
<h:outputLabel for="date" value="Date : *" />
<p:calendar locale="fr" id="date" value="#{newBusinessCtrl.exercice.debut}" required="true" label="date" showButtonPanel="true"/>
<p:message for="date" />
<h:outputLabel for="zone" value="Zone Monétaire: *" />
<p:selectOneMenu id="zone" value="#{newBusinessCtrl.exercice.zoneChoice}" >
<f:selectItem itemLabel="Choice " itemValue="" />
<f:selectItems value="#{newBusinessCtrl.exercice.zones}" var="azone"
itemLabel="#{azone}" itemValue="#{azone}" >
</f:selectItems>
<p:message for="zone" />
</p:selectOneMenu>
<p:message for="zone" />
</h:panelGrid>
</p:panel>
<p:commandButton update="panel" value="Save" icon="ui-icon-check" style="color:blueviolet" onclick="choice.show()"/>
<p:confirmDialog message="Would you like to create accounts automatically ?"
header="Account creation" severity="alert"
widgetVar="choice" appendTo="#(body)">
<p:button outcome="personalizeAccount" value="Personalize" icon="ui-icon-star" />
<p:button outcome="autoAccount" value="Continue" icon="ui-icon-star" />
</p:confirmDialog>
Just show the dialog in Backing Bean like this:
Page：
<p:commandButton update="panel" value="Save"
icon="ui-icon-check"
style="color:blueviolet"
action="#{newBusinessCtrl.showDlg('choice')}"/>
Backing Bean：
public void showDlg(String dlgName){
RequestContext.getCurrentInstance().execute(dlgName+".show()");
}
Once the validation failed, the action won't execute and thus the dialog will not show.
If validation hasn't failed. PrimeFaces puts a global args object in the JavaScript scope which in turn has a boolean validationFailed property. You can check it before showing the dialog So you can use it this way:
<p:commandButton value="save" oncomplete="if (args && !args.validationFailed) saveDialog.show()"/>
I have few password fields and a dropdown box. Whenever drop down value is changed (value change event), I am displaying a popup to agree to Terms&Conditions. As soon as Terms&Conditions are accepted, password fields are cleared.
XHTML file
Enter Password: <h:inputSecret value="#{myBean.password}" />
Confirm Password: <h:inputSecret value="#{myBean.confirmPassword}" />
Select an Amount: <h:selectOneMenu value="#{myBean.amount}">
<f:selectItems value="#{myBean.amountValues}" />
<f:ajax event="valueChange" render="#this">
<rich:componentControl target="pnl" operation="show" />
</f:ajax>
</h:selectOneMenu>
<rich:popupPanel id="pnl" domElementAttachment="form" height="150" width="400" moveable="false" resizeable="false">
<f:facet name="header"><h:outputText value="Do you accept our Terms&Conditions"/></f:facet>
<h:commandButton value="Yes" immediate="true" action="#{myBean.agreed}"/>
<h:commandButton value="No" immediate="true" action="#{myBean.disagreed}" />
</rich:popupPanle>
MyBean
public void agreed() {
//set some variables
}
public void disagreed() {
//set some variables
}
For some reason whole page is getting rendered, since the form is not submitted yet, the password values are not set in the bean. How can I prevent it?
My xhtml contains input fields, where user can input numeric or alphabet values. Using an ajax call I am validating the input value and throwing a validation error on the . But even after entering invalid characters and error message, user may still hit the 'Save' button. Once the user hits the Save button it triggers a method in the Controller. Is there a way I can check for validation errors on p:messages inside the controller using the FacesContext.getCurrentInstance().
xhtml code
<!-- Messages -->
<p:messages id="errorMessages" globalOnly="false" showDetail="true" showSummary="false" closable="true" />
<!-- Column input field-->
<p:column>
<f:facet name="header">
<h:outputText value="Input Amount" escape="false" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.amount}" escape="false">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3"
maxIntegerDigits="5" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText id="input" value="#{row.amount}" maxlength="10"
size="10">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3"
maxIntegerDigits="5" />
<f:validator validatorId="hourlyValueValidator" for="input" />
<p:ajax event="change" partialSubmit="true" process="input"
update=":#{p:component('errorMessages')}" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<!-- Save Button -->
<p:commandButton id="btnSubmit" value="Save"
update=":#{p:component('tblScrollPnl')} :#{p:component('errorMessages')}"
action="#{controller.saveValues()}" ajax="true" />
Controller in ViewScope
public void saveValues() throws Exception {
FacesContext context = FacesContext.getCurrentInstance();
List<FacesMessage> errorMsgList = context.getMessageList("globalMessages");
......
......
......
}
You don't need to get messages from the bean side for validation, as you experienced, view side validation occur but doesn't block your action.
There is couple of thing wrongs in your view, to fix your problem you need to change the process attribute of your p:commandButton, ortherwise only the button is processed (by default process="#this", so the validation is skipped.
<p:commandButton id="btnSubmit" value="Save" process="#form" update=":tblScrollPnl :errorMessages" action="#{controller.saveValues()}" />
Also note that I've removed ajax="true" since it is by default and fixed major problems in update="".
You should also rearrange your validators :
<p:inputText id="input" value="#{row.amount}" maxlength="10" size="10" validator="hourlyValueValidator">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3" maxIntegerDigits="5" />
</p:inputText>
I want a dialog to show up after I click a commandButton, but it doesn't show up at all.
I think the button is submitting the form instead of showing up a dialog. What's more I've tried to make a 'Cancel' commandButton and it is also not working as it should - it works only if I click it first (if I click commandButton which is suppoused to open a dialog first, the cancel button won't work anymore).
Here's my .xhtml:
<ui:define name="content">
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<h:form>
<h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
<h:column>
#{skillslevel.skill.umiejetnosc}
</h:column>
<h:column>
<p:selectOneMenu value="#{skillslevel.level}" >
<f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
</p:selectOneMenu>
</h:column>
</h:dataTable>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" />
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</h:form>
</p:dialog>
<h:form>
<p:messages/>
<p:pickList value="#{editSkills.skills}" var="skill" effect="none" converter="#{picklistConverter}"
itemValue="#{skill.id}" itemLabel="#{skill.umiejetnosc}"
showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains"
addLabel="#{messages.add}" removeLabel="#{messages.remove}" removeAllLabel="#{messages.removeAll}" >
<f:facet name="sourceCaption">#{messages.skillsList}</f:facet>
<f:facet name="targetCaption">#{messages.yourSkills}</f:facet>
<p:ajax event="transfer" listener="#{editSkills.onTransfer}" />
<p:column style="width:100%;">
#{skill.umiejetnosc}
</p:column>
</p:pickList>
<p:commandButton value="#{messages.confirm}" actionListener="#{editSkills.afterSubmit}" update=":dlg" oncomplete="dlg.show();" /> THIS IS THE MENTIONED BUTTON
<p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/> THIS IS THE CANCEL BUTTON
</h:form>
</ui:define>
What should I do to make it working well?
Your code seems fine to me :). However, 1 thing you need to note is that the id and widgetVar attributes of the <p:dialog> must not have the same value. Try something like the following:
<p:dialog id="levelDlg" widgetVar="levelDialog">
This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 7 years ago.
I am unable to rendered a selectOneMenu but only to disable the item
for example this is working:
<p:panel header="Field Chooser">
<h:panelGrid columns="2" cellpadding="5">
<p:selectOneMenu id="l1" value="#{acqBean.gb1}">
<f:selectItem itemLabel="Group By" itemValue="" />
<f:selectItems value="#{acqBean.level1}" />
<p:ajax update="l2" listener="#{acqBean.handleGroupChange}"/>
</p:selectOneMenu>
<p:selectOneMenu id="l2" value="#{acqBean.gb2}" disabled="#{acqBean.renderLevel2}">
<f:selectItems value="#{acqBean.level2}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator />
</p:panel>
public void handleGroupChange() {
if (gb1 != null && !gb1.equals("")) {
level2 = level2Data.get(gb1);
renderLevel2 = false;
} else {
level2 = new HashMap<String, String>();
renderLevel2 = true;
}
}
and this one not:
<p:selectOneMenu id="l2" value="#{acqBean.gb2}" rendered="#{acqBean.renderLevel2}">
<f:selectItems value="#{acqBean.level2}" />
</p:selectOneMenu>
Any advice please
Thanks
You can't ajax-update a component which is by itself conditionally rendered. You can only ajax-update a component which is always rendered. The simple reason is, when the component is not rendered, then there's basically nothing in the resulting HTML code which can be selected and manipulated by JavaScript based on the ajax response.
So, put the <p:selectOneMenu> with the rendered attribute in for example a <h:panelGroup> without the rendered attribute and refer it instead in your ajax update.
<p:selectOneMenu id="l1" value="#{acqBean.gb1}">
<f:selectItem itemLabel="Group By" itemValue="" />
<f:selectItems value="#{acqBean.level1}" />
<p:ajax update="l2group" listener="#{acqBean.handleGroupChange}"/>
</p:selectOneMenu>
<h:panelGroup id="l2group">
<p:selectOneMenu id="l2" value="#{acqBean.gb2}" rendered="#{acqBean.renderLevel2}">
<f:selectItems value="#{acqBean.level2}" />
</p:selectOneMenu>
</h:panelGroup>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?