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
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.
I have the following XHTML page.
The main point is that i want to show a notification when the user click a button. But i don't know why, when i click the button, the notification doesn't appear at all.
<!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:c="http://java.sun.com/jsp/jstl/core"
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>
</h:head>
<f:metadata>
<f:viewParam name="partyname" value="#{personalPageBean.party.name}"/>
</f:metadata>
<h:body>
<p:notificationBar position="top" effect="slide" widgetVar="bar" styleClass="top">
<h:outputText value="What PrimeFaces has so far is just the beginning!" style="font-size:36px;" />
</p:notificationBar>
<ui:include src="../horizontal_menu.xhtml">
</ui:include>
<c:choose>
<c:when test="#{personalPageBean.memberOfParty}">
<p:panel id="panel" header="#{personalPageBean.party.name}" style="margin-bottom:10px;">
<h:panelGrid columns="2">
<h:outputLabel for="symbol" value="Symbol:" />
<h:graphicImage value="#{('../partysymbols/'.concat(personalPageBean.party.symbol))}" width="200" height="171" />
<h:outputLabel for="program" value="Program:" />
<h:outputLabel id="program" value="# {personalPageBean.party.program}" />
<h:link id="partyname" outcome="../memberlist" value="memberlist">
<f:param name="partyname" value="# {personalPageBean.party.name}" />
</h:link>
<p:commandButton value="Show" onclick="bar.show()" type="button" />
</h:panelGrid>
</p:panel>
</c:when>
<c:otherwise>
<h1>You aren't member of a party.</h1>
<h:link outcome="personalpage">my personal page</h:link>
</c:otherwise>
</c:choose>
</h:body>
</html>
So, sorry if i copied the whole page but i really have no idea on where is the error.
thanks to all of you in advance
Try this:
For bar:
<p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar">
<h:outputText value="What PrimeFaces has so far is just the beginning!" style="font-size:36px;" />
</p:notificationBar>
And for button:
<p:commandButton value="Show" onclick="PF('bar').show()" type="button" />
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.
The following code contains two tabs and basic code from showcase example. I tried to put this code into a xhtml and did ui:include within the tabs and also just adding them within tabs as list below. Either way when I click the submit button, do not see any results displayed.
Thanks in advance
<?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:form>
<p:tabView id="tabs" orientation="left" styleClass=".borderlessUnit" dynamic="true">
<p:tab id="tab0" title="Test Menu 1">
<p:layout id="layout0" style="min-height:600px;">
<p:layoutUnit position="center" resizable="true" styleClass="borderlessUnit">
<h:outputLabel for="name" value="Name 1:" style="font-weight:bold"/>
<p:inputText id="name" value="#{personBean.firstname}" />
<p:commandButton value="Submit" update="display"/>
<h:outputText value="#{personBean.firstname}" id="display" />
</p:layoutUnit>
</p:layout>
</p:tab>
<p:tab id="tab1" title="Test Menu 2">
<p:layout id="layout1" style="min-height:600px;">
<p:layoutUnit position="center" resizable="true" styleClass="borderlessUnit">
<h:outputLabel for="name1" value="Name 2:" style="font-weight:bold"/>
<p:inputText id="name1" value="#{personBean.secondname}" />
<p:commandButton value="Submit1" update="display1"/>
<h:outputText value="#{personBean.secondname}" id="display1" />
</p:layoutUnit>
</p:layout>
</p:tab>
</p:tabView>
</h:form>
</html>
In use manual of PrimeFaces is documented that you should avoid nesting layout and layout units inside forms, and that each layout unit should have its own form, instead. So remove form, and put separated form inside each layoutUnit
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 ... />