I have a .xhtml file contains 1 form and 1 dialog, as example:
<h:form id="frmMain">
<p:dataTable id="tblFormItem"
widgetVar="wgFormItem">
<p:column>
...
</p:column>
</p:dataTable>
<p:commandButton value="Add value"
onstart="PF('dlg').show()"
oncomplete="PF('dlg').hide()"
action="#{bean.openDialog}"/> <!-- openDialog() will open a dialog has id "dialog" -->
</h:form>
<p:dialog id="dialog"
widgetVar="wgDialog">
<h:form id="dialogForm">
<!-- Some stuffs -->
<p:commandButton value="Save"
update=":messages :frmMain:tblFormItem"
action=#{bean.save}"/>
I got the error Cannot find component for expression ":frmMain:tblFormItem".
I searched and tried everything that I found on Google but it still produces the same error.
Please help me, how do I update the dataTable from commandButton in dialog?
Related
I have a problem with primefaces datatables. I have one datatable with some entries and a column with a button inside. If the button is pressed a popup is opened with another datatable. The entries in the second datatable are depending on the row in which the button is pressed.
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Entries" widgetVar="edit_entries" modal="true"
resizable="false">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</p:dialog>
</form>
Bean2
public void updateEntries(Item selectedItem) {
this.entriesList = this.entriesQuery.getAllEntriesByItemID(selectedItem.getId());//db query could take some time
System.out.println("entrieslist size: " + this.entriesList.size()); //prints the correct size
}
The problem is that there are no entries listed in the popup datatable although there are some in the list after the db query.
Any ideas how to fix this bug?
Thanks in advance!
UPDATE 1:
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries" update=":dialogUpdateEntries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
</h:form>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Enries" id="dialogUpdateEntries" widgetVar="edit_entries" modal="true"
resizable="false">
<h:form id="formEntriesList">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</form>
</p:dialog>
You're indeed not updating the data table in the dialog. JSF doesn't automatically update the view on change of the model, you have to explicitly tell the view to do so. You can use the ajax action component's update attribute for this. This takes a JSF client ID which can be found by rules as outlined in this related answer: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar".
Given the markup as shown in the question, that'll be
<p:commandButton ... update=":list:list2" />
However, there's another potential problem. You're using <p:dialog modal="true"> inside a form instead of giving the dialog its own form. This way the dialog may not be available in the HTML DOM tree as JavaScript (the one responsible for dealing with ajax stuff) would expect to find it. Giving the dialog its own form should fix this matter. It'll also fix the potential future problems with invoking actions from inside the dialog as handled in this related question: <p:commandbutton> action doesn't work inside <p:dialog>.
<h:form id="viewForm">
...
<p:commandButton ... update=":editDialog" />
...
</h:form>
<p:dialog id="editDialog" modal="true">
<h:form id="editForm">
...
</h:form>
</p:dialog>
Try adding update="list2" to Edit Entries command button (even update="#widgetVar(edit_entries)" should work).
If, because of page layout and structure, you can't target the second datatable using above suggestions, then add styleClass="tList2" to second table, and update it with update="#(.tList2)" on edit button.
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 have this form with a panel grid and a dialog:
<h:form id="regiForm">
<p:panelGrid>
<p:row style="height:30%">
<p:column>
<h:outputText/>
</p:column>
<p:column>
<p:commandButton style="width:350px" type="submit" actionListener="#
{regiBean.showDialog}" id="ajax" value="#{msg['regi_button']}" update="regiForm" process="#this"/>
</p:column>
<p:column>
</p:column>
</p:row>
</p:panelGrid>
<p:dialog id="dialog" header="#{msg['regi_dialog_header']}" widgetVar="myDialog" position="center center" >
<h:outputText value="#{msg['regi_dialog']}" />
</p:dialog>
</h:form>
I would like to open the dialog from inside the action listener:
public void showDialog() {
RequestContext.getCurrentInstance().execute("dialog.show()");
RequestContext.getCurrentInstance().execute("myDialog.show()");
}
However, the dialog is not shown. How is this caused and how can I solve it?
I'm using JSF 2.1 and PrimeFaces 3.5.
The first statement with the command
RequestContext.getCurrentInstance().execute("dialog.show()");
won't work because dialog refers to the XHTML ID of the p:dialog component. This will cause an javascript error. And that could be the reason why the second command
RequestContext.getCurrentInstance().execute("myDialog.show()");
won't get executed.
Also I would add ; to the end of each Javascript command (but this is just my personal style)
I have a table in a form. One of the columns in the table displays a row of buttons to edit and delete the table entries. When I delete an entry callign the controller from a button's action attribute, it works as expected.
But once I have added a dialog to let the user confirm the deletion, a wrong entry is deleted. It is always the last entry in the current table. I have no idea what the reason could be - I am using the same DataTable var for the button and for the dialog.
I am working with JSF 2 (Mojarra 2.1.6) and Primefaces 3.5 deploying on JBoss 7.1.1 on a Suse 12.2 machine.
The form:
<h:form id="downloads">
<ui:include src="components/table.xhtml"/>
</h:form>
The table:
<ui:composition>
<p:dataTable value="#{controller.currentLevelResources}"
var="download" id="downloadTable" scrollHeight="120" rows="10">
<p:column sortBy="#{download.name}">
<f:facet name="header">Name</f:facet>
<h:outputText id="downloadName" value="#{download.name}" title="#{download.description}" />
</p:column>
...
<p:column>
<ui:include src="menuBar.xhtml"></ui:include>
</p:column>
The menu bar:
<ui:composition>
<p:commandButton id="edit"
action="#{downloadEditController.editResource(download)}"
icon="ui-icon-gear" title="Edit" oncomplete="updateStyles()"
update=":downloads" />
<p:commandButton id="delete" onclick="deletedDlg.show();"
icon="ui-icon-trash" title="Delete" oncomplete="updateStyles()" />
<p:dialog header="Delete confirmation" widgetVar="deletedDlg"
resizable="false">
<h:panelGroup layout="block" style="padding:5px;">
<h:outputText
value="The Resource #{download} will be deleted. Proceed?" />
</h:panelGroup>
<p:commandButton id="deleteBtn" value="Delete"
oncomplete="deletedDlg.hide(); updateStyles(); "
action="#{downloadEditController.deleteResource(download)}"
process="#this" update=":downloads">
</p:commandButton>
<p:commandButton value="Cancel" type="button"
onclick="deletedDlg.hide();" />
</p:dialog>
If I replace the dialog with this, everything works:
<p:commandButton id="delete" icon="ui-icon-trash" title="Delete"
action="#{downloadEditController.deleteResource(download)}"
oncomplete="updateStyles()" update=":downloads" />
Creating a <p:dialog> for every row is not a good idea.
For starters you had better create a single <p:dialog> outside your <p:dataTable>.
Next thing that I would do is to set the id or the row var in your bean upon delete button click and in case of confirmation in dialog use that id or the row var from bean to delete.
This is how your delete button could look like, set the download var in prepareDataForDeletion action and show the dialog...
<p:commandButton id="deleteConfirmation" icon="ui-icon-trash" title="Delete"
action="#{downloadEditController.prepareDataForDeletion(download)}"
onsucess="deletedDlg.show();"/>
Regarding your current anomaly: it's because all your dialogs have the same widgetVar and each next one is overriding the previously declared one all the way until the last one. You could dynamically give them a different widget names like so widgetVar="deleteDlg_#{someIndex}", but this makes no sense if you can have just only one reusable dialog whose content is updated before opening.
I have problem with editing datatable with primefaces.
I have tested datatableRowSelection example but it did'nt work.
when I click on the button edit the dialog is displayed but with empty values.
Please Help!
here is my code:
in: ListingPage.xhtml, I have:
<p:column headerText="Edition">
<p:commandButton update="edition" oncomplete="marqueDialog.show()" image="ui-icon ui-icon-pencil">
<f:setPropertyActionListener value="#{item}"
target="#{marqueController.selected}" />
</p:commandButton>
</p:column>
width="400" height="500" showEffect="explode" hideEffect="explode" modal="true" >
<h:panelGrid id="edition" columns="2" cellpadding="4">
</h:panelGrid>
</p:dialog>
See my answer to this question posted shortly before yours...
Cannot update a componet from p:commandLink 'update' attribute,the Link is persent in p:dataTable
The inside of the dialog should be in a seperate form from the dataTable.
EDIT: To clear confusion, DO NOT DO THIS:
<h:form ...>
...
<h:form ...>
...
</h:form>
...
</h:form>
Also, place a form INSIDE the dialog, do NOT encapsulate the dialog:
<h:form ...>
...
<p:dataTable ...>
...
</h:form>
<p:dialog appendToBody="true" ...>
<h:form ...>
...
</h:form>
</p:dialog>
Something like the above should allow the commandButton update to occur to elements WITHIN the dialog.