Primefaces 在关闭通知栏后删除它答案

【问题标题】：Primefaces remove NotificationBar after closing itPrimefaces 在关闭通知栏后删除它
【发布时间】：2021-12-18 21:58:12
【问题描述】：

我的应用程序上有一个通知栏，我不想在按下关闭图标后“隐藏”它，隐藏发生在客户端。我的目标是不再渲染它。

所以我有以下代码。我的期望是 commandLink 的“更新”属性应该重新渲染整个通知组件，它将不被渲染。写在这里，我失败了:)

有人可以帮忙吗？

<h:form id="announcement-form">
    <p:notificationBar id="id-announcement"
            position="top" effect="slide"
            autoDisplay="true" styleClass="top"
            widgetVar="announcement"
            rendered="#{announcementSupport.shouldDisplayAnnouncement()}">
        <p:commandLink title="Close" class="ui-notificationbar-close"
                        action="#{announcementSupport.announcementClosed}"
                        update=":announcement-form:id-announcement">
            <i class="fa fa-times fa-2x" />
        </p:commandLink>
        <div class="announcement">
            <div class="logo">
            </div>
            <div class="content">
                <div class="title">
                    <h:outputText value="#{messages['main.announcement.title']}"/>
                </div>
                <div class="body">
                    <h:outputText value="#{announcementSupport.announcement}"/>
                </div>
            </div>
        </div>
    </p:notificationBar>
</h:form>

【问题讨论】：

把你的 update 改成 update="@form" 看看是否可行。
试过了，效果不好。谢谢建议。

标签： jsf primefaces server-side-rendering

【解决方案1】：

问题在于 Primefaces 在表单标签之外创建了显示通知栏内容的 div。如果您检查生成的 HTML 代码（在 Chrome F12 中打开 DevTools => 元素），您可以查看它

如下图所示：

 <form id="article" name="article" method="post" action="/jsf/index.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="article" value="article">
    <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-4946597065858326738:-2241332223426242416" autocomplete="off">
</form>
<div id="textarea_simulator" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div><div id="article:notificationBar" class="ui-notificationbar ui-widget ui-widget-content top" style="top: 0px; display: block;"><a id="article:commandLink" href="#" class="ui-commandlink ui-widget ui-notificationbar-close" aria-label="Close" onclick="PrimeFaces.ab({s:&quot;article:commandLink&quot;,f:&quot;article&quot;,u:&quot;@all&quot;});return false;" title="Close">
   <i class="ui-icon ui-icon-closethick"></i></a>
   <span id="article:output" style="font-size:1.5 rem;">You Rock!</span>
</div>

和xhtml：

 <h:form id="article">

        <p:notificationBar id="notificationBar" position="top" effect="slide" styleClass="top" rendered="#{helloWorld.renderNotificationbar}"
                           widgetVar="myNotificationBarWV" autoDisplay="true">
            <p:commandLink id="commandLink" title="Close" class="ui-notificationbar-close"
                           action="#{helloWorld.announcementClosed}"
                           update="@all">
                <i class="ui-icon ui-icon-closethick" />
            </p:commandLink>
            <h:outputText id="output" value="You Rock!" style="font-size:1.5 rem;"/>
        </p:notificationBar>
</h:form>

因此，如果你想使用 ajax 渲染（更新使用 Ajax），如果你使用 @form 或 ":announcement-form:id-announcement"，Javascript 将找不到你的元素。一个选项是使用 update="@all"。

@all：JSF 将渲染页面中的所有组件；这将更新页面，但允许在 JSF 之外保留一些客户端状态。

  javax.faces.partial.ajax: true
javax.faces.source: article:commandLink
javax.faces.partial.execute: @all
javax.faces.partial.render: @all

但是，@all 不是最佳实践，因此我建议您查看以下帖子： How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

【讨论】：

这个答案是正确的，应该这样标记。