I am using a primefaces dialog box. I have a list of items, and whenever I choose an item, I want the dialog box to display that item name. However, this is not happening. Rather than displaying the item name, the dialog is not displaying any name at all. I've posted my code below.
<h:form>
<h:dataTable binding="#{table}" value="#{item.itemList}" >
<h:column>
<h:link value="#{item.itemList[table.rowIndex]}" outcome="item">
<f:param name="itemName" value="#{item.itemList[table.rowIndex]}" />
</h:link>
</h:column>
<h:column>
<p:commandButton action="#{item.setItem(item.itemList[table.rowIndex])}" id="showDialogButton"
type="link" value="Delete" onclick="dlg.show()" />
</h:column>
</h:dataTable>
<br />
<p:dialog header="Item" widgetVar="dlg" resizable="false">
<!-- I've also tried Item: #{item.item} -->
<p>Item: <f:attribute name="contentId" value="#{item.item}"/> </p>
<p:commandButton id="submitButton" value="Yes" action=
"#{item.deleteItem}" oncomplete="dlg.hide();">
</p:commandButton>
<p:commandButton id="cancelButton" value="Cancel" oncomplete="dlg.hide();" />
</p:dialog>
</h:form>
My getters and setters are just generic getters and setters.
You forgot to update the dialog before opening.
<p:commandButton ... update="dialogId" />
I also suggest to use oncomplete instead of onclick to open the dialog.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
How to show details of current row from p:dataTable in a p:dialog and update after save
Primefaces p:dialog doesn't always show up if update="dlg" in commandButton
Related
I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton
Hello I am trying to implement some primefaces commandbuttons in a p:datatable. My need is almost identical to this post:
f:setPropertyActionListener not invoked
Basically I need to have a column of buttons in a , click on one button will pass the object of the current row to the bean, and a dialog will pop out, showing some information of the chosen object.
The following is the relevant code:
<f:view>
<body>
<h:form id="theForm">
<p:dataTable id="testFailures" value="#{testDetails.report.failures}" var="failure"
styleClass="baseTable">
<p:column id="requestColumn">
<f:facet name="header">
<h:outputText value="Request" id="requestHeaderText" />
</f:facet>
<p:commandButton value="Detail" update="requestDialog"
oncomplete="PF('dlg1').show();" type="button">
<f:setPropertyActionListener
target="#{testDetails.selectedFailure}" value="#{failure}" />
</p:commandButton>
<h:message for="requestDialog" />
<p:dialog id="requestDialog" header="Request Dialog"
widgetVar="dlg1" dynamic="true">
<h:outputText value="#{selectedFailure.request}" />
</p:dialog>
</p:column>
</p:dataTable>
</h:form>
<h:message for="theForm" />
<h:message for="responseDialog" />
<p:dialog id="responseDialog" header="Request Dialog"
widgetVar="dlg2" dynamic="true">
<h:form>
<h:outputText value="#{selectedFailure.request}" />
</h:form>
</p:dialog>
</body>
</f:view>
I tried to put the dialog in different positions (see my "dlg1" and "dlg2"). But neither works. No dialog showing. does not show anything either. And I don't see any error message in the browser's console window. (I think there is a exclamation warning).
I have tried debug mode, and set method for the property "selectedFailure" is not called.
Try to remove type="button" from your commandButton and it should work. Also dialogs should not be placed inside dataTables so the position of "dlg2" is more correct.
I use a Primefaces carousel component to display a list of items. What i would like to do is show a commandButton on every carousel item which triggers a method on the bean to confirm or decline the entry.
Now it works only for the first entry of the carousel. Clicking on another entry does not invoke the action confirmResource. I guess it has something to do with the IDs but i can't figure it out.
Here's the form:
<h:form id="form" prependId="false">
<p:carousel id="resourceCarousel" value="#{resourceRatingBean.resourceProposalList}" var="var" rows="1" itemStyle="width:500px; height: 400px; text-align:center;" circular="true">
<p:column>
<h:panelGrid columns="1" cellpadding="3">
<p:graphicImage value="/cache/images/#{var.imagePath}" width="100"/>
<h:outputText value="#{var.imagePath}" />
<h:outputText value="#{var.name}" />
<h:outputText value="#{var.description}" />
</h:panelGrid>
<p:commandButton value="confirm" action="#{resourceRatingBean.confirmResource}" process="#this">
<f:setPropertyActionListener value="#{var}" target="#{resourceRatingBean.ratedResource}" />
</p:commandButton>
</p:column>
</p:carousel>
</h:form>
I see two likely problems here:
The process="#this" is likely an issue as this will only invoke the process of the invoke the action of the commandButton and not the changes in the carousel component. Try setting this attribute to resourceCarousel or #form instead.
If you are still having issues and using JSF 2 + EL 2.2, then instead of depending on setPropertyActionListener to set the value of a managed property, then instead you can pass the argument var to an actionListener method through an EL expression.
Here is an example:
<p:commandButton value="confirm" actionListener="${resourceRatingBean.confirmResourceListener(var)}"
this="resourceCarousel" />
I am trying to submit values in a pop-up panel inside another panel that has a submit/action event. But before opening pop-up panel I need to invoke a function on my managed bean that create a new entity object. The outer panel has the only h:form, since you can't nest them. I have wrapped the pop-up panel in a a4j:region to submit only this part when the use submits the values inside the pop-up panel. This works, but not the execution of the preparing function that need to be invoked when the pop-up panel executes. I have tried a4j:commandLink but that component don't work together with the rich:popupPanel (strange since both of them are Richfaces components?!). So I have to relay on the h:commandLink and use ajax.
How can I invoke a function on my managed bean when the link to open/render the pop-up panel fires?
(What is the correct pattern for this?)
PS. The initial question has changed, but not the problem concerning submitting values in a pop-up panel.
Part of the xhtml file:
<h.form>
...
<a4j:region>
<rich:popupPanel id="popup_sys_user_req" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Request New Sector/Category" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysUserRequest.sysrequesttype}" required="true" >
<f:selectItems value="#{userController.getSysRequestTypeItems('SECTOR_CATEGORY')}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description(desc)}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest()}" value="Send Request" execute="sys_user_req_form" oncomplete="#{rich:component('popup_sys_user_req')}.hide(); return false;"/>
</rich:popupPanel>
</a4j:region>
</h:form>
The commandLink (re-edit)
<h:commandLink actionListener="#{userController.prepareCreateSysRequest}" value="Request New Sector/Category">
<f:ajax execute="popup_sys_user_req #this" render="popup_sys_user_req">
<rich:componentControl id="popup_ctr" event="click" target="popup_sys_user_req" operation="show"/>
</f:ajax>
</h:commandLink>
----------------------------
//Managed Bean:
public void prepareCreateSysRequest(ActionEvent event ) {
selectedSysUserRequest = new Sysuserrequest();
JsfUtil.log("Prepare Create System User Request");
}
This post continues the dicussion about the pop-up panel.
Greetings Chris.
If I understand correctly you want to submit all form elements inside popupPanel but not outside the panel when you invoke someAction1? I can think of two ways to do this:
1. a4jcommandButton has a limitToList attribute, you can list which components you want to be updated on the server
2. create your popupPanel outside of the first form and then use its own form:
<h:form>
...
<a4j:commandButton action="someAction2"...
</h:form>
<rich:popupPanel>
<h:form>
...
<a4j:commandButton action="someAction1"...
</h:form>
</rich:popupPanel>
Update
If you are using RichFaces 4 you can replace the limitToList attribute with limitRender
The problem is that the popup isn't a child of the form in jsf, you only need to use the domElementAttachment attribute to change that. So your code would look like this:
<h.form>
...
<a4j:region>
<rich:popupPanel id="popup_sys_user_req" modal="false" autosized="true" resizeable="false" domElementAttachment="form">
<f:facet name="header">
...
I want to display a composite component inside a dialog. It works but then how do I close that dialog from the composite component.
<p:commandButton value="Display Data Value Assertion Dialog" onclick="dlg2.show();" type="button"/>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="600" width="800">
<tcmt:DataValueAssertion managedBean="#{dataValueAssertionController}"/>
</p:dialog>
In my composite component:
<h:commandButton value="Save Assertions">
<f:ajax listener="#{datatypeAssertionController.saveDatatypeAssertion}"></f:ajax>
</h:commandButton>
<h:commandLink value="Close">
<f:ajax listener="#{datatypeAssertionController.closeDatatypeAssertion}"></f:ajax>
</h:commandLink>
When clicking on Save, I want to be able to save the data and close the dialog. When clicking on Cancel, I just want to close the dialog without saving. Both saveDatatypeAssertion and closeDatatypeAssertion methods are placeholders. I need to find a way to get a reference for the dialog dlg2 and then call the hide() method on it.
If you are using JSF 2.0.You can do like this:
<h:commandButton value="Save Assertions" >
<f:ajax event="click" onevent="dlg2.hide()" listener="#{datatypeAssertionController.saveDatatypeAssertion}" />
</h:commandButton>
<h:commandLink value="Close" >
<f:ajax event="click" onevent="dlg2.hide()" listener="#{datatypeAssertionController.closeDatatypeAssertion}" />
</h:commandLink>