I am using primefaces.
In the java side, I have a modelView. ModelView has a list of modules. Each module has a list of variables.
.
.
.
<h:form id="DynamicWebPageForm">
<p:growl id="msgs" showDetail="true" />
<h3>Dynamic Loading with Accordion Panel</h3>
<p:outputLabel for="selectModule" value="Select Module: " />
<p:selectOneMenu id="selectModule" value="#{modelView.selectModel}">
<p:ajax listener="#{modelView.onModelChange}" update="modulesAP" />
<f:selectItems value="#{modelView.modelselectItems}" />
</p:selectOneMenu>
<p:accordionPanel id="modulesAP" multiple="true" value="#{modelView.modules}" var="v1">
<p:tab id = "modulesTab" title="#{v1.name}: Rating - #{v1.rating}">
<p:dataTable styleClass="borderless" value="#{v1.moduleVariables}" var="c1">
<p:column>
<p:row>
<p:panelGrid columns="2" styleClass="borderlessPanelGrid">
<h:outputLabel styles="50%" value="#{c1.name}" />
<p:inputText styles="50%" value="#{c1.value}" />
</p:panelGrid>
</p:row>
</p:column>
</p:dataTable>
<p:commandButton value="Submit" update=":DynamicWebPageForm:msgs modulesTab modulesAP" actionListener="#{modelView.saveData}" process = ":DynamicWebPageForm" />
</p:tab>
</p:accordionPanel>
</h:form>
Any update in the inputText is not getting reflected back on form submission. What could be the issue?
Set cache="false" (and maybe dynamic="true") on your <p:accordionaPanel/>
The accordionPanel defaults to cache="true" (can't understand why), which would explain why you're seeing stale values
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.
This question already has an answer here:
Skip required validation and invoke the application
(1 answer)
Closed 7 years ago.
I have a p:ajax within a form which triggers on change event in a select. Also I have a separate submit button to submit the form.
The form contains multiple validations. I want to bypass all the validations during the p:ajax call. Instead all the validations should happen during form submission.
This is my form: Field1 and Field2 are mandatory. But these validations should be bypassed during p:ajax call which in turn renders Field3 based on the selected Field2 value.
How can I do this?
<h:body>
<h:form id="formId">
<p:outputPanel autoUpdate="true">
<p:message for="field1Id field2Id" />
<p:panel id="panelId">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="Field1:" />
</p:column>
<p:column>
<p:inputText
id="field1Id"
required="true"
requiredMessage="Field1 is Required!"
value="#{testBean.field1}"
size="5"
maxlength="30" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Field2:" />
</p:column>
<p:column>
<p:selectOneMenu
id="field2Id"
value="#{testBean.field2}"
required="true"
requiredMessage="Field2 is Required!">
<f:selectItems
value="#{testBean.fields}"
var="var1"
itemDescription="#{var1.description}"
itemLabel="#{var1.description}"
itemValue="#{var1.id}" />
<p:ajax
process="#form"
event="change" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row rendered="#{testBean.field2 > 0}">
<p:column>
<h:outputText value="Field3:" />
</p:column>
<p:column>
<p:inputText
value="#{testBean.field3}"
size="5"
maxlength="10" />
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton
value="Save"
action="#{testBean.saveForm()}"
process="#form" />
</p:panel>
</p:outputPanel>
</h:form>
</h:body>
You can achieve by below code. My code just add binding attribute(binding="{save}") at the button, and also change required="true" to required="#{not empty param[save.clientId]}"
<h:body>
<h:form id="formId">
<p:outputPanel autoUpdate="true">
<p:message for="field1Id field2Id" />
<p:panel id="panelId">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="Field1:" />
</p:column>
<p:column>
<p:inputText
id="field1Id"
required="#{not empty param[save.clientId]}"
requiredMessage="Field1 is Required!"
value="#{testBean.field1}"
size="5"
maxlength="30" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Field2:" />
</p:column>
<p:column>
<p:selectOneMenu
id="field2Id"
value="#{testBean.field2}"
required="#{not empty param[save.clientId]}"
requiredMessage="Field2 is Required!">
<f:selectItems
value="#{testBean.fields}"
var="var1"
itemDescription="#{var1.description}"
itemLabel="#{var1.description}"
itemValue="#{var1.id}" />
<p:ajax
process="#form"
event="change" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row rendered="#{testBean.field2 > 0}">
<p:column>
<h:outputText value="Field3:" />
</p:column>
<p:column>
<p:inputText
value="#{testBean.field3}"
size="5"
maxlength="10" />
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton
value="Save"
binding="{save}"
action="#{testBean.saveForm()}"
process="#form" />
</p:panel>
</p:outputPanel>
</h:form>
</h:body>
This approach is proposed by this link.
If you're willing to use omnifaces, there is an ignoreValidationFailed tag.
Check the example at omnifaces showcase:
<o:form>
...
<h:commandButton value="save valid data" action="#{bean.saveValidData}">
<o:ignoreValidationFailed />
<f:ajax execute="#form" />
</h:commandButton>
</o:form>
I've a CommandButton component inside Datatable, which is within a TabView component. ActionListener method of CommandButton component don't work. Never is fired.
This is my XHTML page:
<p:dialog id="dlgView" widgetVar="wvDlgView"
modal="true" closable="true" resizable="false">
<p:outputPanel id="opViewUser">
<h:form>
<p:tabView id="tabViewUser">
<p:tab title="DATOS PERSONALES">
<p:dataTable id="dtUsuarios" rows="5" paginator="true"
selectionMode="single" selection="#{personController.system}">
....
<p:column>
<p:commandButton value="Bloquear" actionListener="#{personController.block}" />
</p:column>
</p:dataTable>
</p:tab>
<p:tabView>
</h:form>
</p:outputPanel>
</p:dialog>
Thanks in advance :)
PD: PF 3.5, JSF (Mojarra) 2.1.3, Tomcat: 6.0.10
Sorry for not posting completely code and answer later. At any rate I think already it isn't necessary because I solved my problem. Explain in more detail the problem:
I had a structure similar to this on tab component:
<p:tab>
<h:form id="formTab" prependId="false">
<h:panelGrid columns="3">
<p:outputLabel value="Sistema " for="sltSystem"/>
<p:selectOneMenu id="sltSistema" required="true"
value="#{personController.idSistema}" >
<f:selectItems value="#{personController.listSistemas"
var="s" itemLabel="#{s.valor}" itemValue="#{s.id}"/>
</p:selectOneMenu>
<p:outputLabel value="Rol " for="sltRol"/>
<p:selectOneMenu id="sltRol" required="true"
value="#{personController.idRol}" >
<f:selectItems value="#{personController.listRoles}"
var="r" itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<p:dataTable id="dtUsersSystems" rows="5" paginator="true"
value="#{personController.userSystems}" var="s" rowKey="#{s.id}" >
<p:column headerText="SISTEMA">
<h:outputText value="#{s.sistema}" />
</p:column>
<p:column headerText="ROL">
<h:outputText value="#{s.rol}" />
</p:column>
<p:column headerText="ESTADO">
<h:outputText value="#{s.estado}"/>
</p:column>
<p:column>
<p:commandButton value="Bloquear" icon="ui-icon-cancel" actionListener="#{personController.blocked}"></p:commandButton>
</p:column>
</p:dataTable>
<h:form>
</p:tab>
As you can see sltSystem and sltRol components have required attribute in true. For that when I clicked on button "Bloquear" its ActionListener method not was invoked because after I should select a value on sltSystem and sltRol components.
Therefore new page structure is this:
<p:tab>
<h:form id="formSelect" prependId="false">
<h:panelGrid columns="3">
<p:outputLabel value="Sistema " for="sltSystem"/>
<p:selectOneMenu id="sltSistema" required="true"
value="#{personController.idSistema}" >
<f:selectItems value="#{personController.listSistemas"
var="s" itemLabel="#{s.valor}" itemValue="#{s.id}"/>
</p:selectOneMenu>
<p:outputLabel value="Rol " for="sltRol"/>
<p:selectOneMenu id="sltRol" required="true"
value="#{personController.idRol}" >
<f:selectItems value="#{personController.listRoles}"
var="r" itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
</h:form>
<h:form id="formDataTable" prependId="false">
<p:dataTable id="dtUsersSystems" rows="5" paginator="true"
value="#{personController.userSystems}" var="s" rowKey="#{s.id}" >
<p:column headerText="SISTEMA">
<h:outputText value="#{s.sistema}" />
</p:column>
<p:column headerText="ROL">
<h:outputText value="#{s.rol}" />
</p:column>
<p:column headerText="ESTADO">
<p:graphicImage value="#{s.estado}"/>
</p:column>
<p:column>
<p:commandButton value="Bloquear" icon="ui-icon-cancel" actionListener="#{personController.blocked}"></p:commandButton>
</p:column>
</p:dataTable>
<h:form>
</p:tab>
A form for selectonemenu components and other form for datatable component.
Thanks to all :)
my xhtml page. the add functionality works fine. So the converters are working and as ViewScope is not working, I tried SessionScope and it works fine.
<p:commandButton id="addOfficeButton" icon="ui-icon-circle-plus" oncomplete="AddOfficeDialog.show();"/>
<h:form id="officeform">
<p:growl id="growl" showDetail="true" sticky="true" />
<p:dataTable id="officeDT" var="office" value="#{offices}" rowKey="#{office.id}" style="width:40%"
selection="#{officeManagementController.selectedOffice}" selectionMode="single" editable="true">
<p:ajax event="rowSelect" listener="#{officeManagementController.onRowSelect}" oncomplete="editDlg.show()"
update=":tabView:officeform:growl,:tabView:officeform:editPanel"/>
<p:column sortBy="#{office.id}" headerText="Office ID">
<h:outputText value="#{office.id}" />
</p:column>
<p:column headerText="System">
<h:outputText value="#{office.department.name}" />
</p:column>
<p:column headerText="Section">
<h:outputText value="#{office.role.name}" rendered="#{office.role!=null}"/>
</p:column>
<p:column headerText="Options" style="width:50px">
<p:rowEditor></p:rowEditor>
</p:column>
</p:dataTable>
<p:dialog id="AddOfficeDialog" widgetVar="AddOfficeDialog" modal="true" header="Add/Edit Office" hideEffect="fade" showEffect="fade">
<p:outputPanel layout="block" id="officeDetail">
<p:panelGrid columns="2">
<h:outputText value="Systemmm" />
<h:selectOneMenu value="#{officeManagementController.selectedSystem}" converter="#{applicationSystemConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{departmentss}" var="appdepartment" itemLabel="#{appdepartment.name}" itemValue="#{appdepartment}"/>
<f:ajax event="change" listener="#{officeManagementController.onDepartmentChanged}" render="role"/>
</h:selectOneMenu>
<h:outputText value="Section" />
<h:selectOneMenu id="role" validate="true" value="#{officeManagementController.newOffice.role}" converter="#{departmentSectionConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{officeManagementController.assignableRoles}" var="role" itemLabel="#{role.name}" itemValue="#{role}"/>
</h:selectOneMenu>
</p:panelGrid>
<p:outputPanel layout="block" style="text-align:center;">
<p:commandButton actionListener="#{officeManagementController.createOffice}" id="addOffice"
value="Add Office" title="Add new office" oncomplete="AddOfficeDialog.hide();" update="growl,officeform"/>
</p:outputPanel>
</p:outputPanel>
</p:dialog>
<p:dialog id="editDlg" widgetVar="editDlg" modal="true" header="Add/Edit Office" hideEffect="fade" showEffect="fade">
<p:outputPanel id="editPanel">
<p:panelGrid columns="2">
<h:outputLabel value="Office ID: " />
<h:outputText value="#{officeManagementController.selectedOffice.id}"/>
<h:outputText value="System" />
<h:selectOneMenu value="#{officeManagementController.selectedOffice.department}" converter="#{applicationSystemConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{applicationSystems}" var="appdepartment" itemLabel="#{appdepartment.name}" itemValue="#{appdepartment}"/>
<f:ajax event="change" listener="#{officeManagementController.onApplicationSystemChanged}" render="sect"/>
</h:selectOneMenu>
<h:outputText value="Section" />
<h:selectOneMenu id="sect" validate="true" value="#{officeManagementController.selectedOffice.role}" converter="#{departmentSectionConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{officeManagementController.assignableSysSections}" var="role" itemLabel="#{role.name}" itemValue="#{role}"/>
</h:selectOneMenu>
</p:panelGrid>
<p:outputPanel layout="block" style="text-align:center;">
<h:inputHidden binding="#{officeManagementController.selectedOfficeId}" />
<p:commandButton actionListener="#{officeManagementController.updateOffice()}"
value="Update Office" title="Update office" oncomplete="editDlg.hide();" update="#this,editPanel,growl,officeform"/>
</p:outputPanel>
</p:outputPanel>
</p:dialog>
</h:form>
Backing Bean:
public void updateOffice() {
selectedOffice.setId(Long.valueOf((String)selectedOfficeId.getValue()));
officeManagementService.update(selectedOffice);
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, CrudStatusMessage.SUCCESS.toString(), "Successfully updated Module: " + selectedOffice.getName()));
}
I am getting the dialog populated with the row values but the issue is onclick of update button, i am getting a Value is not Valid error on dept, but the main thing is the selectedModule's values are not set. Please help. stuck with it since a week.
I think you actually need actionListener (instead of action) on you button. You should read about the differences in API docs but the bottom line is that actionListener will perform an AJAX post-back while action will lead to a redirect (which in turn will destroy your view and replace it with a new one).
Firstly you don't need () in:
<p:commandButton action="#{officeManagementController.updateOffice}" value="Update Office" title="Update office" oncomplete="editDlg.hide();" update="#this,editPanel,growl,officeform"/>
Try using <f:ajax/> in your <h:selectOneMenu> and check if it works.
I have the following code that allows a user enter some data:
<h:panelGrid columns="2" cellspacing="5">
<h:outputLabel value="#{msg.FrequencyOfSpending}" />
<h:selectOneMenu id="ruleFrequencyOptions" value="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
<f:selectItems value="#{Rule.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
<f:ajax event="valueChange" listener="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup id="rulesGroup">
<a4j:repeat value="#{Rule.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">
<h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">
<h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true">
<a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}" onerror="handleAjaxError" />
</h:selectBooleanCheckbox>
<h:outputText value="#{msg[RuleParamProperty.name]}" />
<h:panelGrid columns="3">
<h:outputText value="#{msg.Action_1}" />
<h:outputText value="#{msg[Rule.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" />
<h:outputText value="#{msg.Action_3}" />
</h:panelGrid>
<h:inputText value="#{RuleParamProperty.inputValue}" />
</h:panelGrid>
</a4j:repeat>
</h:panelGroup>
<!--******* Link here to generate row with exact same format as all code above ***-->
<h:panelGrid columns="2">
<img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" />
<h:link value="#{msg.addControl}" />
</h:panelGrid>
I need to add a link to allow them add different variations of this data i.e. user clicks add new control link and a new row appears that allows them enter more data (of the exact same format). They should be able to add multiple rows of the same data.
What is the best way to approach this with JSF2 and Richfaces4?
Should I put my panelGroups within a table?
Thanks
I used a datatable as suggested by Luiggi:
<h:dataTable value="#{rule}" var="currentRuleItem">
<h:column>
<h:panelGrid columns="2" cellspacing="5">
<h:outputLabel value="#{msg.FrequencyOfSpending}" />
<h:selectOneMenu id="ruleFrequencyOptions" value="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
<f:selectItems value="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
<f:ajax event="valueChange" listener="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup id="rulesGroup">
<a4j:repeat value="#{currentRuleItem.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">
<h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">
<h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true">
<a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}" onerror="handleAjaxError" />
</h:selectBooleanCheckbox>
<h:outputText value="#{msg[RuleParamProperty.name]}" />
<h:panelGrid columns="3">
<h:outputText value="#{msg.Action_1}" />
<h:outputText value="#{msg[currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" />
<h:outputText value="#{msg.Action_3}" />
</h:panelGrid>
<h:inputText value="#{RuleParamProperty.inputValue}" />
</h:panelGrid>
</a4j:repeat>
</h:panelGroup>
</h:column>
</h:dataTable>
<!--******* Link here to generate row with exact same format as all code above ***-->
<h:panelGrid columns="2">
<img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" />
<h:commandLink value="#{msg.addControl}" action="#{myBean.addRule}" />
</h:panelGrid>
// my bean method
public void addRule()
{
iRuleSet.get("RuleControl1").add(createRule());
}