1

I have a notifictionBar on my application and I don't just want to "hide" it after close icon pressed where the hide happens on client side. My aim is to not render it again.

so I have below code. My expectation is that the "update" property of commandLink should rerender the entire notification component where it will be unrendered. As this is written here, I failed :)

Can someone help please ?

<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>
Olgun Kaya
  • 2,519
  • 4
  • 32
  • 46

1 Answers1

2

The problem is that Primefaces create the div, where the notificationBar content is displayed, outside the form tag. You can review it if you inspect the HTML code generated (in Chrome F12 to open the DevTools => Element)

It appears like the following one:

 <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>

and the 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>

Therefore, if you want to render using ajax (update uses Ajax), Javascript will not find your element if you use @form or ":announcement-form:id-announcement". An option is to use update="@all".

@all: JSF will render all components in the page; this will update the page, but will allow preserving some client-side states outside the JSF.

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

However, @all is not a best practice, so I recommend you to see the following post: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

ivasanpag
  • 149
  • 1
  • 4