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

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>

bean

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 生成。我们将生成的对话框附加到对话框 div 中，将其置于容器之外，显示它，并根据其他显示的对话框重新定位它。

注意:请记住，此方法仅在 iframe 情况下有效，在这种情况下，我们的 DOM 树与 JSF 组件树不同步。

事情应该是这样的。