疊加圖像不顯示

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> 

所以基本上改變號碼：命令按鈕來一個Ajax按鈕，添加一個JavaScript函數（removeOverlay）去除覆蓋，一旦過程完成。而removeOverlay函數爲：

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