Primefaces: dynamic content update issue
I have a webapp where I select some content to be removed. A modal popup showing a preview of the selected image / flash. I pressed the button and everything works fine. But when I select other content to be deleted, the modal pops up and for a microsecond displays the previously deleted file, which is then replaced with the new content I want to delete.
The code for displaying dynamic content looks like this:
For images:
<p:graphicImage value="#{controller.tempImage}" height="110"
id="imageID" />
For flash:
<p:media value="#{controller.tempImage}" width="110" height="110"
id="imageID" player="flash" />
Controller:
public StreamedContent getTempImage() {
try {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getRenderResponse() ) {
return new DefaultStreamedContent();
}
else {
tempImage = new DefaultStreamedContent(new FileInputStream("pathToFile"), "image/jpeg");
}
} catch (FileNotFoundException e) {
tempImage = new DefaultStreamedContent();
}
return tempImage;
}
I tried setting tempImage
to null before loading and autoUpdate=true
in modal but no luck.
Delete button (the one showing the delete mod):
<p:commandButton id="btnDelete" value="Delete" onclick="deleteModal.show();" actionListener="#{controller.initDelete}" update=":deleteForm">
Remove form (xhtml):
<h:form id="deleteForm" enctype="multipart/form-data" >
<p:dialog id="deleteDialog" widgetVar="deleteModal" modal="true" resizable="false" draggable="false" autoUpdate="true">
<p:outputPanel autoUpdate="false" >
<p:panelGrid id="panelId">
<p:row>
<p:column>
<p:panelGrid id="bannerPanel">
<p:row>
<p:column>
<p:graphicImage value="#{controller.tempImage}" height="110" id="imageID" />
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:row>
<f:facet name="footer">
<p:row>
<p:column>
<p:commandButton id="doDeleteBtn" value="Delete"
actionListener="#{controller.delete}" >
</p:commandButton>
</p:column>
</p:row>
</f:facet>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
source to share
Edit:
onclick="deleteModal.show();"
in
oncomplete="deleteModal.show();"
This will ensure that your dialog is viewed after the AJAX request completes, and not before it is fired.
You should use onclick
, when you create so-called buttons , c buttons type="button"
that just execute JavaScript. The default type for buttons in Primefaces is submit
.
source to share