Hi
I need your help.
The problem is about the topbar of the original Barcelona layout. When the topbar menu is wrapped by an <h:form component, to update for ajax request, except profile menu, the other topbar menu are not opening/expanding. When the <h:form component is removed, it return to work normaly.
Thanks in advance.
The topbar menu is not opening/expanding, when wrapped by an <h:form
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
Could you please attach your topbar.xhtml page for us to replicate?
Github Profile: https://github.com/mertsincan
-
- Posts: 16
- Joined: 05 Dec 2018, 16:38
Hi,
Thanks for your response.
The topbar.xhtml is original page of Barcelona layout from Barcelona-1.0.4.war.
The topbar.xhtml page was not modified.
Thanks for your response.
The topbar.xhtml is original page of Barcelona layout from Barcelona-1.0.4.war.
The topbar.xhtml page was not modified.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Which page are you adding h:form on? and where? Could you please attach your page?
Best Regards,
Which page are you adding h:form on? and where? Could you please attach your page?
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please change PrimeFaces.widget.Barcelona code in layout.js with the following PrimeFaces.widget.Barcelona;
Code: Select all
/**
* PrimeFaces Barcelona Layout
*/
PrimeFaces.widget.Barcelona = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.wrapper = $(document.body).find('.layout-wrapper');
this.sidebar = this.wrapper.children('.layout-sidebar');
this.tabMenu = this.jq;
this.tabMenuNav = this.tabMenu.children('.layout-tabmenu-nav');
this.tabMenuNavLinks = this.tabMenuNav.find('a');
this.tabMenuContents = this.tabMenu.find('.layout-tabmenu-content');
this.menuActive = false;
this.sidebarClick = false;
this.topbarLinkClick = false;
this.topbarMenuClick = false;
if ($('#topbar-usermenu').length)
this.usermenuLinks = $('#topbar-usermenu').find('a');
this._bindEvents();
this._restoreMenuState();
},
_bindEvents: function() {
var $this = this;
this.tabMenu.find('.menu-button').on('click', function(e) {
//Call user onTabClose callback
if($this.cfg.onTabClose) {
var index = $this.tabMenuNav.find('.active-item').index(),
result = $this.cfg.onTabClose.call($this, index);
if(result === false)
return false;
}
$this.wrapper.removeClass('layout-wrapper-menu-active');
$this.tabMenuContents.find('.ripple-animate').remove();
if(!$this.isOverlayMenu()) {
setTimeout(function() {
$(window).trigger('resize');
}, 310);
}
e.preventDefault();
});
this.tabMenu.find('.menu-pin-button').on('click', function(e) {
var icon = $(this).children('i');
if(icon.hasClass('fa-rotate-90'))
$this._saveMenuState($(this).closest('.layout-tabmenu-content').index());
else
$this.clearMenuState();
$this.tabMenuContents.find('.menu-pin-button').children('i').toggleClass('fa-rotate-90');
e.preventDefault();
});
this.tabMenuNavLinks.on('click', function(e) {
$this.sidebar.css('overflow','hidden');
setTimeout(function() {
$this.sidebar.css('overflow','');
}, 301);
var link = $(this),
index = link.parent().index();
//Call user onTabChange callback
if($this.cfg.onTabChange) {
var result = $this.cfg.onTabChange.call($this, index);
if(result === false)
return false;
}
link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');
$this.wrapper.addClass('layout-wrapper-menu-active');
$this.tabMenuContents.find('.ripple-animate').remove();
$this.tabMenuContents.removeClass('layout-tabmenu-content-active');
var tabContent = $this.tabMenuContents.eq(link.parent().index());
tabContent.addClass('layout-tabmenu-content-active'),
nanoInContent = tabContent.children('.layout-submenu-content').find('.nano');
if(nanoInContent.length) {
nanoInContent.nanoScroller();
}
if(!$this.isOverlayMenu()) {
setTimeout(function() {
$(window).trigger('resize');
}, 310);
}
var pinbutton = tabContent.find('.menu-pin-button');
if(pinbutton.length && !pinbutton.children('i').hasClass('fa-rotate-90')) {
$this._saveMenuState(link.parent().index());
}
$(this).siblings('.layout-tabmenu-tooltip').hide();
e.preventDefault();
});
if(!this.isIOS()) {
this.tabMenuNavLinks.on('mouseenter', function(e) {
var link = $(this);
if(!link.parent().hasClass('active-item')||!$this.wrapper.hasClass('layout-wrapper-menu-active')) {
link.siblings('.layout-tabmenu-tooltip').show();
}
})
.on('mouseleave', function(e) {
$(this).siblings('.layout-tabmenu-tooltip').hide();
});
}
$(document.body).off('click.topbar-menu', '#topbar-menu-button').on('click.topbar-menu', '#topbar-menu-button', null, function(e) {
$this.topbarMenuClick = true;
var topbarMenu = $this.wrapper.find('.topbar .topbar-menu');
topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');
if(topbarMenu.hasClass('topbar-menu-visible')) {
topbarMenu.addClass('fadeOutUp');
setTimeout(function() {
topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
},500);
}
else {
topbarMenu.addClass('topbar-menu-visible fadeInDown');
}
e.preventDefault();
});
$(document.body).off('click.topbar-user-button', '#topbar-usermenu-button').on('click.topbar-user-button', '#topbar-usermenu-button', null, function(e) {
//TODO: Move to CSS
$this.topbarMenuClick = true;
var topbarUserMenu = $('#topbar-usermenu');
if (topbarUserMenu.hasClass('usermenu-active')) {
topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');
setTimeout(function () {
topbarUserMenu.removeClass('usermenu-active fadeOutUp');
}, 250);
}
else {
topbarUserMenu.addClass('usermenu-active fadeInDown');
}
e.preventDefault();
});
$(document.body).off('click.topbar-user-menu', '#topbar-usermenu').on('click.topbar-user-menu', '#topbar-usermenu', null, function(e) {
$this.topbarMenuClick = true;
});
$(document.body).off('click.usermenu-links', '#topbar-usermenu a').on('click.usermenu-links', '#topbar-usermenu a', null, function(e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.usermenuLinkClick = true;
item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();
if (item.hasClass('menuitem-active')) {
item.removeClass('menuitem-active');
submenu.slideUp();
}
else {
item.addClass('menuitem-active');
submenu.slideDown();
}
if (submenu.length) {
e.preventDefault();
}
});
$(document.body).off('click.topbar-links', '.topbar-menu li a').on('click.topbar-links', '.topbar-menu li a', null, function(e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.topbarLinkClick = true;
item.siblings('.active-topmenuitem').removeClass('active-topmenuitem');
if($this.isDesktop()) {
if(submenu.length) {
if(item.hasClass('active-topmenuitem')) {
submenu.addClass('fadeOutUp');
setTimeout(function() {
item.removeClass('active-topmenuitem'),
submenu.removeClass('fadeOutUp');
},500);
}
else {
item.addClass('active-topmenuitem');
submenu.addClass('fadeInDown');
}
}
}
else {
item.children('ul').removeClass('fadeInDown fadeOutUp');
item.toggleClass('active-topmenuitem');
}
var href = link.attr('href');
if(href && href !== '#') {
window.location.href = href;
}
e.preventDefault();
});
$(document.body).off('click.topbar-menu', '.topbar-menu .search-item').on('click.topbar-menu', '.topbar-menu .search-item', null, function(e) {
$this.topbarLinkClick = true;
});
this.sidebar.off('click.sidebar').on('click.sidebar', function(e) {
$this.sidebarClick = true;
});
$(document.body).off('click.barcelona').on('click.barcelona', function() {
if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
var topbarMenu = $this.wrapper.find('.topbar .topbar-menu');
topbarMenu.children('li').filter('.active-topmenuitem').removeClass('active-topmenuitem');
topbarMenu.removeClass('topbar-menu-visible');
}
if(!$this.sidebarClick && ($this.isOverlayMenu() || !$this.isDesktop())) {
//Call user onTabClose callback
if($this.cfg.onTabClose) {
var index = $this.tabMenuNav.find('.active-item').index(),
result = $this.cfg.onTabClose.call($this, index);
if(result === false)
return false;
}
$this.wrapper.removeClass('layout-wrapper-menu-active');
}
var topbarUserMenu = $('#topbar-usermenu');
if (!$this.topbarMenuClick && topbarUserMenu.hasClass('usermenu-active')) {
topbarUserMenu.removeClass('usermenu-active');
}
$this.topbarLinkClick = false;
$this.topbarMenuClick = false;
$this.sidebarClick = false;
});
},
isTablet: function() {
var width = window.innerWidth;
return width <= 1024 && width > 640;
},
isDesktop: function() {
return window.innerWidth > 1024;
},
isMobile: function() {
return window.innerWidth <= 640;
},
isOverlayMenu: function() {
return this.wrapper.hasClass('layout-overlay-menu');
},
isIOS: function(e) {
return ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)));
},
_saveMenuState: function(index) {
$.cookie('barcelona_tabmenu_index', index.toString(), {path: '/'});
},
_restoreMenuState: function() {
var activeTabMenu = $.cookie('barcelona_tabmenu_index');
if(activeTabMenu) {
var tabContents = this.tabMenu.find('.layout-tabmenu-content');
tabContents.find('.menu-pin-button').children('i').removeClass('fa-rotate-90');
var index = parseInt(activeTabMenu);
this.wrapper.addClass('layout-wrapper-menu-active');
this.tabMenuNavLinks.eq(index).parent('li').addClass('active-item');
tabContents.eq(index).addClass('layout-tabmenu-content-active');
}
},
clearMenuState: function() {
$.removeCookie('barcelona_tabmenu_index', {path: '/'});
}
});
/* other codes */
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the update!
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 12 guests