Question

是否可以在同一个按钮点击事件上打开一个新的对话框实例？

例如：

click -> open dialog
click again -> open a second dialog, keeping the first one opened
click again -> ... and so on

Answer 1

以下是基于您的要求（iframe）

的解决方案

XHTML 的

    <h:form id="form">

        <div id="dialogs"></div>

        <p:commandButton value="New Terminal" 
                         update="dilaogContainer"
                         oncomplete="handleNewDialog()"/>

        <h:panelGroup id="dilaogContainer">
            <p:dialog id="#{bean.nextDialogId()}" height="300" width="300" >                     
                <iframe src="http://www.w3schools.com/" width="100%" height="100%"></iframe>
            </p:dialog>
        </h:panelGroup>

    </h:form>

豆

public String nextDialogId() {
    // Generate random id of 5 char
    return org.apache.commons.lang.RandomStringUtils.random(5, true, false);
}

JS

var dialogs = [];

function handleNewDialog() {
   newDialog = $(PrimeFaces.escapeClientId('form:dilaogContainer')).find(">:first-child");
   newDialog.appendTo("#dialogs");
   newDialogVar = getWidgetVar(newDialog.attr('id'));        
   newDialogVar.show();
   moveDialog(newDialogVar);
   dialogs.push(newDialogVar); 
}

function moveDialog(dialog) {
   if(dialogs.length > 0) {
       lastDialog = dialogs[dialogs.length -1];
       dialog.jq.css({'left' : lastDialog.jq.position().left+ 300 +'px'})
   } else {
       dialog.jq.css({'left' : '0px'})
   }
}

function getWidgetVar(id) {
   widgetName = 'widget_' + id.replace(/\:/g, '_');
   return window[widgetName];
}

在按钮上单击，我们更新dialogContainer，从而更新并使用新ID生成对话框。我们将生成的Dialog放在容器外部，方法是将其附加到对话框div中，显示它，根据显示的其他对话框重新定位它。

注意：请记住，此方法仅在iframe情况下有效，其中我们的DOM树未与JSF组件树同步。

就是这样的。

jsf dialogs

Answer 2

我可以根据需要添加一个新对话框，只需将此代码添加到p：命令事件

即可

UIComponent panelGroup = FacesContext.getCurrentInstance().getViewRoot().findComponent(":sm:yourSites");
Dialog dialog = new Dialog();
String id = "Sample"+System.currentTimeMillis();
dialog.setId(id );
dialog.setHeader(id);
dialog.setVisible(true);
dialog.setMinimizable(true);
dialog.setWidgetVar("W"+id);
panelGroup.getChildren().add(dialog);
this.dialogWidget = dialog.getWidgetVar();

和

<p:commandButton  icon="ui-icon-person" action="#{myMB.connect}" title="Connect" update=":sm:yourSites" oncomplete="#{myMB.dialogWidget}.show();">  
<f:setPropertyActionListener value="#{site.name}" target="#{myMB.siteId}"  />  
</p:commandButton>

但后来我注意到对话框只存在于同一页面上下文中，它与新的浏览器弹出窗口不同:-(

另外，在父组件刷新时，打开的对话框关闭（它们不会保持大小调整大小）

所以我认为我无法避免窗口弹出方法。

primefaces 4 - 每次事件发生时如何创建新的对话框实例

2 个答案: