1

这是一个 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() 的末尾添加一条警告语句，则图像会显示。此外，如果我将 p:commandButton ajax="false" 更改为 ajax="true" （默认模式），图像也会显示。但显然这不起作用，这意味着我必须手动刷新页面才能使覆盖消失。而且我也不认为它与 Primefaces 有特别的关系。我尝试使用 JSf 标签 h:commandButton，观察到同样的问题。

我只想补充一点，如果我使用 debugger(firebug) 来检查 loadOverlay 的原始代码，图像也会正确显示。

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

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

4

1 回答 1

0

我宁愿使用页面刷新来摆脱覆盖，因为它是一个更清洁的解决方案。但由于这不适用于 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);
}
于 2013-04-26T23:49:17.870 回答