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
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.
Some, but not all UI Components are not responding.
Restart, rebuild code and clean caches.
Part of the template file
<!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">
<h:head>
<title><ui:insert name="title">JKPGBooking /.::.\ Boka online på ED</ui:insert></title>
</h:head>
<h:body>
<h:panelGrid columns="3">
<ui:insert name="menu">
<ui:include
src="/WEB-INF/template/header_#{userbean.currUser.role}.xhtml"></ui:include>
</ui:insert>
<p:spacer style="width: 100px; height: 10px;"></p:spacer>
<ui:insert name="content_row1_col2" />
</h:panelGrid>
<ui:insert name="content_row2_col1">
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/template/footer.xhtml"></ui:include>
</ui:insert>
</h:body>
</html>
part of the .xhtml
<ui:define name="content_row1_col2">
<h:form>
<p:growl id="growl" showDetail="true" sticky="false" />
<br />
<br />
<p:panelGrid columns="5" id="userform">
<f:facet name="header">
<p:outputLabel value="Vem har bokat salen?" />
</f:facet>
<h:outputText value="vecka" />
<p:selectOneMenu value="#{infobean.week}" autoWidth="true" >
<f:selectItems value="#{infobean.allWeeks}" >
</f:selectItems>
</p:selectOneMenu>
<h:outputText value="Dag" />
<p:selectOneMenu value="#{infobean.day}">
<f:selectItems value="#{infobean.days}">
</f:selectItems>
</p:selectOneMenu>
<h:commandButton value="Sök"
action="#{infobean.getHouseSchedule}" update="resultTab">
</h:commandButton>
</p:panelGrid>
</h:form>
</ui:define>
Everything renders nicely but in this case only the button of the form is responding will says is fired. If I enlarge the page in the browser by changing the zoom the SelectOneMenu for the day is responding too, but never the the SelectOneMenu for the week. If I remove the panelGrid the form works as intended.
this is one example of the problem. On another page are tabs generatered by a script, in most cases 12-14. Often the last two or three are not responding/firing and there is no mouseover/hiver response. What really fiddles me is that is not always the case.
I have used p:layoutUnit to set up a menu on the left and a main page on the right. This works ok until I add a p:dialog. Now when I select the stocks menu item the whole page refreshes instead of just the main page. I realise p:dialog applies to the whole page since it is modal, so I wondered what is the correct way to implement this to avoid a whole page refresh?
Here is my layout:
Index2.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Index2</title>
</h:head>
<h:body>
<p:layout style="min-width:400px;min-height:700px;">
<p:layoutUnit position="west" resizable="false" size="300" minSize="40" maxSize="200">
<h:form>
<p:menu>
<p:submenu label="Menu">
<p:menuitem value="Stocks" outcome="stocks" />
<p:menuitem value="Portfolio" outcome="portfolio"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h3 style="margin-top:0">Plain Menu</h3>
<ui:insert name="source" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Stocks.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="index2.xhtml">
<ui:define name="source">
<script type="text/javascript">
function handleMessage(data)
{
if(data == 'price')
{
updateWidget();
console.log("stocks: data is price");
}
}
function onError(){
console.log("on error");
}
function onStart(){
console.log("on start");
}
function onComplete(){
console.log("on complete");
}
function onSuccess(){
console.log("on success");
}
</script>
<h:form id="form">
<p:dataGrid id="prices" var="orderBooks" value="#{stocksView.latestPricesResults}" columns="3" rows="12">
<f:facet name="header">
WST 100
</f:facet>
<p:column>
<p:panel header="#{orderBooks.bidOrderId.member.memberId}">
<h:panelGrid columns="1">
<h:outputText value="#{orderBooks.price}" />
<h:outputText value="#{orderBooks.bidOrderId.member.party}" />
<h:outputText value="#{orderBooks.lastUpdate}" />
<p:commandLink update=":form:buyDetail" oncomplete="PF('buyDialog').show()" title="View Detail">
<h:outputText value="Buy"/>
<f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:dialog header="Buy Shares" widgetVar="buyDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" appendTo="#(body)">
<p:outputPanel id="buyDetail" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputText value="Member" />
<h:outputText value="#{stocksView.selectedStock.bidOrderId.member.memberId}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<p:remoteCommand name="updateWidget"
actionListener="#{stocksView.findLatestPrices}"
autoRun="true"
update="prices"
onstart="onStart()"
oncomplete="onComplete()"
onsuccess="onSuccess()"
onerror="onError()">
</p:remoteCommand>
</h:form>
<p:socket onMessage="handleMessage" channel="/notify" />
</ui:define>
</ui:composition>
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 am using JSF (Mojara) and Primefaces 3.4 in a sample application.
I am applying a layout on a screen where on a header (north) there is one Image link (on click a dialog box gets opened).
northheader.xhtml:
<h:body>
<h:form id="headerForm">
<p:panelGrid id="headerFormPanelGridID" style="align:left;border:0px>
<p:row>
<p:column width="70">
<p:commandLink onclick="dialogWidgetWar.show();" title="SampleImg">
<p:graphicImage value="../sampleimg.jpg" />
</p:commandLink>
</p:column>
</p:row>
</p:panelGrid>
<p:dialog id="idInfo" modal="true" widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
<h:panelGrid id="sampleId" style="cellpadding" border="0" cellpadding="0" cellspacing="0" width="200">
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
For layout
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false">
<ui:include src="../northheader.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">
<ui:include src="../left.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" size="200">
<ui:insert name="pageContent"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Layout is being displayed properly, but when I Click on "SampleImg" link in northheader.xhtml, its getting opened but closing the dialog is not working, even if I
add one close button inside the dialog box and onclick="dialogWidgetWar.hide()" is not working. I am not even able to select anything.
Can anybody help me out here, where is the problem?
Add appendToBody="true" attribute inside p:dialog
<p:dialog id="idInfo" modal="true" appendToBody="true"
widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
You're using a p:dialog inside a p:layout. This always led to problems in my past experiences. A solid solution is to place the p:dialog outside of the p:layout. Since you're using ui:define and ui:insert this doesn't seem straight forward, however it's quite simple. Since you can define multiple ui:define elements in one JSF page you can define a "content" and a "dialogs" ui:insert and ui:define.
<p:layout>
<p:layoutUnit ...
<ui:insert name="content"/>
</p:layoutUnit>
</p:layout>
<ui:insert name="dialogs"/>
Try this, this should be work ;
<p:commandLink onclick="PrimeFaces.monitorDownload(hideStatus);" title="SampleImg">
java script ;
<script type="text/javascript">
function showStatus() {
dialogWidgetWar.show();
}
function hideStatus() {
dialogWidgetWar.hide();
}
</script>