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.
Related
I am using Jsf primefaces version 8 and trying to show the calendar field in the xhtml page. But inspite all efforts, the popup calendar field is not displaying at all in the page.
My main.xhtml page contains a p:dialog and this dialog includes another xhtml page, dateEdit.xhtml. Inside the second xhtml, I am trying to have the p:datePicker or p:calendar field. But its not working.
Below is the piece of code from my main.xhtml page:
<p:dialog closable="true" visible="false" modal="true" id="dateDialog" widgetVar="dateDialog" resizable="false" showEffect="fade" hideEffect="fade"
header="Date Edit" width="60%" height="50%" style="max-height:100%; overflow:auto; ">
<ui:include src="dateEdit.xhtml" >
</ui:include>
</p:dialog>
Below is the code snippet from the dateEdit.xhtml :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" >
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="../jsfStyle.css" media="all"></link>
</f:facet>
</h:head>
<h:body>
<h:form id="formDtId" enctype="multipart/form-data" method="post" >
<p:outputPanel id="editProjectInfo">
<h:panelGrid id="coreGrid" columns="3" style="margin-bottom:10px" cellpadding="7">
<p:outputLabel for="update_Date" value="Demo Date : " />
<p:calendar id="update_Date" value="#{dateManagedBean.demoDate}" mode="popup" navigator="true" pattern="yyyy-MM-dd" style="font-size:8pt;" showOn="button" >
<f:convertDateTime type="date" pattern="yyyy-MM-dd" for="update_Date"></f:convertDateTime>
</p:calendar>
</h:panelGrid>
</p:outputPanel>
</h:form>
</h:body>
</html>
But if I click on the button icon, no calendar is getting displayed. Nothing is happening.
I tried with the below code also, instead of p:calendar, but that also didn't work :
<p:datePicker id="update_Date" value="#{dateManagedBean.demoDate}" pattern="MM-dd-yyyy" showIcon="true" />
Kindly help to resolve this issue. Thanks.
There seems to be a bug in Primefaces v6.1 when using p:selectOneMenu, it keeps the focus when displaying a modal dialog. You can use the arrow keys up/down to change the selectOneMenu selection. When i replace p:selectOneMenu with h:selectOneMenu it works as expected. Any idea how a can move the focus to the input1 field?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<!-- PF('statusWidget').blur();document.activeElement.blur(); -->
<p:selectOneMenu id="status" widgetVar="statusWidget"
onchange="PF('dlg').show();" value="test1">
<f:selectItem itemValue="test1" itemLabel="TEST_1"/>
<f:selectItem itemValue="test2" itemLabel="TEST_2"/>
<f:selectItem itemValue="test3" itemLabel="TEST_3"/>
</p:selectOneMenu>
<!-- onShow="document.activeElement.blur();" -->
<p:dialog widgetVar="dlg" modal="true" focus="input1">
<p:inputText id="input1" widgetVar="test"/>
</p:dialog>
</h:form>
</h:body>
</html>
I have fixed this by adding a delayed call to focus().
onchange="PF('dlg').show();setTimeout(function() { $('#form:input1').focus() },10)"
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 have created a mobile web page using PrimeFaces Mobile. I am using PrimeFaces-4.0 and primefaces-mobile-0.9.4. Everything looks fine except that "update" property of p:commandButton does not work.
<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:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<f:view contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
<pm:page title="PrimeFaces Mobile" id="pm1">
<pm:view id="viewA">
<pm:header title="A"/>
<pm:content>
<h:form id="f1">
<p:inputText value="#{mobileBean.title}"/>
<p:commandButton value="Update" update=":formB:display" />
</h:form>
</pm:content>
</pm:view>
<pm:view id="viewB">
<pm:header title="B"/>
<pm:content>
<h:form id="formB">
<h:outputText id="display" value="#{mobileBean.title}"/>
</h:form>
</pm:content>
</pm:view>
</pm:page>
</f:view>
I have tried also 'update="#([id$=display])" ' as suggested here primefaces commandbutton update does not work but nothing changes. Can anyone help please?
I am creating a demo project using primeface 3.3 and JSF, in which if a user doesn't fill a required field then it should show a message. Here is my 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> growl</title>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" sticky="true" />
<p:panel >
<h:panelGrid columns="3">
<h:outputText value="Your Name: *" />
<p:inputText value="#{someBean}" required="true" label="Name" requiredMessage="User Name Requireds"/>
<h:messages style="color:red;margin:5px;" />
</h:panelGrid>
<p:commandButton value="Save" action="success" />
</p:panel>
</h:form>
</h:body>
</f:view>
</html>
when clicking to save button without filling user name it doesn't show the required message
The <p:commandButton> sends by default an ajax request wherein by default the entire form is executed (as in process="#form"), but by default actually nothing will be updated (as in update="").
If you want to update the UI on complete of the ajax request, then you need to explicitly specify the update attribute. For example, this updates the entire form:
<p:commandButton ... update="#form" />
And this updates only a specific component:
<h:messages id="messages" ... />
<p:commandButton ... update="messages" />
You can alternatively also use PrimeFaces own <p:messages> which supports auto-updating.
<p:messages ... autoUpdate="true" />
<p:commandButton ... />