Primefaces对话框呈现两次

时间:2011-10-24 19:04:57

标签: jsf jsf-2 dialog primefaces modal-dialog

我创建了一个像弹出窗口一样使用的ui:组件,因此我可以使用此模板的标准创建大量弹出窗口。 该组件只是一个弹出窗口,有两个按钮(取消和提交)和一个可以覆盖的内容,就像你在这里看到的那样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<ui:component>
<p:dialog widgetVar="#{idPopup}" id="#{idPopup}" modal="#{popup.modal}"
    draggable="#{popup.modal}"
    rendered="#{popup.visivel}" visible="#{popup.visivel}"
    closeOnEscape="false" closable="false" header="#{titulo}"
    resizable="false" styleClass="autoWidthDialog" showEffect="fade"
    hideEffect="fade">
    <h:panelGroup style="width:100%">
        <p:focus />
        <ui:insert name="conteudo">Nenhum conteúdo definido!</ui:insert>
        <h:panelGrid id="#{idPopup}PainelMensagens" style="width:100%">
            <p:messages />
        </h:panelGrid>
        <ui:insert name="barraDeBotoes">
            <h:panelGroup layout="block" style="width:100%">
                <p:commandButton value="CANCELAR" immediate="true" update="@form"
                    style="float:right" action="#{controladorPopup.fechar}"
                    onclick="#{idPopup}.hide();" />
                <p:commandButton value="OK" style="float:right"
                    update="@form formAlerta"
                    action="#{controladorPopup.submit}"
                    process="@form" />
            </h:panelGroup>
        </ui:insert>
    </h:panelGroup>
</p:dialog>
</ui:component>
</html>

当我尝试提交表单而不填写必填字段时,会出现问题。正确的行为只是再次显示带有消息的弹出窗口,但对话框呈现两次,一次显示消息,另一次显示消息。 你可以在这里看到这种行为:

twice rendering

这是此模板的一个用途:

<ui:composition template="../templates/popupSubmit.xhtml">
<ui:param name="titulo" value="Buscar pessoa" />
<ui:param name="popup" value="#{modeloPopupBuscaPessoa}" />
<ui:param name="controladorPopup"
    value="#{controladorPopupBuscaPessoa}" />
<ui:define name="conteudo">
    <h:panelGroup>
        <h:panelGrid columns="2">
            <h:outputLabel value="Tipo de cadastro:" style="float:none" />
            <h:selectOneMenu value="#{controladorSugestaoPessoa.tipoCadastro}"
                immediate="true">
                <f:selectItems value="#{carregadorTipoCadastro.itens}" />
                <f:ajax event="change" immediate="true" />
            </h:selectOneMenu>
        </h:panelGrid>
        <h:outputText value="Buscar por:" />
        <h:selectOneRadio value="#{controladorSugestaoPessoa.tipoBusca}"
            immediate="true">
            <f:selectItems value="#{carregadorTipoBuscaPessoa.itens}" />
            <f:ajax event="change" immediate="true" />
        </h:selectOneRadio>
        <p:autoComplete value="#{modeloPopupBuscaPessoa.itemSelecionado}"
            forceSelection="true" maxResults="10" queryDelay="500" 
            completeMethod="#{controladorSugestaoPessoa.atualizarSugestoes}"
            var="pessoa" itemLabel="#{pessoa.label}" itemValue="#{pessoa}"
            converter="#{conversorSelectItem}" />
    </h:panelGroup>
</ui:define>
</ui:composition>

这些是有用的:

<h:form id="cadastroPessoa">
    <ui:include
        src="resources/components/popups/modulo_cadastro/popupNovoCadastroPessoa.xhtml">
        <ui:param name="idPopup" value="popupNovoCadastroPessoa" />
    </ui:include>
    <ui:include
        src="resources/components/popups/modulo_cadastro/popupCadastroPessoa.xhtml">
        <ui:param name="idPopup" value="popupEdicaoCadastroPessoa" />
    </ui:include>
    <ui:include
        src="resources/components/popups/modulo_cadastro/popupBuscaPessoa.xhtml">
        <ui:param name="idPopup" value="popupBuscaCadastroPessoa" />
    </ui:include>
</h:form>

<h:form id="cadastroProduto">
    <ui:include
        src="resources/components/popups/modulo_cadastro/popupCadastroProduto.xhtml">
        <ui:param name="idPopup" value="popupNovoCadastroProduto" />
    </ui:include>
</h:form>

有人能告诉我为什么会这样吗??

8 个答案:

答案 0 :(得分:4)

