How to use Ajax Behavior to Menu primefaces - primefaces

How to add AjaxBehavior to primefaces MenuItem.
I tried to add AjaxBehavior listenet for a menu item. But I get an exception that MenuItem does not support any Ajax Behavior.
How to add Ajax Behavior to menu item?
<h:form>
<p:growl id="messages" />
<h3>Default Menubar</h3>
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:separator />
<p:menuitem value="Quit" url="#" />
<p:ajax event="change" listener="#{workflowController.changeMenu}" execute="#this" ></p:ajax>
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#"
icon="ui-icon-arrowreturnthick-1-w" />
<p:menuitem value="Redo" url="#"
icon="ui-icon-arrowreturnthick-1-e" />
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</h:form>
java code:
public void changeMenu(AjaxBehaviorEvent event) {
try {
Object selectOneMenuObject = (event.getSource());
MenuItem mi=(MenuItem) selectOneMenuObject;
String category = ((String) mi.getValue());
} catch (Exception e) {
log.info("class : EditPayeeProfileController,Method : changePayeeType "
+ e);
e.printStackTrace();
}
}
Error:
[org.apache.catalina.core.ContainerBase.[jboss.web].[default-host].[/icareweb].[Faces Servlet]] (http-localhost-127.0.0.1-8080-1) Servlet.service() for servlet Faces Servlet threw exception: javax.faces.view.facelets.TagException: /test1.xhtml at line 37 and column 51 Unable to attach to non-ClientBehaviorHolder parent

Use action
<p:menubar>
<p:menuitem label="Some action" action="#{bean.someAction}"/>
</p:menubar>
or actionListener attributes instead
<p:menubar>
<p:submenu label="My sub">
<p:menuitem value="Another action" actionListener="#{bean.otherActionListener}" />
</p:submenu>
</p:menubar>

Related

Getting Error: UIInstructions cannot be cast to org.primefaces.model.menu.MenuElement

I am trying to run the code of that is taken directly from primefaces website, but i am getting an error of UIInstructions cannot be cast to org.primefaces.model.menu.MenuElement
/This is my AddUser.xhtml code/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<title>Getting User Information</title>
</h:head>
<h:body>
<h:form>
<p:menubar>
        <p:submenu label="File" icon="ui-icon-document">
            <p:submenu label="New" icon="ui-icon-contact">
                <p:menuitem value="Project" url="#" />
                <p:menuitem value="Other" url="#" />
            </p:submenu>
            <p:menuitem value="Open" url="#" />
            <p:separator />
            <p:menuitem value="Quit" url="#" />
        </p:submenu>
 
        <p:submenu label="Edit" icon="ui-icon-pencil">
            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />
            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />
        </p:submenu>
 
        <p:submenu label="Help" icon="ui-icon-help">
            <p:menuitem value="Contents" url="#" />
            <p:submenu label="Search" icon="ui-icon-search">
                <p:submenu label="Text">
                    <p:menuitem value="Workspace" url="#" />
                </p:submenu>
                <p:menuitem value="File" url="#" />
            </p:submenu>
        </p:submenu>
 
        <p:submenu label="Actions" icon="ui-icon-gear">
            <p:submenu label="Ajax" icon="ui-icon-refresh">
                <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-disk" update="messages"/>
                <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/>
            </p:submenu>
            <p:submenu label="Non-Ajax" icon="ui-icon-newwin">
                <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
            </p:submenu>
        </p:submenu>
 
        <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />
 
        <f:facet name="options">
            <p:inputText style="margin-right:10px" placeholder="Search"/>
            <p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
        </f:facet>
    </p:menubar>
