topbar.xhtml sm-topmenu dyamic li not showing

[moktc]

Hi there

In the topbar.xhtml, I try to add <li> entries on the fly which work but the menu click event does display the dynamically added li s.

Code: Select all

    		<li jsf:id="notificationPanel" jsf:rendered="#{not empty userStore.messages}" class="Fleft BordRadHalf TexAlCenter"><i class="icon-mail"></i><span class="alertBubble BordRad10 Fs9">#{fn:length(userStore.messages)}</span>
    			<ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05">
    				<ui:repeat var="message" value="#{userStore.messages}">
    				<li class="Animated05">Hello 1</li>
                              </ui:repeat>
                         </ul>
                </li>

I am using the remoteCommand to update the page which does populate the ui li messages section but when I click on the "icon-mail" the topbar.xhtml page do not show messages. I think I need to call some function like Sentinel.restoreMenuState() on the oncomplete event of remoteCommand?

Code: Select all

   	<p:remoteCommand name="updateMessage" actionListener="#{userStore.refreshMessageList()}" update=":topbarForm" process="@this" oncomplete="Sentinel.restoreMenuState();"/>

Any advice? Thanks.

[mert.sincan]

I will work on this issue and get back to you.

[moktc]

Thanks Aragon

I have settled with the following script. Not ideal and messy. I would appreciate if you can suggest a cleaner and user friendly option. I would really like to be able to hide the icon-mail <li> and only show it when there is mail (updated via polling)....

Code: Select all

<li class="Fleft BordRadHalf TexAlCenter">
    			<i class="icon-mail"></i>
    			<span jsf:id="messageCount">
    			<span class="alertBubble BordRad10 Fs9" jsf:rendered="#{not empty userStore.messages}">
	    		<h:outputText value="#{fn:length(userStore.messages)}"/>
	    		</span>
	    		</span>
    			<ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05" jsf:id="messageList">
    				<ui:fragment rendered="#{empty userStore.messages}">
	    				<li class="Animated05"><a class="white Unselectable">
	    					<span><h:outputText value="No message"/></span></a></li>
    				</ui:fragment>
    				<ui:repeat var="message" value="#{userStore.messages}">
    				<li class="Animated05" style="text-align:right">
    						<i class="icon-chat-empty"></i>#{message.description}<br/>
    						<span class="Fs10" style="vertical-align:text-top">#{message.sender.displayName} <i class="icon-cancel" style="float:right;margin-right: 0px !important;" onclick="readMessage(#{message.id})"></i></span>
    				</li>
    				</ui:repeat>
    			</ul>
    		</li>

The following function will be called to update the messages.

Code: Select all

<p:remoteCommand name="updateMessageList" actionListener="#{userStore.refreshMessageList()}" update=":topbarForm:messageCount :topbarForm:messageList" process="@this" />

Thanks.