更新对话框而不立即关闭它？答案

【问题标题】：Update a dialog without closing it immediately?更新对话框而不立即关闭它？
【发布时间】：2016-04-16 18:13:54
【问题描述】：

我目前正在尝试通过 Javascript 打开一个对话框，并在显示对话框之前更新其元素。

触发器来自 primefaces push，所以我尝试通过 JavaScript 来处理它。

基本上流程是这样的：

<p:socket onMessage="onStart" channel="/votingStartChannel" />

套接字触发以下 JavaScript：

function onStart(data)
{                                                   
    votingDialogRefresh();
    PF('votingDialogWindow').show();
}

请注意，我的对话框名为votingDialogWindow。

另一个函数，votingDialogRefresh(); 正在触发以下内容：

<h:form>
    <p:remoteCommand name="votingDialogRefresh" update="votingDialogWindow" />
</h:form>

在显示之前“应该”更新对话框。

但是，一旦我启动流程，对话框就会立即打开和关闭。我可以看到它 3 秒钟。此外，据我所知，在这个短暂的时间跨度内，没有任何更新，因为所有字段仍未填充预期值。

我在这里做错了什么？

【问题讨论】：

标签： javascript jsf primefaces

【解决方案1】：

您的技术问题是由于<p:remoteCommand> 执行“即发即弃”异步 (ajax) 请求而引起的。基本上，在发送 ajax 请求后，votingDialogRefresh() 函数调用立即返回并前进到显示对话框的PF('votingDialogWindow').show()。但是当<p:remoteCommand>后面的ajax响应返回时，会更新整个对话框。显然，对话框的默认状态是“关闭”。所以它会在视觉上立即关闭。默认状态由visible属性控制；如果您使用了visible="#{facesContext.postback}"，它会显示为已打开，这只会影响用户体验，因为最终用户会看到对话框的内容在打开后不久就会更新/更改，这令人困惑。

您应该在 ajax 请求完成并更新对话框时打开对话框，而不是在触发 ajax 请求之前或更新对话框之前。您只需将调用移至oncomplete 或<p:remoteCommand> 即可实现此目的。

function onStart(data) {
    votingDialogRefresh();
}

<h:form>
    <p:remoteCommand name="votingDialogRefresh" update="votingDialogWindow" 
        oncomplete="PF('votingDialogWindow').show()" />
</h:form>

【讨论】：