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.
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 have a form it has one link ,when click on a link it opens a pop up window,in that i have a form,when validation fails on that form it must be show error msgs in the pop up only but the error msgs are showing in the main form.how to solve it.
i want to popup validation msgs in same popup.
why it is not showing error msgs in popup
pop up panel code is
<rich:popupPanel id="lp" modal="false" autosized="true" resizeable="false" >
<f:facet name="header">
<h:outputText value="Add New Doctor" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('lp')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:form id="drRegiForm">
<h:panelGrid columns="4">
<h:outputText value="Doctor Name" style="font-size: medium" ></h:outputText>
<h:inputText value="#{doctorBean.doctorName}" id="doctorName" size="37" required="true"/>
<h:message for="doctorName" />
<br/>
<h:outputText value="Place" style="font-size: medium"></h:outputText>
<h:inputText value="#{doctorBean.place}" id="place" required="true"/>
<h:message for="place"/>
<br/>
<h:outputText value="Phone Number" style="font-size: medium"></h:outputText>
<h:inputText value="#{doctorBean.phoneNumber}" id="phoneNumner"/>
<br/>
</h:panelGrid>
<a4j:commandButton value="Submit" action="#{doctorBean.registration}" execute="" onclick="#{rich:component('popup')}.hide()" />
</h:form> <p>
</p> </rich:popupPanel>
Sounds like you have nested forms, get rid of them. You can keep just the main one and use <a4j:region> to limit the execution scope.
I have a datatable that has a rowexpandor inside which contains two panels one is regular text and one holds a list of comments. I have a button that allows users to add new comments. Now that dialog is in a separate form see code below. My problem is that once the comment has been added the panel that holds all comments is not being refreshed. Here is a code sample.
<h:form id="formName">
<p:dataTable id="prTable" rowIndexVar="index" sortMode="multiple" styleClass="iris_table" var="value" value="#{bean.listValues}"
paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="rowToggle" onstart="rowMutalExclusive();"/>
<p:column style="width:2%">
<p:rowToggler />
</p:column>
<p:column id="message"
headerText="Description"
filterMatchMode="contains" filterStyle="display: none;">
<h:outputText value="#{value.description}" />
</p:column>
<p:column id="deadline" headerText="Deadline" filterStyle="display: none;">
<h:outputText value="#{value.endDate}">
<f:convertDateTime pattern="dd.MM.yyyy " />
</h:outputText>
</p:column>
<p:rowExpansion >
<div class="iris_peerreview_details">
<div class="comments">
<p:commandButton value="Comment" process="#this" update=":dialogForm:commentDlg" oncomplete="commentDialog.show()">
<f:setPropertyActionListener target="#{bean.review}" rendered="check" value="#{value.review}"></f:setPropertyActionListener>
</p:commandButton>
<div class="clear"></div>
</div>
<p:panel id="pnlHelp" style='border:none'>
<p:dataList id="check" rowIndexVar="index" value="#{bean.commentsFromCase(value.review)}" var="commentReview">
<div class="messages">
<p>
<h:outputText value="#{commentReview.date}">
<f:convertDateTime pattern="MM.dd.yyyy 'at' h:mm a"></f:convertDateTime>
</h:outputText>
</p>
<p class="message">
<h:outputText styleClass="message" value="#{commentReview.comment}"/>
</p>
</div>
</p:dataList>
</p:panel>
</div>
</p:rowExpansion>
</p:dataTable>
</h:form>
<h:form id="dialogForm" >
<p:dialog id="commentDlg" header="Comment" widgetVar="commentDialog" resizable="false"
modal="true">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputText value="Comment"" />
<h:inputText value="#{bean.comment}" required="true" requiredMessage="Please enter a comment" style="font-weight:bold"/>
<p:commandButton id="save" actionListener="#{bean.commentCase()}" update=":formName:prTable:pnlHelp" oncomplete="commentDialog.hide();"
value="Comment"/>
<p:commandButton id="cancelButton" onclick="commentDialog.hide()" value="Cancel"/>
</h:panelGrid>
</p:dialog>
</h:form>
You have to excuse me as i had to remove some code and mask some of it but generally this is what it does. Now once the comment button is clicked the dialog appears and the comment is store in the db and everything works well but i cannot get it to update the panel of that row that holds the comment.
The problem i am guessing is the following once this page its rendered the panel id is actually
formName:prTable:0:pnlHelp
and the value changes for each row. Now i understand that my update in the dialog is not able to locate the id but if i enter the index and try to create this specif id on render it throws an exception that it cannot be found.
I have attempted by placing the dialog inside the dataTable and than it works ok with updating but it causes many more problems, so i had to drop that option. Also if i update the full table it ok but the problem is that the rowexpandor closes which is not what its required, plus it not really don't like refreshing the full table as that is not the purpose of this. I am using Primeface 4.0 if this helps. With jsf 2.0.
Yes, the value of id changes for every row. Try to update it with a css selector, changing your button to
<p:commandButton id="save" actionListener="#{bean.commentCase()}" update="#([id$=pnlHelp])" oncomplete="commentDialog.hide();"
value="Comment"/>
The code will update all components ending with "pnlHelp". More info: http://www.w3schools.com/cssref/css_selectors.asp
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.
For code similar to that below, the title does not appear when the cursor hovers over a column header. Any ideas?
<h:column title="COLUMN 1">
<f:facet name="header" >COL 1</f:facet>
<h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al"/>
</h:column>
<h:column title="COLUMN 2">
<f:facet name="header" >COL 2</f:facet>
<h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al"/>
</h:column>
The <h:column> tag has no HTML 4.0 pass-through attributes as JSF generates these as nothing but <td> elements. And in HTML, tables consist of <td> elements within rows and columns are implicitly defined within the rows.
So it is liking specifying the title attribute for each particular <td> element of each and every row.
<table border="1">
<tr>
<td title="first">Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td title="first">Cell A2</td>
<td>Cell B2</td>
</tr>
</table>
So there is nothing like specifying an overall title for the column in HTML, you can have a title for <table> tag which is nothing but <h:dataTable>.
Or you can have title on individual data cells by adding title to your components inside that column like this:
<h:column>
<f:facet name="header" >COL 1</f:facet>
<h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al" title="COLUMN 1"/>
</h:column>
<h:column>
<f:facet name="header" >COL 2</f:facet>
<h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al" title="COLUMN 2"/>
</h:column>
which generates a <span> containing the value of the outputText with the title attribute.
If you use Primefaces, you can use similar code
<p:column>
<f:facet name="header">
<h:outputText value="TYPE" title="LINK-TYPE (DIRECT,TDR,TLGA)"/>
</f:facet>
<h:outputText escape="false" value="#{test.getLinkType()}"/>
</p:column>
I think that the solution to your problem is to define <f:facet> as you done in your example AND to put <h:outputText> in <f:facet> !
Using your example, you will obtain following code
<h:column>
<f:facet name="header">
<h:outputText value="COL 1" title="COLUMN 1"/>
</f:facet>
<h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al"/>
</h:column>
<h:column title="COLUMN 2">
<f:facet name="header">
<h:outputText value="COL 2" title="COLUMN 2"/>
</f:facet>
<h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al"/>
</h:column>