Question

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>            

Answer 1

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.