仅使用 JS / jQuery 将状态从 PrimeFaces onstart 转移到 oncomplete答案

【问题标题】：Carry over state from PrimeFaces onstart to oncomplete using JS / jQuery only仅使用 JS / jQuery 将状态从 PrimeFaces onstart 转移到 oncomplete
【发布时间】：2021-07-24 07:19:28
【问题描述】：

我正在使用<p:selectCheckboxMenu multiple="true">

<p:selectCheckboxMenu id="options"
                      widgetVar="optionsCheckboxMenu"
                      value="#{someBean.selectedStrings}"
                      valueChangeListener="#{someBean.onSelectedOptionsChange}"
                      multiple="true">
    <f:selectItems id="items"
                   value="#{someBean.selectableStrings}" />
    <p:ajax process="@this"
            update="@this"
            onstart="var panelShown = $('#options_panel').css('display') == 'block';"
            oncomplete="console.log('PANEL SHOWN: ' + panelShown);
                        if (panelShown) { PF('optionsCheckboxMenu').show(); }" />
</p:selectCheckboxMenu>

该组件使用valueChangeListener="#{someBean.onSelectedOptionsChange}" 调整所选项目以使其有效，因此我必须以某种方式使用<p:ajax process="@this" update="@this" ...>。

但是，使用update="@this" 也具有组件关闭其相关复选框覆盖面板的效果。这可以通过在 oncomplete 回调中调用PF('optionsCheckboxMenu').show(); 来解决（参见How to update the label of p:selectCheckboxMenu without the component being closed after ajax call in primefaces?）。

然而，该组件还允许您通过输入中的 X 删除项目（当没有显示面板时）。 PF('optionsCheckboxMenu').show(); 将始终显示覆盖。

我现在想要的是，在发送 AJAX 请求之前检测覆盖面板当前的状态，以便我只重新显示覆盖面板，如果它之前也显示过。

我尝试的是在onstart 回调中创建一个名为panelShown 的JavaScript 变量，以便稍后在oncomplete 中对其进行评估。但是，在执行oncomplete 时，var panelShown 是未定义的。

问题：

如何将 PrimeFaces onstart 中的状态（一个简单的 JS 变量）转移到 oncomplete 回调，而无需通过一些 bean/remote 命令？

在我看来，这应该很容易实现，但我可能会错过某事。现在。

PS：我的表单使用prependId="false"。

【问题讨论】：

标签： javascript primefaces

【解决方案1】：

p:ajax onstart="..." 和 oncomplete="..." 值在两个单独的 JavaScript 函数中呈现。在函数中定义的变量仅对该函数可用。因此，您需要以某种方式在全球范围内存储您的财产。一种方法是使用window，例如：

window.panelShown = ...

在您的 onstart 中并在 oncomplete 中访问它，例如：

if (window.panelShown) { ... }

另见：

如果您想摆脱硬编码的变量名称，您可能想知道您可以使用#{component.clientId} 访问表达式语言中的当前组件。您可以将其与 PrimeFaces EL 函数 p:escapeJavaScriptVarName 和 p:resolveWidgetVar 以及 JavaScript API 函数 PrimeFaces.escapeClientId 结合使用，以获得以下通用信息：

<p:ajax process="@this"
        update="@this"
        onstart="window.#{p:escapeJavaScriptVarName(component.clientId)}Shown=$(PrimeFaces.escapeClientId('#{component.clientId}')+'_panel').css('display')=='block';"
        oncomplete="if(window.#{p:escapeJavaScriptVarName(component.clientId)}Shown){PF('#{p:resolveWidgetVar('@this', component)}').show()}" />

另见：

【讨论】：