Reputation: 189
I'm currently working with a PrimeFaces dataTable and am trying endlessly to append a new to the dataTable immediately after the user adds it. Server-side, everything is working -- data is saved to both the database and hard disk. I'd like to see a partial-page update following the successful request, and I just can't seem to get it to work. Here is my XHTML code:
<div class="content">
<div id="mainContent">
<div class="topNav">
<h:form id="navForm">
<p:commandButton value="Upload"/>
<p:commandButton value="New Folder" onclick="createDlg.show();" />
<p:commandButton value="Delete Folder" action="#" />
</h:form>
</div>
<div id="filePanel">
<h:form id="dataTable" prependId="false">
<p:dialog header="Create" widgetVar="createDlg" modal="true" height="200">
<p:panel header="New Folder">
<h:panelGrid columns="2">
<h:outputLabel value="Name:" for="txt_name"></h:outputLabel>
<p:inputText id="txt_name" value="#{directoryController.newDir.name}" required="true" />
<p:commandButton value="Create" actionListener="#{directoryController.createNew}" update="dGrid" oncomplete="createDlg.hide();"/>
<p:ajaxStatus style="width:16px; height:16px;">
<f:facet name="start">
<h:outputText value="Saving..." />
</f:facet>
<f:facet name="">
<h:outputText value="Complete." />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
</p:panel>
</p:dialog>
<p:dataTable id="dGrid" value="#{directoryController.itemsByOwner}" var="dir">
<p:column selectionMode="multiple"/>
<p:column sortBy="#{dir.name}">
<f:facet name="header">
File Name
</f:facet>
<h:outputText value="#{dir.name}" />
</p:column>
<p:column>
<f:facet name="header">
File Size
</f:facet>
</p:column>
</p:dataTable>
</h:form>
</div>
</div>
</div>
And finally, here is my backing bean.
public String createNew(){
newDir.setDateCreated(new Date());
newDir.setDateModified(new Date());
newDir.setId(BigDecimal.ZERO);
newDir.setLocation(ROOT_DIRECTORY + currentUser.getUsername() + "/");
newDir.setFilesCollection(f);
newDir.setDescription("");
newDir.setOwner(currentUser);
current = newDir;
create();
persistDirectoryFromObject(newDir);
newDir = new Directory();
RequestContext.getCurrentInstance().addPartialUpdateTarget("dGrid");
return null;
}
Upvotes: 3
Views: 6714
Reputation:
If you are using 3.0.M4 you could do:
... ...
<p:outputPanel autoUpdate="true">
<p:dataTable id="dGrid" value="#{directoryController.itemsByOwner}" var="dir">
<p:column selectionMode="multiple"/>
<p:column sortBy="#{dir.name}">
<f:facet name="header">
File Name
</f:facet>
<h:outputText value="#{dir.name}" />
</p:column>
<p:column>
<f:facet name="header">
File Size
</f:facet>
</p:column>
</p:dataTable>
</p:outputPanel>
or you could simply:
<p:commandButton value="Create" action="#{directoryController.createNew}" oncomplete="createDlg.hide();" ajax="false" />
Upvotes: 1