When I place an InputTextArea and a SelectManyMenu (in that order) in a page, I can't select any items in the menu - nothing is highlighted when I click on them.
However, if I change the order on the page (SelectManyMenu before the InputTextArea), then everything works as it's supposed to.
This works:
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<body>
<h:form>
<p:selectManyMenu id="testSMM">
<f:selectItem itemLabel="Option 1" itemValue="1"/>
<f:selectItem itemLabel="Option 2" itemValue="2"/>
<f:selectItem itemLabel="Option 3" itemValue="3"/>
</p:selectManyMenu>
<br/>
<p:inputTextarea id="testITA"/>
</h:form>
</body>
</html>
This doesn't:
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<body>
<h:form>
<p:inputTextarea id="testITA"/>
<br/>
<p:selectManyMenu id="testSMM">
<f:selectItem itemLabel="Option 1" itemValue="1"/>
<f:selectItem itemLabel="Option 2" itemValue="2"/>
<f:selectItem itemLabel="Option 3" itemValue="3"/>
</p:selectManyMenu>
</h:form>
</body>
</html>
All I did was put one tag before the other. What am I missing here?
ps: This doesn't happen with an InputText.
EDIT:
The browser console says Uncaught ReferenceError: PrimeFaces is not defined
at components.js.xhtml?ln=primefaces&v=6.0:1, and even though the generated html has the same content (but not in the same order, obviously), the InputTextArea has different attributes when I check the 'elements' tab in the console:
working code:
<textarea id="j_idt4:testITA" name="j_idt4:testITA" cols="20" rows="3"
maxlength="2147483647" class="ui-inputfield ui-inputtextarea ui-widget ui-state-default ui-corner-all ui-inputtextarea-resizable"
role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="true"
data-autosize-on="true" style="overflow: hidden; overflow-wrap: break-word; height: 63px;"
</textarea>
buggy code:
<textarea id="j_idt4:testITA" name="j_idt4:testITA" cols="20" rows="3"
maxlength="2147483647" class="ui-inputfield ui-inputtextarea ui-widget ui-state-default ui-corner-all ui-inputtextarea-resizable"
</textarea>
There have been some small issues in this regard in PrimeFaces 6.0 related to components not loading the right core javascript. These are fixed in a 6.0.x elite release and 6.1 community release.
Related
I am using Glassfish 5.0.1/4.1.1 for a Webproject (JSP, JSF, Bootsfaces, JPA). There I encountered the problem, that Glassfish is not allways building the Website correctly.
Sometimes it is build normally how it should be (Pic 1) and sometimes there are elements missing (Pic 2). This does even happen when deploying the same WAR-File.
Can anyone help with this problem?
Pic 1 - Normal Deployment:
Pic 2 - Problem:
Source Code (XHTML):
<?xml version='1.0' encoding='UTF-8' ?>
<!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:b="http://bootsfaces.net/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Statustool</title>
</h:head>
<f:view>
<h:body>
<div class="container" name="main" style="margin-top: 50px" >
<div class="d-flex align-items-end">
<b:image name="/img/Logo.png" span="6" offset="3"/>
<b:row styleClass="show-grid">
<b:column span="4" offset="4">
<h3 style=" text-align: center"><h:outputText value="Statustool Anmeldung" /></h3>
<b:form id="loginForm">
<b:inputText id="inputEmail" value="#{loginBackingBean.loginUser.email}" required="true" requiredMessage="Email muss eingegeben werden" label="Mail"/>
<b:message for="inputEmail" />
<b:inputSecret id="inputPasswort" value="#{loginBackingBean.loginUser.userPassword}" required="true" requiredMessage="Passwort muss eingegeben werden" label="Passwort"/>
<b:message for="inputPasswort"/>
<b:commandButton value="Anmelden" action="#{loginBackingBean.login()}" />
</b:form>
</b:column>
</b:row>
<ui:include src="public/footer.xhtml"/>
</div>
</div>
</h:body>
</f:view>
hello stackoverflow,
i am beginner to primefaces . and I have a question . this is my code
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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: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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>facelets</title>
</h:head>
<h:body>
<h:form>
<p:accordionPanel style="width:300px;" >
<p:tab title="tab1">
<h:commandLink value="click"></h:commandLink>
<br />
<h:commandLink value="next"></h:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
<p:tab title="tab2" id="panel">
<p:commandLink value="click" action="override" update="panel"></p:commandLink>
<br />
<p:commandLink value="next" action="header"></p:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
<p:tab title="tab3">
<h:commandLink value="click"></h:commandLink>
<br />
<h:commandLink value="next"></h:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
</p:accordionPanel>
</h:form>
</h:body>
</html>
whenver i click the commandlinks present in the second or third tabs , after selection it navigates to the first tab , and its not staying in the tab where i performed the selection Say if i clicked the "click" link inside the juniper tab , then it navigates to the first tab. any suggestions are always welcome . thanks in advance
Use partialsubmit="true" in your commandlink.
The reason for the Accordian to reset itself is that once you click on any commandlink the whole form is being refreshed instead of the panel itself. Partial submit will do a partial refresh.
http://blog.primefaces.org/?p=1842
I'm using the Dialog Framework in Primefaces 4.0 and I have the height set to the default (auto) which is fine until I click the Add button and it displays a validation message. Now the dialog height is too small and doesn't auto resize.
How can I make the dialog resize it's height on validation errors?
Before Validation Errors:
After Validation Errors:
add.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!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: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">
<h:head>
<title>Add Group</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
<h:form id="addGroupForm">
<p:messages autoUpdate="true" />
<h:panelGrid columns="2" cellspacing="10" width="300">
<h:outputLabel for="name" value="Group Name" />
<p:inputText id="name" value="#{userGroupBacking.newGroup}" required="true" requiredMessage="Group Name is Required" />
<h:panelGroup></h:panelGroup>
<h:panelGroup>
<p:commandButton value="Add" styleClass="ui-priority-primary" actionListener="#{userGroupBacking.addGroup}" update="#form" />
<p:commandButton value="Cancel" actionListener="#{userGroupBacking.cancelAddGroup}" immediate="true" />
</h:panelGroup>
</h:panelGrid>
</h:form>
</h:body>
</html>
First of all, make sure that your dialog doesn't have fixed height, second make sure that overflow of the DOM element where the notification resides in the dialog has overflow properly set. Some dialogs are a bit tricky and do not re-size easily without closing and opening again, it would be easier to help you if you could show the actual dialog. My first tip would be to catch an event in front end with jQuery and resize the dialog accordingly.
I am using the bar chart example like in the show case:
http://www.primefaces.org/showcase/ui/barChart.jsf
but I am getting an issue that the chart is drawn correctly except that the values of the x-axis and y-axis doesn't appear, as illustrated in the following image:
my only difference is that I am displaying the chart in a dynamic dialog.
I tried adding onShow method to the dialog, but I got the same effect:
onShow="barChartWidget.plot.replot();"
My xhtml code is as follows:
1- report_panel.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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:pretty="http://ocpsoft.com/prettyfaces"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<body>
<ui:composition>
<h:panelGroup layout="block"
<p:commandLink id="show_created_report" title="Show Report Dialog"
action="#{myBean.generateReport}"
oncomplete="report_dialog_widget.show();">
<h:graphicImage value="/resources/images/report.png" width="50"
height="50" />
</p:commandLink>
</h:panelGroup>
<ui:insert name="report_dialog">
<ui:include src="/pages/compositions/report_dialog.xhtml" />
</ui:insert>
</ui:composition>
</body>
</html>
2- report_dialog.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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:pretty="http://ocpsoft.com/prettyfaces"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<body>
<ui:composition>
<p:dialog id="report_dialog" showEffect="puff" height="500"
width="800" resizable="false" dir="rtl"
header="report" widgetVar="report_dialog_widget"
dynamic="true">
<h:panelGroup id="report_details" layout="block">
<p:dataTable styleClass="content_font" id="report_table"
var="record" value="#{myBean.report.tableRecords}">
<p:column headerText="Dept Name">
<h:outputText value="#{record.responsibleName}" />
</p:column>
<p:column headerText="Num Of Tasks" style="text-align:center">
<h:outputText value="#{record.tasksCount}" />
</p:column>
<p:column headerText="Num Of Finished Tasks" style="text-align:center">
<h:outputText value="#{record.finishedtasksCount}" />
</p:column>
<p:column headerText="Num Of Un Finished Tasks" style="text-align:center">
<h:outputText value="#{record.unFinishedtasksCount}" />
</p:column>
</p:dataTable>
<p:barChart widgetVar="barChartWidget" id="barChart" value="#{myBean.report.categoryModel}" legendPosition="ne" style="width:400px;height:300px;"
title="Tasks Chart" min="0" max="200" />
</h:panelGroup>
</p:dialog>
</ui:composition>
</body>
</html>
3- managedBean:
public void generateReport(){
report=new Report();
//other report stuff goes here
report.setCategoryModel(createCategoryModel());
}
private CartesianChartModel createCategoryModel() {
categoryModel = new CartesianChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
categoryModel.addSeries(boys);
categoryModel.addSeries(girls);
return categoryModel;
}
I am using PrimeFaces 3.5 with Mojarra 2.1.20
UPDATE: sampe use case project is uploaded in this link:
https://docs.google.com/file/d/0B10CrX5WSm-IakNWWHEteFlfalk/edit
- it can be downloaded via file > download
- then extract the file and build the project with maven.
UPDATE2:
I found the issue, it's related to that I have rtl direction on the body tag and on the dialog component, any ideas for fixing that ?
The issue was that the bar chart component inherits rtl direction from the body, so i had to override the bar chart style and gives it direction ltr.
I am pretty new to JSF and RichFaces. I am using RichFaces 4.X and JSF 2.0. I have created a sample page, where my command button is called a a4j button, but it does not seem to be working. Here is my page. Can someone please help
<!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:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript">
function showProgressBar()
{
alert("its in show");
}
function hideProgressBar()
{
alert("its in hide");
}
</script>
</h:head>
<h:body>
<a4j:jsFunction name="login" action="#{loginBean.validateUser}"
onbegin="showProgressBar();"
oncomplete="hideProgressBar();" />
<div id="login-container">
<div class="login-logo">
<img src="images/logo.png" />
</div>
<f:view>
<div id="loin-form">
<h1>
Log in to your account or sign up to Get Started
</h1>
<h:form>
<h:inputText id="userName" value="#{loginBean.userName}"
validator="#{loginBeanValidator.validateUserName}" required="true"
class="txtFld" />
<h:message for="userName"></h:message>
<h:inputSecret id="passWord" value="#{loginBean.passWord}"
validator="#{loginBeanValidator.validatePassword}" required="true"
class="pswrdFld" />
<h:message for="passWord"></h:message>
<p>
<a4j:commandLink id="forgotPasswordLink"
value="Forgot Your Password? " />
<a4j:commandButton id="loginButton" value="Sign In" action="login();"
styleClass="sign-btn" />
</p>
</h:form>
</div>
</f:view>
</div>
</h:body>
</html>
The actual problem is in your command button
<a4j:commandButton id="loginButton" value="Sign In" action="login();"
styleClass="sign-btn" />
The "action" attribute requires an EL expression to an action method that will be executed on the server when the button is pressed or a navigation rule. The purpose of a4j:jsFunction is to perform an ajax request from javascript call and the purpose of a4j:commandButton is to perform an ajax request when it's pressed. In your case you don't actually need a4j:jsFunction. Just remove it and put its the attributes on the a4j:commandButton like this:
<a4j:commandButton id="loginButton" value="Sign In"
action="#{loginBean.validateUser}" onbegin="showProgressBar();"
oncomplete="hideProgressBar();" styleClass="sign-btn" />