123 lines
5.5 KiB
HTML
123 lines
5.5 KiB
HTML
<?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:p="http://primefaces.org/ui"
|
|
xmlns:f5="http://xmlns.jcp.org/jsf/passthrough"
|
|
>
|
|
<h:head>
|
|
<title>JSF Ajax</title>
|
|
</h:head>
|
|
<h:body>
|
|
<html lang="en"
|
|
xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
|
>
|
|
|
|
<h:head>
|
|
<h:outputStylesheet library="css" name="stylesheet.css" />
|
|
<h:outputScript library="js" name="do_validation.js"/>
|
|
|
|
</h:head>
|
|
<h:body>
|
|
|
|
<h:form id="f1">
|
|
<h1>Ajax Prime Faces</h1>
|
|
<h2>Partial Proccess & Partial Update</h2>
|
|
<p:panelGrid columns="1" layout="grid" >
|
|
<p:column>
|
|
|
|
<p:inputText id="full_name"
|
|
value="#{partialProcessingBean.name}"
|
|
required="required" title="Enter your name."
|
|
f5:placeholder="Name first & last"
|
|
>
|
|
</p:inputText>
|
|
</p:column>
|
|
|
|
<p:column>
|
|
|
|
<p:outputLabel value="Country: " />
|
|
<p:selectOneMenu
|
|
id="countries" value="#{partialProcessingBean.country}">
|
|
<f:selectItems value="#{partialProcessingBean.oneToMany.getAllOnes()}" />
|
|
|
|
<p:ajax listener= "#{partialProcessingBean.handleCountryChange}"
|
|
event="change" update="cities" process="@this"/>
|
|
</p:selectOneMenu>
|
|
|
|
<p:outputLabel value="City: " />
|
|
<p:selectOneMenu id="cities" value="#{partialProcessingBean.city}">
|
|
<f:selectItems value="#{partialProcessingBean.getMany()}" />
|
|
</p:selectOneMenu>
|
|
|
|
</p:column>
|
|
<p:column>
|
|
|
|
<p:inputText id="email1"
|
|
f5:placeholder="Enter your email"
|
|
value="#{partialProcessingBean.email}"
|
|
required="required"
|
|
title="Enter email"/>
|
|
|
|
<p:inputText id="email2"
|
|
f5:placeholder="Enter email again"
|
|
value="#{partialProcessingBean.emailAgain}"
|
|
required="required"
|
|
title="Enter email again."
|
|
onblur="check('f1:email1', 'f1:email2')" />
|
|
|
|
</p:column>
|
|
<p:column>
|
|
|
|
<p:calendar id="date"
|
|
f5:placeholder="Performance date"
|
|
readonlyInput="true"
|
|
value="#{partialProcessingBean.date}"
|
|
required="required"
|
|
title="Enter or choose a date."/>
|
|
</p:column>
|
|
<p:column style="padding: 30px;">
|
|
|
|
<p:outputLabel value="Number of Tickets: " />
|
|
|
|
<p:inputText id="tickets" value="#{partialProcessingBean.tickets}">
|
|
<f:passThroughAttributes value="#{partialProcessingBean.ticketAttrs}"/>
|
|
<p:ajax event="change" update="total"
|
|
listener="#{partialProcessingBean.calculateTotal}"/>
|
|
</p:inputText>
|
|
|
|
|
|
<p:outputLabel value="Ticket price: " />
|
|
|
|
<p:inputText id="price"
|
|
value="#{partialProcessingBean.price}"
|
|
|
|
p:required="required" >
|
|
<f:passThroughAttributes value="#{partialProcessingBean.priceAttrs}"/>
|
|
|
|
<p:ajax event="change" update="total" process="@this"
|
|
listener="#{partialProcessingBean.calculateTotal}"/>
|
|
</p:inputText>
|
|
<br/>
|
|
<p:outputLabel value="Estimated total: " />
|
|
|
|
<p:outputLabel id="total"
|
|
value="#{partialProcessingBean.totalValue}"
|
|
>
|
|
</p:outputLabel>
|
|
</p:column>
|
|
|
|
</p:panelGrid>
|
|
<p:commandButton value="Clear and update all"
|
|
action="confirmation">
|
|
<p:ajax update="@all" listener="#{partialProcessingBean.clear}"/>
|
|
</p:commandButton>
|
|
</h:form>
|
|
</h:body>
|
|
</html>
|
|
</h:body>
|
|
</html>
|