Can't update TOPBAR from poll

[seicontrol]

Hi everyone, i'm having some problems with the topbar, i´m trying to update the whole topbar to show new messages, but when the poll update the form the topbar stop working, and you can´t click any topbar's button

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui" xmlns:po="http://primefaces.org/rain">


    <h:form id="myFormId">
        <p:poll interval="10" update="myFormId" />  //here I update the form
        <div class="layout-topbar">
            <div class="layout-topbar-wrapper">
                <div class="layout-topbar-left">
                    <h:link id="logolink" outcome="/usuariosPrincipal" styleClass="layout-topbar-logo">
                        <p:graphicImage  name="images/#{ guestPreferences.lightLogo ? 'logo.png' : 'logo.png'}"  library="rain-layout" />
                    </h:link>
                </div>
                <div class="layout-topbar-right">
                    <ul class="layout-topbar-actions">
                        <li style="display:#{noticiaVistaController.contadorCampana() == 0 ? 'none':'flex'}" class="topbar-item notifications">
                            <a >
                                <span class="ui-overlay-badge">
                                    <i class="pi pi-bell" style="font-size: 2em"></i>
                                    <!--<p:autoUpdate />-->
                                    <span   class="ui-badge ui-badge-danger" >#{noticiaVistaController.contadorCampana()}</span>

                                </span>
                            </a>
                            <ul>
                                <li class="layout-submenu-header">
                                    <h6 class="header-text">Notificaciones</h6>
                                </li>
                                <!--todos los perfiles-->
                                <li style="display:#{noticiaVistaController.notificaciones() == 0 ? 'none':'flex'}"  >
                                    <a  href="/tag/noticiasuser.xhtml">
                                        <i class="pi pi-inbox"></i>
                                        <div class="notification-item">
                                            <div class="notification-summary">Noticias</div>
                                            <div class="notification-detail">Hay <strong>#{noticiaVistaController.notificaciones()}</strong> nuevas noticias.</div>
                                        </div>
                                    </a>
                                </li>
                                <!--perfil admin-->
                                <li style="display:#{(adelantosEmpleados.nuevosAll() == 0) || (usuarios.facesUser().perfiles.permiso == 2) || (usuarios.facesUser().perfiles.permiso == 4) ? 'none':'flex'}">   
                                    <a  href="/tag/adelantosAdmin.xhtml">
                                        <i class="pi pi-check-square"></i>
                                        <div class="notification-item">
                                            <div class="notification-summary">Adelantos</div>
                                            <div class="notification-detail">Hay <strong>#{adelantosEmpleados.nuevosAll()}</strong> solicitudes por aprobar.</div>
                                        </div>
                                    </a>
                                </li>
                                <!--perfil supervisor-->
                                <li style="display:#{adelantosEmpleados.aprobadosNoEntregadosAll() == 0 || (usuarios.facesUser().perfiles.permiso == 2 ) ? 'none':'flex'}">
                                    <a  href="/tag/egresos.xhtml">
                                        <i class="pi pi-check-square"></i>
                                        <div class="notification-item">
                                            <div class="notification-summary">Adelantos</div>
                                            <div class="notification-detail">Hay <strong>#{adelantosEmpleados.aprobadosNoEntregadosAll()}</strong> solicitudes por entregar.</div>
                                        </div>
                                    </a>
                                </li>
                                <!--perfil supervisor-->
                                <li style="display:#{sueltos.notificacionsueltos() == 0 || (usuarios.facesUser().perfiles.permiso != 4 ) ? 'none':'flex'}">
                                    <a href="/tag/sueltosSupervisor.xhtml">
                                        <i class="pi pi-chart-line"></i>
                                        <div class="notification-item">
                                            <div class="notification-summary">Solicitudes Sueltos</div>
                                            <div class="notification-detail">Hay <strong>#{sueltos.notificacionsueltos()}</strong> nuevas solicitudes a entregar.</div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>


                        <ui:fragment rendered="#{guestPreferences.profileMode == 'popup' ? true : false}">
                            <h4><blockquote>#{usuarios.facesUser().primerNombre} #{usuarios.facesUser().primerApellido}</blockquote></h4>
                            <li class="topbar-item user-profile">
                                <a href="#">
                                    <p:graphicImage name="images/avatar-profilemenu.png" library="rain-layout" />
                                </a>
                                <ul class="profile_button">
                                    <li>
                                        <a href="/tag/usuariosDatos.xhtml"> 
                                            <!--para subir hay que cambiar tag por sgp-->
                                            <i class="pi pi-user"></i>
                                            <span>
                                                Perfil
                                            </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="/tag">
                                            <i class="pi pi-eject"></i>
                                            <span>
                                                Salir
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ui:fragment>
                    </ul>
                </div>
            </div>
        </div>
    </h:form>
</ui:composition>

[mert.sincan]

Hi,
Please make the following changes;

Code: Select all

// layout.js
PrimeFaces.widget.Rain = PrimeFaces.widget.BaseWidget.extend({
    ....
    refreshTopbar: function() {. // please add this method 
        this.topbar = this.wrapper.find('.layout-topbar');
        this.topbarItems = this.topbar.find('.layout-topbar-actions > li.topbar-item');
        this.topbarLinks = this.topbarItems.children('a');
        this.topbarSearchItemMenu = this.topbar.find('.search-item');

        this.bindTopbarEvents();
    },
    ....
});

And then please call this method on oncomplete callback of poll component.

Code: Select all

<pr:menu widgetVar="myMenuWidget" ... />

Code: Select all

<p:poll interval="10" update="myFormId" oncomplete="PF('myMenuWidget').refreshTopbar()" />  //here I update the form

Best Regards,

[seicontrol]

Thanks a lot!!!!! It works perfectly..

[mert.sincan]

Glad to hear, thanks a lot for the update!

Best Regards,