Наложение изображения не отображается

Question

Это приложение JSF 2.0 + Primefaces 3.5. У меня есть всплывающее диалоговое окно для подтверждения удаления выбранного элемента. Как только пользователь выбирает подтверждение, javascript производит 2 divs в качестве наложения: один является полупрозрачным слоем, другой - изображением 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, тот же вопрос был обнаружен.

Я просто хочу добавить, что если я использую отладчик (firebug), чтобы пройти через исходный код loadOverlay, изображение также будет отображаться правильно.

Я также сделал эксперимент, добавив цикл, выполняющийся в течение 1 секунды в конце функции loadOverlay. Если я запускаю без отладчика, после нажатия кнопки «Удалить» страница замерзает на секунду, прежде чем продолжить развертывание наложения (без изображения). Но если я запустил его с помощью отладчика, результат будет отображаться на экране сразу после выполнения инструкции. Например, после утверждения «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> 

Так в основном изменения р: CommandButton на кнопку Ajax и добавить функцию яваскрипта (removeOverlay), чтобы удалить накладку, как только процесс будет завершен. А функция removeOverlay выглядит следующим образом:

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