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.
Related
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
I have a primefaces dialog and what I want to do is process inputtext before commandbutton action starts. Inside myController.sendToPostBox method, myController.rejectionReason string returns null. Here is my view code.When I remove process attribute, commandbutton doesn't works.
<h:form>
....
<p:dialog id="myPanel"
widgetVar="myPanelId"
resizable="true"
appendToBody="true"
draggable="true"
height="200"
width="300">
<p:panelGrid id="myPanelGridId" style="width: 250px;" styleClass="panelGridWithoutBorder">
<p:row>
<p:column colspan="2">
<p:inputTextarea style="width: 250px;" value="#{myController.rejectionReason}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) myPanel.hide();"
process="myPanelId"
action="#{myController.sendToPostBox()}"/>
</p:column>
<p:column>
<p:commandButton value="Close" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</h:form>
Just place the <h:form> inside the dialog (instead dialog inside the <h:form>)
Explanation:
When you use appendToBody="true" you dialog is being transferred outside of the form that wraps it to the body of the generated html , and since there is no form inside the dialog you can't really submit it.
Also take a look at this thread: Proper Construct for Primefaces Dialog
You need something like this:
<h:form id="formDialog">
<p:commandButton id="basic" value="Basic Dialog" onclick="PF('dlg1').show();" type="button" />
</h:form>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:form id="formUser">
<h:panelGrid id="grid" columns="2">
<h:outputLabel value="Username:" />
<p:inputText id="user" value="#{user.name}" />
<h:outputLabel value="Password:" />
<p:inputText id="password" value="#{user.password}" />
<h:commandButton value="Login" id="btn" process="#formUser" actionListener="#{user.login}" />
</h:panelGrid>
</h:form>
</p:dialog>
"login" in the actionListener tag is a method in the User(bean) class, that needs the #ManagedBean annotations.
I am using JSF 2 with primefaces 3.5 and i have the following problem:
p: inputText freezes when I update the form,
I have the following code in my xhtml:
<p:panel visible="#{clientesMB.renderPanelEditPerFirmas}" id="panelEditEmpresa" header="Adicionar Personas">
<h:panelGrid columns="2">
<h:outputText value="Nombre: *" style="font-size: 12px"/>
<p:inputText value="#{clientesMB.personaFirma}"
style="width: 400px;"
label="text"/>
</h:panelGrid>
<p:dataTable id="cuentasTabla" var="car" value="#{clientesMB.selectedEmpCliente.personasFirmas}" widgetVar="carsTable">
<f:facet name="header">
Listado de Personas
</f:facet>
<p:column headerText="Nombre" style="width:25%">
<h:outputText value="#{car.nombre}"/>
</p:column>
<p:column style="width:4%" exportable="false">
<p:commandButton id="selectButton" onclick="confirmation.show()" icon="ui-icon-trash" title="Eliminar">
<f:setPropertyActionListener value="#{car}" target="#{clientesMB.personaFirmasSelect}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
when I call the Confirmation and I click yes, the outputText freezes. If I refresh all page then outputText work ok. This is the confirmation:
<p:confirmDialog id="confirmDialog" message="Realmente desea eliminar el elemento?"
header="Mensaje de Confirmación" severity="alert" widgetVar="confirmation">
<p:commandButton id="confirm" value="Si" oncomplete="confirmation.hide()"
actionListener="#{clientesMB.deleteSelectPersonaFirma}" update=":form2"/>
<p:commandButton id="decline" value="No" onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
form2 contain the panel "panelEditEmpresa", and confirmDialog is in other form.
I used your code and i don't have your issue, did you use ajax for inputtext ?
(BalusC: How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?)
I'm trying to use primefaces <p:dialog> combined with <p:commandButton>. In my .xhtml page I have a picklist and commandButton which is used to show a dialog. Dialog displays datatable with target values from picklist. Dialog has two buttons: cancel and submit. My problem is that submit button is not fired. What's strange, commandButton out of dialog works.
Here's my .xhtml:
<body>
<ui:composition template="./../resources/mainTemplate.xhtml">
<ui:define name="content">
<h:form>
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<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();" /> THIS BUTTON IS NOT FIRED
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</p:dialog>
<p:pickList value="#{editSkills.skills}" var="skill" effect="none"
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}" action="#{editSkills.afterSubmit}" update="dlg" oncomplete="dlg.show()" /> THIS BUTTON WORKS FINE
<p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/>
</h:form>
</ui:define>
</ui:composition>
</body>
I've marked working button and not working one.
What do I have to do to make it working?
You can try either of the following , I vote number one, it's a cleaner design IMO
Bring the <p:dialog/> outside of the general <h:form/> and put an <h:form/> inside it instead
<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();" /> THIS BUTTON IS NOT FIRED
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</h:form>
</p:dialog>
Add appendToBody="false" to the <p:dialog/> to ensure the dialog is rendered within the html form in the DOM instead of being auto-relocated to end of HTML body. But this may cause inconsistent rendering in various browsers.
<p:commandButton value="Cancel" oncomplete="PF('yourDialogWidgedVarName').hide();" process="#this" />
Make sure to use ' when u call the widgetVar name. You can also use immediate="true" or process="#this".
I have see this problem.Please see my jsf page.
<h:form id="companyList">
<p:contextMenu for="companiesDB" style="height:53px;">
<p:menuitem value=" edit" update="panelGrid" icon="ui-icon-pencil" oncomplete="editCompany.show()" />
<p:menuitem value=" delete" update="panelGrid" icon="ui-icon-closethick" onclick="editCompany.show()" />
</p:contextMenu>
<p:dataTable id="companiesDB" var="companies"
value="#{companyController.companyList}" rowKey="#{companies.pkId}"
selection="#{companyController.selectedCompany}"
selectionMode="single" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rows="20" >
<p:column headerText="name">
#{companies.companyName}
</p:column>
<p:column headerText="desc">
#{companies.description}
</p:column>
</p:dataTable>
<p:dialog header="edit mode" widgetVar="editCompany"
modal="true" height="160" width="390"
id="dialog" resizable="false">
<p:panelGrid cellpadding="10" id="panelGrid" >
<p:row>
<p:column width="300">
<h:outputText value="name:" style="float:left;" />
</p:column>
<p:column>
<p:inputText value="#{companyController.selectedCompany.companyName}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="desc:" style="float:right;" />
</p:column>
<p:column>
<p:inputText
value="#{companyController.selectedCompany.description}" />
</p:column>
</p:row>
</p:panelGrid>
<br />
<br />
<p:commandButton value="save" icon="ui-icon-check"
style="float:right; margin-right:25px;" update="companiesDB"
oncomplete="addCompany.hide();"
action="#{companyController.insertCompany()}">
</p:commandButton>
</p:dialog>
</h:form>
And console error was :
/company.xhtml #46,91 value="#{companyController.selectedCompany.companyName}": Target Unreachable, 'selectedCompany' returned null
try renaming your dialog id to mydialog (just to be on a safe side)
and update your menu item entry as following (notice the update="mydialog"):
<p:menuitem value="edit" update="mydialog" icon="ui-icon-pencil" oncomplete="editCompany.show()" />
also , make sure the edit button will be enabled only after a selection in table was made... otherwise you will get the null pointer...
you can achieve it with something like
<p:menuitem value="edit" disabled=#{companyController.selectedCompany eq null}.....
and add two p:ajax in your table
<p:dataTable.......>
<p:ajax event="rowSelect" update="contextMenuID" />
<p:ajax event="rowUnselect" update="contextMenuID" />
last thing : add id=contextMenuID to your context menu