Hi,
I´ve implemented in the notification bar a p:datatable with some actions (read, unread) button...
Currently the button is working and the function is called, but the notification panel is closed as soon I will click the mouse...
Here a screeshot:
- The red and green (in the option columns) are my action buttons
- As soon I will click on of the them, the whole notification panel will be closed...
The panel will be closed also when I try to sort the datatable...
How can this be fixed? I guess something in the layout.js file?
Notification Bar - not close if a p:command / p:commandLink is clicked?
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Please update your layout.js like;
Please update your layout.js like;
Code: Select all
// line 293
bindTopbarEvents: function() {
var $this = this;
...
this.topbarItems.children('ul').off('click.topbar').on('click.topbar', function(e) { /* Please add this code block */
$this.topbarItemClicked = true;
});
},
...
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the update! We'll discuss this and get back to you.
Github Profile: https://github.com/mertsincan
Ok, I have one additional request for p:menu / p:menuitem.... For those items it´s not working and the notification bar will be closed again...
Here is the full code:
Looking like this...
If I press <p:menuitem value="Alle als gelesen markieren" then the menu notification overlay will be close..
Can you fix this also, please?
Here is the full code:
Code: Select all
</a>
<ul style="width: 400px;">
<li class="layout-submenu-header">
<h6 class="header-text w-full">
<div class="flex justify-content-between">
<div>
<h:outputText value="Benachrichtigungen" />
</div>
<div>
<p:commandLink id="dynaButtonNotificationGeneral">
<h:outputText styleClass="fa fa-ellipsis-h White" />
</p:commandLink>
<p:menu overlay="true"
trigger="dynaButtonNotificationGeneral" my="left top"
at="left bottom" style="width: 250px !important;">
<p:menuitem value="Alle als gelesen markieren"
update=":growl" ajax="false" icon="fa fa-check" />
<p:menuitem value="Benachrichtungseinstellungen"
update=":growl" ajax="false" icon="fa fa-cog" />
<p:menuitem value="Benachrichtungen öffnen" update=":growl"
ajax="false" icon="fa fa-bell-o" />
</p:menu>
</div>
</div>
</h6>
</li>
<h:form>
<p:outputPanel deferred="true"
loaded="#{not empty notificationRequestDataScrollerByEmployeeController.lazyModel}">
<p:ajax event="load" global="false"
listener="#{notificationRequestDataScrollerByEmployeeController.init()}" />
<h:panelGroup layout="block"
rendered="#{notificationRequestDataScrollerByEmployeeController.numberTotal == 0}">
<div class="notification-item">
<div class="notification-summary">
<h:outputText value="Keine Benachrichtigung" />
</div>
</div>
</h:panelGroup>
<p:dataScroller id="notificationDataScroller"
styleClass="borderlessDatascroller"
rendered="#{notificationRequestDataScrollerByEmployeeController.numberTotal != 0}"
value="#{notificationRequestDataScrollerByEmployeeController.lazyModel}"
var="notification" chunkSize="10" mode="inline" lazy="true"
scrollHeight="300">
<div
class="grid grid-nogutter #{notification.readStatus == 'UNREAD' ? 'WhiteBlueBack' : ''}"
style="padding-top: 5px; padding-bottom: 5px;">
<div class="col-fixed" style="width: 30px">
<i class="pi pi-shopping-cart Fs20"></i>
</div>
<div class="col">
<h:outputText value="Test Test" />
<div class="EmptyBox5"></div>
<h:outputText value="Vor 10 Minuten" styleClass="Blue Fs11" />
</div>
<div class="col-fixed" style="width: 30px">
<p:commandLink id="dynaButtonNotificationSingle">
<h:outputText styleClass="fa fa-dot-circle-o" />
</p:commandLink>
<p:menu overlay="true"
trigger="dynaButtonNotificationSingle" my="left top"
at="left bottom" style="width: 250px !important;">
<p:menuitem value="Alle als gelesen markieren"
process="@this"
actionListener="#{actionNotificationController.changeStatusToRead(notification)}"
update=":growl, @form:notificationDataScroller"
icon="fa fa-check" />
<p:menuitem value="Alle als ungelesen markieren"
process="@this"
actionListener="#{actionNotificationController.changeStatusToUnread(notification)}"
update=":growl, @form:notificationDataScroller"
icon="fa fa-window-close-o" />
</p:menu>
</div>
</div>
</p:dataScroller>
</p:outputPanel>
</h:form>
</ul></li>
Looking like this...
If I press <p:menuitem value="Alle als gelesen markieren" then the menu notification overlay will be close..
Can you fix this also, please?
Primefaces 12.0, WildFly 21
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please try <p:menu appendTo="@this" ... > ?
Github Profile: https://github.com/mertsincan
no, that´s not working...
Does the p:menu has the appendTo property?
I don´t think so: https://primefaces.github.io/primefaces ... nents/menu
Does the p:menu has the appendTo property?
I don´t think so: https://primefaces.github.io/primefaces ... nents/menu
Primefaces 12.0, WildFly 21
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi @rider,
I noticed it. Could you please create a Github core issue about appendTo usage with menu? For now, you can use the following bindEvents method;
Best Regards,
I noticed it. Could you please create a Github core issue about appendTo usage with menu? For now, you can use the following bindEvents method;
Code: Select all
....
bindEvents: function() {
var $this = this;
this.bindTopbarEvents();
this.bindMenuEvents();
this.bindRightPanelEvents();
this.bindConfigEvents();
$(document.body).off('click.layoutBody').on('click.layoutBody', function() {
if (!$this.menuClick) {
$this.wrapper.removeClass('layout-overlay-active layout-mobile-active');
$(document.body).removeClass('blocked-scroll');
if ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus() ) {
$this.menu.find('.active-menuitem').removeClass('active-menuitem');
$this.menuActive = false;
}
}
if (!$this.profileMenuClick && ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus())) {
$this.profileContainer.removeClass('layout-profile-active');
$this.profileMenu.addClass('fadeInDown').css('display', '');
}
if (!$this.topbarItemClicked) {
//$this.removeTopbarClassFromAllItems(null, 'active-topmenuitem', $this.topbarItems.filter('.active-topmenuitem'));
}
if (!$this.rightpanelClicked) {
$this.wrapper.removeClass('layout-rightpanel-active');
}
if (!$this.configMenuClicked && $this.configMenu.hasClass('layout-config-active')) {
if (!$this.wrapper.hasClass('layout-mobile-active') && !$this.wrapper.hasClass('layout-overlay-active')) {
$(document.body).removeClass('blocked-scroll');
}
$this.configMenu.removeClass('layout-config-active');
}
$this.topbarItemClicked = false;
$this.rightpanelClicked = false;
$this.menuClick = false;
$this.profileMenuClick = false;
$this.configMenuClicked = false;
});
},
...
Github Profile: https://github.com/mertsincan
Thanks, I´ve opened this: https://github.com/primefaces/primefaces/issues/9489mert.sincan wrote: ↑05 Dec 2022, 15:17Hi @rider,
I noticed it. Could you please create a Github core issue about appendTo usage with menu? For now, you can use the following bindEvents method;Best Regards,Code: Select all
.... bindEvents: function() { var $this = this; this.bindTopbarEvents(); this.bindMenuEvents(); this.bindRightPanelEvents(); this.bindConfigEvents(); $(document.body).off('click.layoutBody').on('click.layoutBody', function() { if (!$this.menuClick) { $this.wrapper.removeClass('layout-overlay-active layout-mobile-active'); $(document.body).removeClass('blocked-scroll'); if ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus() ) { $this.menu.find('.active-menuitem').removeClass('active-menuitem'); $this.menuActive = false; } } if (!$this.profileMenuClick && ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus())) { $this.profileContainer.removeClass('layout-profile-active'); $this.profileMenu.addClass('fadeInDown').css('display', ''); } if (!$this.topbarItemClicked) { //$this.removeTopbarClassFromAllItems(null, 'active-topmenuitem', $this.topbarItems.filter('.active-topmenuitem')); } if (!$this.rightpanelClicked) { $this.wrapper.removeClass('layout-rightpanel-active'); } if (!$this.configMenuClicked && $this.configMenu.hasClass('layout-config-active')) { if (!$this.wrapper.hasClass('layout-mobile-active') && !$this.wrapper.hasClass('layout-overlay-active')) { $(document.body).removeClass('blocked-scroll'); } $this.configMenu.removeClass('layout-config-active'); } $this.topbarItemClicked = false; $this.rightpanelClicked = false; $this.menuClick = false; $this.profileMenuClick = false; $this.configMenuClicked = false; }); }, ...
Primefaces 12.0, WildFly 21
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot! For now, you can use the above js code.
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests