Files
ASDV-WebDev/Semester 3/Assignments/AjaxReview/src/main/webapp/ajax4.xhtml

124 lines
6.4 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:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>ajax4</title>
</h:head>
<h:body>
<hr/>
AJAX - process=form a update=@form
<h:form>
First Name <p:inputText style="width: 80px;" value="#{ajax3.firstName}"/>
Last Name <p:inputText style="width: 80px;" value="#{ajax3.lastName}"/>
Phone: <p:inputText style="width: 80px;" value="#{ajax3.phone}"/>
Age: <p:inputText style="width: 80px;" value="#{ajax3.age}"/>
Address: <p:inputText style="width: 80px;" value="#{ajax3.address}"/>
<p:commandButton value="Say Hello" action='#{ajax3.ajaxAction("process=form a update=@form")}'>
<p:ajax process="@form" update="@form"/>
</p:commandButton>
<p:panelGrid columns="6">
<p:outputLabel style="font-weight: bold;" value="@form"/>
<p:outputLabel style="color:red;" value="First Name: #{ajax3.firstName}"/>
<p:outputLabel style="color:blue;" value="Last Name: #{ajax3.lastName}"/>
<p:outputLabel style="color:green;" value="Phone: #{ajax3.phone}"/>
<p:outputLabel style="color:brown;" value="Age: #{ajax3.age}"/>
<p:outputLabel style="color: blueviolet" value="Address: #{ajax3.address}"/>
</p:panelGrid>
</h:form>
<br/>
<hr/>
AJAX - process=@none , update=@form
<h:form>
First Name: <p:inputText value="#{ajax3.firstName}"/>
Last Name: <p:inputText value="#{ajax3.lastName}"/>
Phone: <p:inputText value="#{ajax3.phone}"/>
Age: <p:inputText value="#{ajax3.age}"/>
Address: <p:inputText value="#{ajax3.address}"/>
<p:commandButton value="Say Hello" action="#{ajax3.ajaxAction('process=@none update=@form')}">
<p:ajax process="@none" update="@form"/>
</p:commandButton>
<p:panelGrid columns="6">
<h:outputLabel style="font-weight: bold;" value="@form"/>
<h:outputLabel style="color:red;" value="First Name: #{ajax3.firstName}"/>
<h:outputLabel style="color:blue;" value="Last Name: #{ajax3.lastName}"/>
<h:outputLabel style="color:green;" value="Phone: #{ajax3.phone}"/>
<h:outputLabel style="color:brown;" value="Age: #{ajax3.age}"/>
<h:outputLabel style="color: blueviolet" value="Address: #{ajax3.address}"/>
</p:panelGrid>
</h:form>
<br/>
<hr/>
AJAX - process=@this update=@form
<h:form>
First Name <p:inputText value="#{ajax3.firstName}"/>
Last Name <p:inputText value="#{ajax3.lastName}"/>
Phone: <p:inputText value="#{ajax3.phone}"/>
Age: <p:inputText value="#{ajax3.age}"/>
Address: <p:inputText value="#{ajax3.address}"/>
<p:commandButton value="Say Hello" action='#{ajax3.ajaxAction("process=@this update=@form")}'>
<p:ajax process="@this" update="@form"/>
</p:commandButton>
<hr/>
<h:panelGrid columns="6">
<h:outputLabel style="font-weight: bold;" value="@this"/>
<h:outputLabel value="Name: #{ajax3.firstName}"/>
<h:outputLabel value="Surname: #{ajax3.lastName}"/>
<h:outputLabel value="Phone: #{ajax3.phone}"/>
<h:outputLabel value="Age: #{ajax3.age}"/>
<h:outputLabel value="Address: #{ajax3.address}"/>
</h:panelGrid>
</h:form>
<br/>
<hr/>
AJAX - identifiers
<h:form>
First Name <p:inputText value="#{ajax3.firstName}"/>
Last Name <p:inputText id="nameInputId" value="#{ajax3.lastName}"/>
Phone: <p:inputText id="phoneInputId" value="#{ajax3.phone}"/>
Age: <p:inputText value="#{ajax3.age}"/>
Address: <p:inputText id="addressInputId" value="#{ajax3.address}"/>
<p:commandButton value="Say Hello" action="#{ajax3.ajaxAction('identifiers')}">
<p:ajax process="nameInputId phoneInputId addressInputId" update="nameOutputId phoneOutputId ageOutputId"/>
</p:commandButton>
<hr/>
<h:panelGrid columns="6">
<h:outputLabel style="font-weight: bold;" value="identifiers"/>
<h:outputLabel style="color:red;" value="First Name: #{ajax3.firstName}"/>
<h:outputLabel id="nameOutputId" style="color:blue;" value="Last Name: #{ajax3.lastName}"/>
<h:outputLabel id="phoneOutputId" style="color:green;" value="Phone: #{ajax3.phone}"/>
<h:outputLabel id="ageOutputId" style="color:brown;" value="Age: #{ajax3.age}"/>
<h:outputLabel style="color: blueviolet" value="Address: #{ajax3.address}"/>
</h:panelGrid>
</h:form>
<br/>
<hr/>
AJAX - process=@all update=@all
<hr/>
<h:form>
First Name <p:inputText value="#{ajax3.firstName}"/>
Last Name <p:inputText value="#{ajax3.lastName}"/>
Phone: <p:inputText value="#{ajax3.phone}"/>
Age: <p:inputText value="#{ajax3.age}"/>
Address: <p:inputText value="#{ajax3.address}"/>
<p:commandButton value="Say Hello" action="#{ajax3.ajaxAction('process=@all update=@all')}">
<p:ajax process="@all" update="@all"/>
</p:commandButton>
<hr/>
<h:panelGrid columns="6">
<h:outputLabel style="font-weight: bold;" value="@all"/>
<h:outputLabel style="color:red;" value="First Name: #{ajax3.firstName}"/>
<h:outputLabel style="color:blue;" value="Last Name: #{ajax3.lastName}"/>
<h:outputLabel style="color:green;" value="Phone: #{ajax3.phone}"/>
<h:outputLabel style="color:brown;" value="Age: #{ajax3.age}"/>
<h:outputLabel style="color: blueviolet" value="Address: #{ajax3.address}"/>
</h:panelGrid>
</h:form>
</h:body>
</html>