Question

这是一个JSF 2.0 + Primefaces 3.5应用程序。我有一个弹出对话框来确认删除所选项目。一旦用户选择确认，javascript会产生2个div作为叠加：一个是半透明层，另一个是旋转轮gif图像。一旦后端删除过程完成（将需要几秒钟），页面就会刷新并且叠加层会消失。

这是我的对话框代码，我使用的是primefaces对话框标签：

    <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>

这是我的javascript代码：

    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);
    }

这是我的样式表：

    #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;
    }

我的问题是：点击确认对话框的删除按钮后，会显示叠加层，但不显示图像。如果我在javascript函数loadoverlay（）的末尾添加一个alert语句，那么图像就会显示出来。此外，如果我将p：commandButton ajax =“false”更改为ajax =“true”（默认模式），图像也会显示。但显然这不起作用，这意味着我必须手动刷新页面以使叠加层消失。而且我认为它与Primefaces也没有特别的关系。我试图使用JSf标签h：commandButton，观察到同样的问题。

我只想补充一点，如果我使用调试器（firebug）来完成loadOverlay的原始代码，那么图像也会正常显示。

我还做了一个实验，在loadOverlay函数结束时添加一个运行1秒的循环。如果我在没有调试器的情况下运行，在单击“删除”按钮后，页面会冻结一秒钟，然后再继续部署覆盖（不包括图像）。但是如果我用调试器运行它，结果将在语句执行后立即显示在屏幕上。例如，在语句“overlay.appendTo（document.body）”之后，将立即部署叠加层。这让我觉得调试器非常不可靠：它似乎表明调试器在不同的流程上运行而不是真正的交易。

我一直在Firefox（20.0）上测试我的代码。我只是在IE（8）上尝试过，令我惊讶的是，它在IE上运行良好。所以这是浏览器特定的问题。

Answer 1

我更喜欢使用页面刷新来摆脱覆盖，因为它是一个更清洁的解决方案。但由于这对Firefox不起作用，我必须选择Ajax解决方案。将对话框代码更改为以下：

<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>

所以基本上将p：commandButton更改为Ajax按钮并添加一个javascript函数（removeOverlay）以在完成该过程后删除叠加层。 removeOverlay函数如下：

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

不显示叠加图像

1 个答案: