I want to retain data in text box while adding/deleting other row.I am using nested datatable. If I click on delete button it refreshed entire datatable, so user lost the partially filled form data.
<h:commandButton id="addBtn" value="Add Value">
<f:ajax listener="#{relationBean.addValue}"
render="datatableIterator" event="click" />
</h:commandButton>
<h:dataTable id="datatableIterator"
value="#{relationBean.datatables}" var="datatable">
<h:column>
<h:dataTable id="relationIterator"
value="#{datatable}" var="item">
<h:column>
<f:facet name="header"> Relation Type Name</f:facet>
<h:outputText value="#{item.relationType}" />
</h:column>
<h:column>
<f:facet name="header">language</f:facet>
<h:outputText value="#{item.languageName}" />
</h:column>
<h:column>
<f:facet name="header"> Value</f:facet>
<h:inputText value="#{item.relationForm}" />
</h:column>
</h:dataTable>
</h:column>
<h:column>
<p:commandLink action="#{relationBean.deleteDataTable}"
immediate="true" update="#form" process="#this" >
<h:graphicImage value="../images/delete.png" />
<f:setPropertyActionListener
target="#{relationBean.deleteId}" value="#{datatable}" />
</p:commandLink>
</h:column>
</h:dataTable>
I got the resolution.
Its only one line change.what I was doing that I was adding the datata before populating the form, so whenever I click on delete button it clears the form. so I added the data after populating the form like this.
getDatatables().add(getRelationDTOList());
before it was
datatables.add(getRelationDTOList());
and included execute="#form" in xhtml add button.
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.
I am using JSF 2.2 with PrimeFaces 5.0. I have a dataTable with cell-editing.
I am having problems with the dataTable inside dialog when I set editMode="cell", the outputtext after editing it's doesn't appear, but when i put the datatable edit outside dialog, it's work.When I inspect the element of datatable
<div class="ui-cell-editor-output" style="display: none;"></div> it's empty but if i put the datatable edtor outside dialog the outPut element isn't empty
Let me explain with some code:
<p:dialog id="modif" width="80%" widgetVar="w_edit" modal="true" >
<p:tabView >
<p:tab title="Controle de Réception ">
<h:panelGrid>
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme(lotRecpBean.currentLotReception.entrant)}"
var="item" editable="true" editMode="cell" >
<p:column headerText="Valeur Controle" styleClass="ui-editable-column">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{item.valeurControle}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{item.valeurControle}" style="width: 50%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column width="15%" headerText="Testeur">
<p:cellEditor >
<f:facet name="output"><h:outputText value="#{item.testeurCR.nom}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{item.testeurCR.nom}" style="width:50%">
<f:selectItems value="#{personnelBean.liste}" var="perso" itemLabel="#{perso.nom}" itemValue="#{perso}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:tab>
</p:tabView>
</p:dialog>
I hope (like always) any of you could save me again.
All user input must be inside of a form. You'll need an <h:form> inside the dialog.
I still have the same problem when i modify the row in datatable editor inside dialog the outputtext doesn't change still have the old value ,but when i put this datatable in simple page work
<p:dialog id="modif" width="80%" widgetVar="w_edit" modal="true" >
<p:tabView >
<p:tab title="Controle de Réception ">
<h:form>
<h:panelGrid>
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme(lotRecpBean.currentLotReception.entrant)}"
var="item" editable="true" editMode="cell" >
<p:column headerText="Valeur Controle" styleClass="ui-editable-column">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{item.valeurControle}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{item.valeurControle}" style="width: 50%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column width="15%" headerText="Testeur">
<p:cellEditor >
<f:facet name="output"><h:outputText value="#{item.testeurCR.nom}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{item.testeurCR.nom}" style="width:50%">
<f:selectItems value="#{personnelBean.liste}" var="perso" itemLabel="#{perso.nom}" itemValue="#{perso}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGrid>
<h:form>
</p:tab>
<p:tab title="Info lot de Réception">
<h:form>
<p:panelGrid id="idPanel">
<p:row>
<p:column><p:outputLabel value="QuantiteLivree:" for="quantiteLivree" /></p:column>
<p:column><p:inputText id="quantiteLivree" value="#{lotRecpBean.currentLotReception.quantiteLivree}" title="QuantiteLivree" /></p:column>
<p:column><p:outputLabel value="QuantiteRecue:" for="quantiteRecue" /></p:column>
<p:column><p:inputText id="quantiteRecue" value="#{lotRecpBean.currentLotReception.quantiteRecue}" title="QuantiteRecue" /></p:column>
<p:column><p:outputLabel value="NumBonLivraison:" for="numBonLivraison" /></p:column>
<p:column><p:inputText id="numBonLivraison" value="#{lotRecpBean.currentLotReception.numBonLivraison}" title="NumBonLivraison" /></p:column>
</p:row>
</p:panelGrid>
<div>
<p:commandButton action="#{lotRecpBean.update()}" value="Enregistrer" styleClass="button"
style="float: right" oncomplete="PF('lotRecepTable').filter();PF('w_edit').hide();" />
</div>
</h:form>
</p:tab>
</p:tabView>
</p:dialog>
I fixed the problem , it's come from the value of datatable ===> the value of datatable editor must be a list and not a method which return a list datatable editor work just with a list 1-
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme}"
var="item" editable="true" editMode="cell" >
I create a list in the managed bean t and in the button i execute the method to full the list created in the managed bean . thank you for your response
I have a list of products which is displayed in datatable ,and want to edit a particular row from the datatable in a pop up as described below
A datatable with all the employee details, each row has edit button.On clicking the edit button the new pop-up should be displayed with the existing information of particular clicked product and after editing, the changes must be reflected for that particular object in the list as well in datatable.
I am struggling for it but i could not save the changes in edited product. when the pop up is opened, l can see the selected item properties but when I changed the properties, nothing changes.
here is the my jsf code.
<a4j:outputPanel ajaxRendered="true">
<h:dataTable id="table1" value="#{productBean.products}" var="item"
styleClass="resultTable" headerClass="resultTableHeader"
rowClasses="resultTableRow">
<h:column>
<f:facet name="header">
<h:outputText value="Part#" />
</f:facet>
<h:outputText value="#{item.partNumber}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Product Description" />
</f:facet>
<h:outputText value="#{item.description}" />
</h:column>
<h:column>
<a4j:commandButton value="Edit" action="#{productBean.setEditItem(item)}" oncomplete="#{rich:component('popup')}.show()"> </a4j:commandButton>
<rich:popupPanel id="popup" modal="true" resizeable="true"
onmaskclick="#{rich:component('popup')}.hide()">
<f:facet name="header">
<h:outputText value="Edit property of the product" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<!-- editProduct ı burda item yerine kullan -->
<table style="align: center;">
<tr>
<td><h:panelGrid columns="2">
<h:outputText value="Description"></h:outputText>
<h:inputText value="#{productBean.item.description}"></h:inputText>
</h:panelGrid></td>
</tr>
<tr>
<td><h:panelGrid columns="2">
<h:outputText value="Part Number"></h:outputText>
<h:inputText value="#{item.partNumber}"></h:inputText>
</h:panelGrid></td>
</tr>
</table>
<a4j:commandButton value="Submit" action="#{productBean.actionEditProductsFromDatabase(item)}" execute="#popup"/>
<a4j:commandButton value="Cancel" onclick="#{rich:component('editPane')}.hide(); return false;" />
</rich:popupPanel>
</h:column>
</h:dataTable>
</a4j:outputPanel>
</h:form>
Refer to the Placement callout in the RichFaces Component Reference:
http://docs.jboss.org/richfaces/latest_4_X/Component_Reference/en-US/html_single/#sect-Component_Reference-Panels-richpopupPanel
The <rich:popupPanel> component is usually rendered in front of any
other objects on the page. This is achieved by attaching the component
to the <body> element of the page, and setting a very high "z-index"
(the stack order of the object). This approach is taken because
relatively-positioned elements could still overlap the pop-up panel if
they exist at higher levels of the DOM hierarchy, even if their
z-index is less than the <rich:popupPanel> component.
If the <rich:popupPanel> is to participate in submitting child
components/behaviors, then a form element must be nested within the
<rich:popupPanel>. Alternatively, if no overlapping elements exist,
the <rich:popupPanel> component can be reattached to its original DOM
element by setting domElementAttachment to either parent or form.
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 am using richfaces 4, and i have a rich:datatable with a rich:datascroller and a column with a filter following the examples at the richfaces 4 showcase, but here's the thing, once i filter the table and the datascroller updates(ie. if at first the datascrolloer has 10 pages and after the filter have 2 pages) if I click on the next page or any of the boundary controls it suppose to go to the next page of the filtered table but instead the table resets to its original state(with out the filter expression)
here is my code:
<rich:dataTable id="mytbl" value="#{MyBean.mylist}" rows="10"
var="emp"
reRender="ds"
iterationStatusVar="it">
<f:facet name="noData">
no data found
</f:facet>
<rich:column filterValue="#{MyBean.id_filter}"
filterExpression="#{fn:containsIgnoreCase(emp.id,MyBean.id_filter)}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="id"/>
<h:inputText value="#{MyBean.id_filter}">
<a4j:ajax event="change" render="mytbl" execute="#this"
onbegin="#{rich:component('wait_popup')}.show()"
oncomplete="#{rich:component('wait_popup')}.hide()"/>
</h:inputText>
</h:panelGroup>
</f:facet>
<h:outputText value="#{emp.id}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="value" />
</f:facet>
<h:outputText value="#{emp.value}">
<f:convertNumber pattern="$#,###.00"/>
</h:outputText>
</rich:column>
<f:facet name="footer">
<rich:dataScroller maxPages="10" id="ds" render="#this" />
</f:facet>
</rich:dataTable>
Probably MyBean was not view scoped.