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?
Related
I have a problem.
I'm making a website with the layout of PrimeFaces, which loads a page in the center when I click on any menu item on the left, but when I use the theme of BootsFaces (<bnu: panel ....> </bnu: panel>, page load in the center but it is not another load, when I do not use the theme, everything works fine but the panel shown in plain text without style look = "success" for example.
<?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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:bnu="http://bootsfaces.net/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Page</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false" >
<h1>PAGE</h1>
</p:layoutUnit>
<p:layoutUnit position="west" size="195" header="Panel" resizable="true" closable="false" collapsible="true" >
<h:form id="form" >
<p:menu>
<p:menuitem id="abc" value="Inicio" action="#{bean.page0()}" update=":content:pcenter" />
<p:submenu label="ABC" >
<p:menuitem id="X1" value="CC1" action="#{bean.page1()}" update=":content:pcenter"/>
<p:menuitem id="X2" value="CC2" action="#{bean.page2()}" update=":content:pcenter"/>
<p:menuitem id="X3" value="CC3" action="#{bean.page3()}" update=":content:pcenter"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Welcome user" >
<h:form id="content">
<p:panel id="pcenter">
<ui:include src="#{bean.page}.xhtml" />
</p:panel>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<h:outputText value="South unit content." />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I try this and not show the style look="success" but show the title
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
I try this, and the same
<ui:composition 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">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</ui:composition>
And try this, working but after not load the pages in the center when click elements of left menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
</head>
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
Actually, each of the three versions work. I've created a project based on your XHTML pages, and it runs flawlessly. Both with and without the PrimeFaces Bootstrap theme. So my best guess is there's a problem with your project setup.
I recommend you check out my example from https://github.com/stephanrauh/BootsFaces-Examples/tree/master/PrimeFacesLayout and try to find the difference to your project.
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" />
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 PF 4.0 and I'm trying to use templating and dialog. This is my template:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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></h:head>
<h:body>
<p:growl for="message" id="msg" showDetail="true" />
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="150px" style="border: none !important">
<h:form id="menutoolbar">
<p:toolbar>
[...]
</p:toolbar>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit position="center" style="border: none !important">
<ui:insert name="content">Center of page</ui:insert>
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" collapsible="false" gutter="0">
<ui:insert name="status"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I'm using the template to render another page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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></h:head>
<h:body>
<f:metadata>
<f:viewParam name="id_file" value="#{csvDetalleBean.idFile}" />
</f:metadata>
<ui:composition template="./baseTemplate.xhtml">
<ui:define name="content">
<h:form id="tableform" prependId="false">
<p:dataTable id="detalle" value="#{csvDetalleBean.tableModel}" var="row" selection="#{csvDetalleBean.selectedRows}">
[...columns definition...]
</p:dataTable>
</h:form>
</ui:define>
<ui:define name="status">
<h:form id="statusform">
<p:panel id="panel" header="Status" style="margin-bottom:10px;">
[...controls definitions...]
</p:panel>
<p:poll interval="20" async="true" update="panel" />
</h:form>
</ui:define>
<p:dialog header="Dialog" widgetVar="respuestasDialog" resizable="false" appendToBody="true">
<p:dataTable id="respuestas" value="#{transactions.rows}" var="trRow">
<p:column headerText="Confirmation number">
<h:outputText value="#{trRow.get('confirmation_nm')}" /> hola
</p:column>
</p:dataTable>
</p:dialog>
</ui:composition>
</h:body>
</html>
The point is that I cannot show the dialog because it is not rendered at all. I think the point is the composition tag, I've already tried to put the dialog outside the composition, with same results.
What's the correct way to put components outside the layout? Of course don't want to put the dialog inside the template.
Thank you very much!
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 ... />