Overlay image doesn't display

Question

This is a JSF 2.0 + Primefaces 3.5 app. I have a popup dialog box to confirm deleting selected item. Once user selects confirm, javascript produces 2 divs as the overlay: one is a half-transparent layer, the other is a spinning wheel gif image. Once the back end deletion process completes (it will take several seconds), the page got refreshed and the overlay disappears.

Here is my dialog box code, I use primefaces dialog tag:

    <p:dialog id="confirmRemove"
        header="Remove Confirmation" severity="alert"
        widgetVar="confirmation" modal="true" resizable="false">
        <h:panelGrid columns="1">
            <h:panelGroup id="message">
                <h:outputText id="confirmMsg"
                     value="Are you sure you want to remove the selected item?" escape="false"/>
            </h:panelGroup>
            <p:commandButton id="confirm" value="Remove"
                onclick="confirmation.hide();loadOverlay()"
                actionListener="#{myBackingBean.addInfo()" ajax="false"/>
         </h:panelGrid>
    </p:dialog>

And here is my javascript code:

    function loadOverlay()
    {
        var overlay = jQuery('<div id="overlay"d></div>');
        overlay.appendTo(document.body);
        var overlay_img = jQuery('<div id="overlay_img"><img src="../images/spinning-wheel.gif"/></div>');
        overlay_img.appendTo(document.body);
    }

And here is my stylesheet:

    #overlay {
        position:fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 10000;
    }

    #overlay_img {
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 1.0 !important;
        z-index: 10001;
    }

My problem is: once the Remove button of the confirm dialog box is clicked, the overlay is shown but not the image. If I add an alert statement at the end of the javascript function loadoverlay(), then the image would show. Also, if I change the p:commandButton ajax="false" to ajax="true" (the default mode), the image would show as well. But obviously that won't work, that means I have to manually refresh the page to make the overlay go away. And I don't think it's particularly related to Primefaces either. I have tried to use the JSf tag h:commandButton, same issue was observed.

I just want to add that if I use debugger(firebug) to go through the original code of loadOverlay, the image would display properly as well.

I also did a experiment adding a loop running for 1 second at the end of the loadOverlay function. If I run without debugger, after clicking the "Remove" button, the page freezes for a second before carrying on deploying the overlay (without the image though). But if I run it with debugger, the result will display on the screen immediately after the statement is executed. For example, after statement "overlay.appendTo(document.body)", the overlay would be deployed immediately. This make me feel the debugger is very unreliable: it seems suggesting that the debugger is running on different flow than the real deal.

I've been testing my codes on Firefox (20.0). I just tried it on IE(8), to my surprise, it works well on IE. So it's Browser specific issue.

Answer 1

I would prefer to use a page refresh to get rid of the overlay since it's a cleaner solution. But since this doesn't work for Firefox, I have to go for the Ajax solution. Change the dialog box code to following:

<p:dialog id="confirmRemove"
    header="Remove Confirmation" severity="alert"
    widgetVar="confirmation" modal="true" resizable="false">
    <h:panelGrid columns="1">
        <h:panelGroup id="message">
            <h:outputText id="confirmMsg"
                 value="Are you sure you want to remove the selected item?" escape="false"/>
        </h:panelGroup>
        <p:commandButton id="confirm" value="Remove"
            onclick="confirmation.hide();loadOverlay()"
            oncomplete="removeOverlay();"
            actionListener="#{myBackingBean.addInfo()}" />
     </h:panelGrid>
</p:dialog>

So basically change the p:commandButton to an Ajax button and add a javascript function (removeOverlay) to remove the overlay once the process is completed. And the removeOverlay function is as following:

function removeOverlay() {
    element = document.getElementById('overlay_img');
    element.parentNode.removeChild(element);
    element = document.getElementById('overlay');
    element.parentNode.removeChild(element);
}