我在primefaces论坛上发布了同样的问题(就像汤米陈告诉的那样),有人回答了这个问题:

  

您可能正在将对话框放在要更新的表单中,这是一个nono。永远不要只更新对话框中的内容

我试图这样做,直到我看到所有对话框都有来自服务器的“呈现”属性(只看第一个xml),我在这个应用程序中有很多对话框,其中一些与其他人有关系(在服务器上),这些是最后一个表格。

我做了一些不同的事情,我只创建了这个javascript代码:

function removerDialogo(id) {
   setTimeout(function() {
       removerDialogoAposIntervalo(id);
   }, 100);  
}

function removerDialogoAposIntervalo(id) { 
   id = id.replace(':', '\\:');
   jQuery('div.ui-dialog')
       .find('#' + id)
       .parent().eq(1)
       .remove(); 
}

并在对话框“onShow”属性上调用它:

<p:dialog widgetVar="#{idPopup}" id="#{idPopup}" modal="#{popup.modal}"
    draggable="#{popup.modal}" rendered="#{popup.visivel}"
    visible="#{popup.visivel}" closeOnEscape="false" closable="false"
    header="#{titulo}" resizable="false" styleClass="autoWidthDialog"
    showEffect="fade" hideEffect="fade" onShow="removerDialogo(this.id)">

我不喜欢这样做,但我找不到更好的解决方法... 如果有人给我一个更好的解决方案,我将不胜感激

答案 1 :(得分:3)

在我的情况下,我无法使用oncompleteI)方法隐藏对话框,因为它必须关闭某些业务逻辑。

我的情况我在UI上使用了primefaces标签。每次我浏览选项卡然后单击出现对话框的按钮,然后我的对话框编号正在增加比例 所以我使用简单的jquery脚本从UI中删除所有重复对话框 e UI。

function removeDuplicateDialogs(dialogId) {

    \\ generally all our components have : character we have to 
    \\ replace ':' with '\\:'(applying escape character)
    dialogId = dialogId.replace(/\:/g, '\\:');

    var dialogs = jQuery("div[id=" + dialogId + "]");
    var numOfDialogs = dialogs.length;
    numOfDialogs = numOfDialogs - 1;
    for (var i = 0; i < numOfDialogs; i++) {
        jQuery(dialogs[i]).remove();
    }
}

答案 2 :(得分:1)

正如我在primefaces论坛上所说,你正在用它中的对话框更新你的表单......你需要将你的对话框放在你的表单之外并单独更新它们。如果您需要在对话框中使用表单,请将其放在对话框中:

   <p:dialog><p:form> </p:form> </p:dialog>

答案 3 :(得分:1)

我在对话框中遇到了同样的问题,解决方案放在commandButton的更新中,它显示了对话框组件对话框组件的特定id而不是表单id,解决方案如下所示:

    <p:dialog id="dialogId">
        <p:commandButton value="OK" style="float:right"
             update="@form dialogId"
             action="#{controladorPopup.submit}"
             process="@form"/>
    </p:dialog>

答案 4 :(得分:0)

我会检查你的widgetVar =“#{idPopup}”id =“#{idPopup}”在提交之前和提交表单之前是一样的。也许它已经发生了变化,而且表面认为它不再存在并创造了一个新的。

答案 5 :(得分:0)

oncomplete属性添加到提交按钮,并让它隐藏对话框:

<p:commandButton value="OK" style="float:right"
                 update="@form formAlerta"
                 action="#{controladorPopup.submit}"
                 process="@form"
                 oncomplete="#{idPopup}.hide();"/>

答案 6 :(得分:0)

将表单放在对话框中不是解决问题的最佳方法,如果使用IExplorer访问应用程序,对话框将无法使用此方法

答案 7 :(得分:0)

这是一个可怕的错误,没有官方答案......

我正在使用对话框来渲染Google地图。我处理bug(使用JQuery)的方法是通过计算primefaces上DOM中“.map”元素的数量:dialog.onShow ...然后选择:last .map实例呈现(或者在你的情况下,无论如何)你正在使用的内容类)和.remove()包含它的对话框:

标记(约):

<pri:dialog onShow="popupOpen();" etc...>
    <div id="map" class"map"></div>
</pri:dialog>

JavaScript的:

function onShowDialog(){
    if($(".map").length > 1){
        $cull = $(".map:last");
        $cull.closest(".ui-dialog").remove();
    }
}

如果你是一个虐待狂,你可以,非常舒服地,使它成为一个单线...我认为这是一个Primefaces错误。关闭按钮应该彻底破坏对话框。