Primefaces: dynamic content refresh issue
ajax, commandbutton, graphicimage, jsf, primefaces
Solution
Change from:
onclick="deleteModal.show();"
to:
oncomplete="deleteModal.show();"
This will ensure that your dialog is viewed after AJAX request is completed, not before it is started.
You should use `onclick`, when you are creating so called push buttons, the buttons with `type="button"`, which are just executing some JavaScript. Default type of buttons in Primefaces is `submit`.
Problem
I have a webapp where I select some content to be deleted. A modal pops-up displaying a preview of the image/flash selected. I hit a button and everything works fine. But, when I select another content to be deleted, the modal pops-up and, for a microsecond, it displays the previously deleted file which is then replaced by the new content I want to delete. The code for showing the dynamic content is as follows: 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 the modal but no luck. Delete button (the one that shows the delete modal): ``` <p:commandButton id="btnDelete" value="Delete" onclick="deleteModal.show();" actionListener="#{controller.initDelete}" update=":deleteForm"> ``` Delete 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> ```