1

これは JSF 2.0 + Primefaces 3.5 アプリです。選択したアイテムの削除を確認するポップアップ ダイアログ ボックスがあります。ユーザーが確認を選択すると、javascript はオーバーレイとして 2 つの div を生成します。1 つは半透明のレイヤーで、もう 1 つは糸車の 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の元のコードを実行すると、画像も適切に表示されることを追加したいだけです。

また、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 に答える