</h:form>
</h:body>
</html>
/This is my web.xml file/
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>UserWebApp</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>afterdark</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/my.taglib.xml</param-value>
</context-param>
</web-app>
/And my jar file is also placed in webInf/lib/
I have tried everything available online but still unable o solve it
Thanks in advance
I figured out the problem. I was copying the MenuBar code directly from primefaces website (https://www.primefaces.org/showcase/ui/menu/menubar.xhtml)
And then i realized that there are invisible characters/stuff present between each line of code. (i figured this out when i copied/paste java class code),
once these invisible stuff id deleted and my code works perfectly.
/Following code is also the primefaces website code but free of invisible characters/
<h:form>
<p:growl id="messages"/>
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:separator />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
<p:submenu label="Actions" icon="ui-icon-gear">
<p:submenu label="Ajax" icon="ui-icon-refresh">
<p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-disk" update="messages"/>
<p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/>
</p:submenu>
<p:submenu label="Non-Ajax" icon="ui-icon-newwin">
<p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
</p:submenu>
</p:submenu>
<p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />
<f:facet name="options">
<p:inputText style="margin-right:10px" placeholder="Search"/>
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
</p:menubar>
</h:form>
This error can happen also for using HTML comments inside <p:contextmenu> between <p:menuitem>, which cause the error
UIInstructions cannot be cast to org.primefaces.model.menu.MenuElement
<p:contextmenu ...>
<!-- Menu Item XYZ -->
<p:menuitem ...>

Primefaces 6.0 dialog not showing from ui:composition

I'm using Primefaces 6.0, jsf 2.2 and tomcat 9. I have a dialog box within a ui:composition which does not show up but it happens to show up when i place it in the template file.
Below is the code for the template:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<title>Title</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
App Name
</p:layoutUnit>
<p:layoutUnit position="west" size="250" collapsible="true">
<p:menu toggleable="true">
<p:submenu label="Setups">
<p:menuitem value="Department" url="/dept" icon="ui-icon-disk" />
<p:menuitem value="Company Clients" url="/companies" icon="ui-icon-contact" />
<p:menuitem value="Products" url="/products" icon="ui-icon-heart" />
<p:menuitem value="Doctors" url="/doctors" icon="ui-icon-person" />
<p:menuitem value="Suppliers" url="/suppliers" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="Kenko">
<p:menuitem value="Patient Data" url="/patientdata" icon="ui-icon-disk" />
<p:menuitem value="Point Of Sale" url="/pos" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Company Medicals" url="/companymedicals" />
<p:menuitem value="Reports" url="/reports" icon="ui-icon-home" />
<p:menuitem value="Consultation" url="/consultation" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="User Management">
<p:menuitem value="List Of Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Add Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Modify Permissions" url="/users" icon="ui-icon-star" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">WELCOME</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
and below is also the code for the facelet:
<ui:composition template="/WEB-INF/views/template/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<p:commandButton value="Add New User" icon="ui-icon-extlink" onclick="PF('addUserModal').show();" />
<p:dataTable var="user" value="#{usersList}">
<p:column headerText="Full Name">
#{user.get("fullName")}
</p:column>
<p:column headerText="User Name">
#{user.get("username")}
</p:column>
<p:column headerText="E-Mail">
#{user.get("email")}
</p:column>
<p:column headerText="Privileges">
#{user.get("privilege")}
</p:column>
<p:column headerText="Department">
#{user.get("department")}
</p:column>
<p:column headerText="Phone Number">
#{user.get("phoneNumber")}
</p:column>
</p:dataTable>
</ui:define>
<p:dialog header="Add New User" id="addUserModal" widgetVar="addUserModal" height="300">
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
</p:dialog>
I keep getting the error: TypeError: PF(...) is undefined and I've done a lot search but none seems to help me with my problem.
I really need someone to help me with this.

Why does the last Menuitem get included in the last submenu although it is outside of it?

I added a menuitem to the Primefaces (6) toggleable menu showcase:
<p:menu toggleable="true">
<p:menuitem value="Test" icon="ui-icon-disk" />
<p:submenu label="Ajax">
<p:menuitem value="Save" icon="ui-icon-disk" />
<p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>
</p:submenu>
<p:submenu label="Non-Ajax">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:submenu label="Navigations">
<p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/>
</p:submenu>
<p:menuitem value="Test" icon="ui-icon-disk" />
</p:menu>
Why does the last item "Test" get collapsed in the last submenu "Navigations" ? I expected it to stay outside, just like the first "Test" menuitem:
Expanded
Collapsed

layout collapsible doesnt work - primefaces

i m working on a project. project main page has a layout with 2 layoutunits and each layoutunit have forms. when i run project page is loading correctly but one of layoutunit collapsible property does not work. when i click on it layoutunit is closing then opening again.
i m using primefaces 5.3 and i m not a elit user.
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit style=" font-size: 14px!important" position="west" collapsible="true" header="#{kullanici.adsoyadkullanici}" >
<h:form id="anamenu">
<p:panelMenu style="width: 250px; height: 600px!important">
<p:submenu label="Genel" icon="fa fa-cog">
<p:menuitem value="Ana Gösterge Tablosu 1" actionListener="#{turnPage.changePage(101)}" update="mainform:panel1" />
<p:menuitem value="Ana Gösterge Tablosu 2" actionListener="#{turnPage.changePage(102)}" update="mainform:panel1" />
</p:submenu>
<p:submenu label="Demografik Göstergeler" icon="fa fa-area-chart">
<p:menuitem value="Nüfus Piramidi" actionListener="#{turnPage.changePage(201)}" update="mainform:panel1" />
<p:menuitem value="Genel Demografik Göstergeler" actionListener="#{turnPage.changePage(202)}" update="mainform:panel1"/>
<p:menuitem value="Kırsal ve Kentsel Nüfus" actionListener="#{turnPage.changePage(203)}" update="mainform:panel1"/>
<p:menuitem value="0-14 Yaş Nüfus Oranları" actionListener="#{turnPage.changePage(204)}" update="mainform:panel1"/>
<p:menuitem value="65 Yaş Üstü Nüfus Oranları" actionListener="#{turnPage.changePage(205)}" update="mainform:panel1" />
<p:menuitem value="Toplam Yaş Bağımlılık Oranları" actionListener="#{turnPage.changePage(206)}" update="mainform:panel1" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutcenter" style="font-size: 14px" position="center" collapsible="true" >
<h:form id="mainform">
<p:outputPanel id="panel1">
<ui:include src="#{turnPage.pathpage}" />
</p:outputPanel>
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>

Primefaces menubar right align submenu

I've discovered I can play a commandbutton in the options facet (right side of menubar), however I can't seem to add a submenu in the same way. I want an actual menu dropdown aligned to the right, not a button.
Any ideas?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head title="Primefaces Test">
<style>
.ui-layout-north {
z-index: 20 !important;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
</style>
</h:head>
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<f:facet name="options">
<p:commandButton value="logout" />
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</f:facet>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
-- Shane
I solve it using something like this:
style="position: absolute; right: 6px;"
Just try it.
I ended up just forgetting the whole "options" facet and used css float instead, I hope this helps someone:
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<p:submenu label="Videos2" style="float:right">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
--Shane
If you are using bootstrap the you can just use the built in flexbox classes
NOTE: This is a primeng (angular) example and will align ALL items right.
<p-menubar [model]="items" styleClass="d-flex justify-content-end"></p-menubar>