I have selectBooleanCheckbox and h:panelGroup in xhtml page. I want set the border to panelGroup when box value is checked
Here the code:
<p:fieldset legend="Параметры печати" style="margin:0px; margin-top: 0px; padding-bottom: 0px; border: 1px solid" >
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:selectBooleanCheckbox value="#{priceListUI.borderCheck}" />
<h:outputText value="Border" />
</p:fieldset>
and <h:panelGroup>, i need set border to external block:
<h:panelGroup styleClass="ui-g-5 box"
style="padding: 15px; border: solid 1px; font-size: 16px;height: 202px;min-width:340px; position: relative">
<h:panelGroup style="height:44px; line-height: 1.4em">
<p>#{product.product.name}</p>
</h:panelGroup>
<h:panelGroup styleClass="ui-g" id="svg" style="width: 100%; display: block;">
<svg class="barcode bc-#{product.productId}"
style="position: absolute;right: 20px; top: 80px;"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
</h:panelGroup>
<h:panelGroup style="height: 20px; display: inline; position: absolute; bottom: 15px;">
Цена: #{util.fDouble(product.product.type eq 2? product.sellingPrice * 1000.0: product.sellingPrice)} тг
</h:panelGroup>
<script>
draw('#{product.product.code}', #{product.productId});
function draw(code, productId) {
var arr = {
displayValue: true,
fontSize: 16,
height: 24
};
if (code.length === 8 || code.length === 13) {
arr["format"] = "EAN" + code.length;
}
var className = ".bc-" + productId.toString();
JsBarcode(className, code, arr);
}
</script>
</h:panelGroup>
In Bean class there are getters and setters for checkbox
Can anyone help?
You can use the styleClass attribute on you panelgrid, and set the class according to the checkbox boolean value.
Example:
<h:head>
<style type="text/css">
.myBorderClass {
border: #000000 solid 10px;
}
</style>
</h:head>
<f:view>
<h:form>
<p:selectBooleanCheckbox value="#{myBean.check}">
<p:ajax update="grid"/>
</p:selectBooleanCheckbox>
<h:panelGrid id="grid" styleClass="#{myBean.check ? 'myBorderClass':''}">
<h:outputLabel>
test label
</h:outputLabel>
</h:panelGrid>
</h:form>
</f:view>
xhtml
<div class="ui-fluid">
<p:panelGrid columns="1" columnClasses="ui-grid-col-4" layout="grid"
styleClass="ui-panelgrid-blank" style="margin-top: 10px;">
<p:inputText id="firstName" value="#{Admin.firstName}"
required="true"
styleClass="addStudent"
label="firstName"
validatorMessage="Please specify the student's firstname">
</p:inputText>
<p:watermark for="firstName" value="First Name" />
<p:inputText id="lastName" value="#{Admin.lastName}"
required="true" styleClass="addStudent"
label="lastName"
validatorMessage="Please specify the student's lastname">
</p:inputText>
<p:watermark for="lastName" value="Last Name (will also be username)" />
<p:inputText id="email" value="#{Admin.email}"
required="true" styleClass="addStudent"
lable="email"
validatorMessage="Please specify the student's email">
</p:inputText>
<p:watermark for="email" value="email" />
<p:commandButton value="Add" icon="fa fa-user-plus" action="#{Admin.addStudent}"
styleClass="addButton" ajax="false" style="padding: 4px; margin-top: 15px;"/>
</p:panelGrid>
</div>
css
.addStudent {
border: 1px solid #EAEAEA !important;
background: #EAEAEA !important;
margin: 10px 0 !important;
color: #444 !important;
padding: 18px 0px 18px 10px !important;
border-radius: 6px !important;
}
The watermarks won't show in firefox, instead an empty inputText is shown.
Only if the styleClass is removed then the watermark is shown.
I also tried style="padding: 18px 0px 18px 10px;" instead of styleClass but still nothing.
Any ideas why this is happening?
I have been trying to update form components by using primefaces ajax . but update property do not update .
Let me elaborate:
I have two selectonemenu in my form and I want to take the selected values from the menus and on submit button click I want the dataTable to be updated and populated with the respective data ..
<p:outputLabel id="state" value="State Name"></p:outputLabel>
<p:selectOneMenu id="statemenu" style="width:300px;"
value="#{MenuBean.state}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{MenuBean.stateList}"></f:selectItems>
</p:selectOneMenu>
<br></br>
<p:outputLabel value="District"></p:outputLabel>
<p:selectOneMenu id="dist" style="width:300px;"
value="#{MenuBean.district}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{MenuBean.districtList}"></f:selectItems>
</p:selectOneMenu>
<p:commandButton id="btnSubmit" value="Submit" type="submit"
partialSubmit="true" process="statemenu,dist,#this"
actionListener="#{MenuBean.setVisiblity}"
action="#{MenuBean.getValues}"
title="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 14px; font-weight: normal'>
</p:commandButton>
Here is the Backing Bean
public void getValues() {
System.out.println("getting the values");
DataTable.getDataTable(state, district);
System.out.println(DataTable.Filter);
System.out.println(DataTable.isLoaded);
System.out.println(state);
System.out.println(district);
}
public void setVisiblity(ActionEvent event) {
DataTable.Filter = false;
DataTable.isLoaded = true;
System.out.println(event.getSource().toString());
System.out.println("Enters the actionListener");
}
Here is the datatable i want to render and filter panel i want to hide on click
<p:dataTable id="disptable" var="table" lazy="true"
rowKey="#{table.sheet_no}" selectionMode="single"
selection="#{DataTable.selectedSheet}" scrollable="true"
scrollHeight="115" rendered="#{DataTable.loaded}"
style="widht:auto ; margin-left:420px;margin-right:30px ;box-shadow: 10px 10px 25px #888888;"
widgetVar="tabl" emptyMessage="No Records to display.">
<p:column headerText="Sheet Number" style="width:25%">
<h:outputLabel value="#{table.sheet_no}"></h:outputLabel>
</p:column>
<p:column headerText="State" style="width:25%">
<h:outputLabel value="#{table.state_cd}"></h:outputLabel>
</p:column>
<p:column headerText="District" style="width:25%">
<h:outputLabel value="#{table.district_cd}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="selectButton" title="Show Complete Details"
icon="./images/show.png" update=":form:disp"
oncomplete="PF('Dialog').show()" process="#this,disptable"
style="height:25px;" ajax="true" iconPos="center" />
<p:commandButton style="height:25px;" id="addCart"
title="Add to Cart" icon="./images/cart.png" global="false" />
<p:commandButton style="height:25px;" id="location"
update=":form:tabs:MapDetails" process="#this,disptable"
title="Show Co-ordinates" icon="./images/cart.png" global="false" />
</f:facet>
</p:dataTable>
<h:panelGrid id="filter" columns="1" cellpadding="10" cellspacing="2"
rendered="#{DataTable.filter}"
style="position:absolute;bottom:15px;right:80px;border: 1px solid #1f497d;box-shadow: 10px 10px 25px #888888;
height:auto;width:600px;Text-align:center;">
<p:outputLabel value="Filter your search to get result."></p:outputLabel>
</h:panelGrid>
</h:panelGrid>
Here is the whole page
<?xml version="1.0" encoding="ISO-8859-1" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="./css/extra-styles.css" rel="stylesheet" type="text/css" />
<link href="./css/menustyles.css" rel="stylesheet" type="text/css" />
<title>SOI MAP TRANSACTION REGISTRY :: MAP</title>
</h:head>
<body>
<h:form id="form">
<f:event type="preRenderView" listener="#{DataTable.init}" />
<div id="header">
<div style="height: 151px;">
<img id="logo"
style="position: relative; left: 60px; height: 146px; width: 100px"
src="images\img.gif" />
<h:panelGrid id="panel1" columns="1"
style="position: absolute; bottom: auto; left: 175px; right: auto; top: 30px ">
<h:outputText id="output1" value="Survey of India"
style='line-height: normal; font-variant: normal; color: #400040; text-transform: none; font-style: normal; font-size: xx-large; font-family: "Times New Roman", Serif; font-weight: normal'></h:outputText>
<h:outputText styleClass="shadow" value="Map Transaction Registry"
style='font-style: italic; font-size: xx-large; font-family: Georgia, "Times New Roman", Serif; font-weight: normal'
id="shadow"></h:outputText>
</h:panelGrid>
<div id="div1"
style="height: 5px; widht: auto; background-color: #CDCDCD; position: relative; top: 12px; bottom: auto; left: auto; right: auto"></div>
<hr id="hr"
style="height: 5px; widht: auto; position: relative; top: 3px; bottom: auto; left: auto; right: auto" />
</div>
<div id="div2"
style="background: #616063; height: 44px; width: auto; position: relative"></div>
<div id='cssmenu'>
<ul>
<li><a href='index.xhtml'><span>Home</span></a></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Our Products</span></a></li>
<li><span>Search Image</span></li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last'><a href='signup.xhtml'><span>New
User</span></a></li>
</ul>
</div>
</div>
<p:fieldset rendered="#{!login_bean.validationComplete}">
<img
style="position: absolute; left: 10px; top: 45px; height: 45px; width: 45x"
src="images\login.gif" />
<p:growl id="growl" showDetail="false" sticky="false" life="3000"
autoUpdate="TURE" />
<h:panelGrid columns="4" class="formTable"
style="position: relative; left: 35px; top: 6px ;">
<p:outputLabel value="Login/Email" style='font-size: 16px;' />
<p:inputText value="#{login_bean.username}" id="username"
required="true" requiredMessage="Please Enter the username"
style="height:15px; width:auto;" />
</h:panelGrid>
<h:panelGrid columns="4" class="formTable"
style="position: relative; left: 35px; top:6px">
<p:outputLabel value="Password" style='font-size: 16px;' />
<br />
<p:password style="height:15px;position: relative; left: 8px"
id="password" value="#{login_bean.password}" required="true"
requiredMessage="Please Enter the Password">
</p:password>
</h:panelGrid>
<h:panelGrid columns="3" class="formTable"
style="position: relative; left: 80px; top: 6px">
<br />
</h:panelGrid>
<h:commandButton id="btnLogin" value="Login"
action="#{login_bean.check}" type="submit" update="true"
style="position: relative; left:245px; top:-20px ; height:25px;widht:38;text-align: center; font-size: 14px;" />
<p:commandLink id="link"
style="position: relative; left:70px; top:-20px ;font-size:13px;"
value="Forgot Password ?"></p:commandLink>
</p:fieldset>
<p:fieldset rendered="#{login_bean.validationComplete}">
<img
style="position: absolute; left: 10px; top: 30px; height: 65px; width: 55px"
src="images\icon.png" />
<h:panelGrid columns="1" class="formTable"
style="position: relative; left: 35px; top: 6px ;">
<p:outputLabel
value="Welcome #{login_bean.username} to Map Tansaction Registry"
style='font-size: 16px; color: red; text-align: center; font-style: bold; font-family: "Times New Roman", Serif; font-weight: bold' />
</h:panelGrid>
<h:panelGrid columns="4" class="formTable"
style="position: relative; left: 55px; top: 6px ;" cellpadding="3"
cellspacing="3">
<h:graphicImage url="images\cart.png"></h:graphicImage>
<h:commandLink value="Cart"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
<h:graphicImage url="images\edit.png"></h:graphicImage>
<h:commandLink value="Edit Details"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
<h:graphicImage url="images\pass.png"></h:graphicImage>
<h:commandLink value="Change Password"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
<h:graphicImage url="images\logout.png"></h:graphicImage>
<h:commandLink value="Logout" action="#{login_bean.logout}"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
</h:panelGrid>
</p:fieldset>
<!-- Search Tab View -->
<p:tabView activeIndex="2">
<p:tab title="Map Sheet">
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Map Sheet No :" />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<br />
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Scale/GSD " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:selectOneMenu tabindex="1" style="height:25px;widht:auto;">
<f:selectItem itemLabel="-- ALL --" itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
<p:commandButton id="submit" value="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
</h:panelGrid>
<!-- <h:panelGrid>
<p:graphicImage url="images/tips.png"></p:graphicImage>
<p:outputLabel value="Tips :"></p:outputLabel>
</h:panelGrid> -->
</p:tab>
<p:tab title="Lat/Long">
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lat BL : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lng BL : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lat TR : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lng TR : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<br />
<p:commandLink value="Grab bounding from the Map"></p:commandLink>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Scale/GSD"></p:outputLabel>
<p:selectOneMenu tabindex="1">
<f:selectItem itemLabel="-- ALL --" itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
<p:commandButton value="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
</h:panelGrid>
</p:tab>
<p:tab title="Name">
<h:panelGrid columns="1">
<p:outputLabel id="state" value="State Name"></p:outputLabel>
<p:selectOneMenu id="statemenu" style="width:300px;"
value="#{DropDown.selectedState}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{DropDown.stateList}"></f:selectItems>
</p:selectOneMenu>
<br></br>
<p:outputLabel value="District"></p:outputLabel>
<p:selectOneMenu id="dist" style="width:300px;"
value="#{DropDown.selectedDistrict}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{DropDown.districtList}"></f:selectItems>
</p:selectOneMenu>
</h:panelGrid>
<br />
<h:panelGrid columns="2">
<p:outputLabel value="Scale/GSD"></p:outputLabel>
<p:selectOneMenu tabindex="1">
<f:selectItem itemLabel=" --ALL-- " itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 14px; font-weight: normal'></p:commandButton>
<p:commandButton id="btnSubmit" value="Submit" type="submit"
partialSubmit="true" process="statemenu,dist,#this"
actionListener="#{DropDown.setVisiblity}"
action="#{DropDown.getValues}" title="Submit"
update="#all"
ajax="true"
style='font-family: font-family : Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 14px; font-weight: normal'>
</p:commandButton>
</h:panelGrid>
</p:tab>
<p:tab title="Spec">
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Specification Number :" />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<br />
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Scale/GSD " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:selectOneMenu tabindex="1" style="height:25px;widht:auto;">
<f:selectItem itemLabel="-- ALL --" itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
<p:commandButton value="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
</h:panelGrid>
</p:tab>
</p:tabView>
<!--The tab to Display the Complete Meta data of the sheet selected -->
<p:tabView id="tabs" scrollable="true" orientation="top"
styleClass="tabs" style="position:absolute; top:240px;">
<p:tab title="Meta Data">
<h:panelGrid id="MapDetails">
<h:panelGrid columns="2" cellpadding="2" cellspacing="5"
style="position:relative;left:5px;top:50px">
<p:outputLabel value="Sheet No : " style="font:serif"></p:outputLabel>
<p:outputLabel value="#{DataTable.selectedSheet.sheet_no}"></p:outputLabel>
<p:outputLabel value="Surveyed year : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Publication Year : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Map Projection: "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Map Datum : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Place : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
</h:panelGrid>
<h:panelGrid>
<h:panelGrid style="position:relative;left:-110px;top:-170px">
<div
style="position: absolute; top: 95px; left: 20px; border-bottom-style: solid; border-bottom-width: thin; border-top-style: solid; border-top-color: #000000; height: 104px; width: 202px; bottom: auto; left: 414px; right: auto; border-bottom-color: #000000; border-top-width: thin"></div>
<div
style="border-left-color: #000000; border-right-color: #000000; border-left-style: dashed; border-right-width: medium; border-right-style: dashed; border-left-width: medium; height: 180px; width: 134px; position: absolute; bottom: auto; left: 450px; right: auto; top: 65px"></div>
</h:panelGrid>
<p:outputLabel title="North East Corner Longitude"
value="#{DataTable.selectedSheet.NE_Corner_Long}"
style="position: absolute; bottom: auto; right: 135px; top:75px"></p:outputLabel>
<p:outputLabel title="North West Corner Longitude"
value="#{DataTable.selectedSheet.NW_Corner_Long}"
style="position: absolute; bottom: auto; right: 275px; top: 75px"></p:outputLabel>
<p:outputLabel title="North East Corner Latitude"
value="#{DataTable.selectedSheet.NE_Corner_Lat}"
style="position: absolute; bottom: auto; right: 82px; top: 123px"></p:outputLabel>
<p:outputLabel title="South East Corner Latitude"
value="#{DataTable.selectedSheet.SE_Corner_Lat}"
style="position: absolute; bottom: auto; right: 82px; top: 228px"></p:outputLabel>
<p:outputLabel title="North West Corner Latitude"
value="#{DataTable.selectedSheet.NW_Corner_Lat}"
style="position: absolute; bottom: auto; right: 330px; top: 123px"></p:outputLabel>
<p:outputLabel title="South West Corner Latitude"
value="#{DataTable.selectedSheet.SW_Corner_Lat}"
style="position: absolute; bottom: auto; right: 330px; top: 228px"></p:outputLabel>
<p:outputLabel title="South East Corner Longitude"
value="#{DataTable.selectedSheet.SE_Corner_Long}"
style="position: absolute; bottom: auto; right: 135px; top: 290px"></p:outputLabel>
<p:outputLabel title="Sorth West Corner Longitude"
value="#{DataTable.selectedSheet.SW_Corner_Long}"
style="position: absolute; bottom: auto; right: 275px; top: 290px"></p:outputLabel>
<h:panelGrid columns="2" cellpadding="3" cellspacing="5"
style="postion:absolute;margin-left:300px;margin-top:85px">
<p:outputLabel value="State : "></p:outputLabel>
<p:outputLabel value="#{DataTable.selectedSheet.state_cd}"></p:outputLabel>
<p:outputLabel value="District : "></p:outputLabel>
<p:outputLabel value="#{DataTable.selectedSheet.district_cd}"></p:outputLabel>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</p:tab>
</p:tabView>
<h:panelGrid id="render" style="margin-top:200px;">
<!-- The Datatable -->
<p:dataTable id="disptable" value="#{DataTable.dataTable}"
var="table" lazy="true" rowKey="#{table.sheet_no}"
selectionMode="single" selection="#{DataTable.selectedSheet}"
scrollable="true" scrollHeight="115" rendered="#{DataTable.loaded}"
style="widht:auto ; margin-left:420px;margin-right:30px ;box-shadow: 10px 10px 25px #888888;"
widgetVar="tabl" emptyMessage="No Records to display.">
<p:column headerText="Sheet Number" style="width:25%">
<h:outputLabel value="#{table.sheet_no}"></h:outputLabel>
</p:column>
<p:column headerText="State" style="width:25%">
<h:outputLabel value="#{table.state_cd}"></h:outputLabel>
</p:column>
<p:column headerText="District" style="width:25%">
<h:outputLabel value="#{table.district_cd}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="selectButton" title="Show Complete Details"
icon="./images/show.png" update=":form:disp"
oncomplete="PF('Dialog').show()" process="#this,disptable"
style="height:25px;" ajax="true" iconPos="center" />
<p:commandButton style="height:25px;" id="addCart"
title="Add to Cart" icon="./images/cart.png" global="false" />
<p:commandButton style="height:25px;" id="location"
update=":form:tabs:MapDetails" process="#this,disptable"
title="Show Co-ordinates" icon="./images/cart.png" global="false" />
</f:facet>
</p:dataTable>
<!--The Dialog to display the selected sheet detials -->
<p:dialog header="Detail" widgetVar="Dialog" resizable="false"
id="carDlg" modal="true">
<h:panelGrid id="disp" columns="2" cellpadding="4" cellspacing="4"
style="margin:0 auto;">
<f:facet name="header">
</f:facet>
<h:outputText id="sheet" value="Sheet No:" />
<h:outputText value="#{DataTable.selectedSheet.sheet_no}"
style="font-weight:bold" />
<h:outputText id="state" value="State:" />
<h:outputText value="#{DataTable.selectedSheet.state_cd}"
style="font-weight:bold" />
<h:outputText id="district" value="District:" />
<h:outputText value="#{DataTable.selectedSheet.district_cd}"
style="font-weight:bold" />
</h:panelGrid>
</p:dialog>
<!-- Panel Grid which display the Filter text -->
<h:panelGrid id="filter" columns="1" cellpadding="10" cellspacing="2"
rendered="#{DataTable.filter}"
style="position:absolute;bottom:15px;right:80px;border: 1px solid #1f497d;box-shadow: 10px 10px 25px #888888;
height:auto;width:600px;Text-align:center;">
<p:outputLabel value="Filter your search to get result."></p:outputLabel>
</h:panelGrid>
</h:panelGrid>
<!-- Ajax Status for ajax request -->
<p:ajaxStatus onstart="PF('statusDialog').show();"
onsuccess="PF('statusDialog').hide();" />
<!-- Dialog for ajax Status -->
<p:dialog modal="true" widgetVar="statusDialog" draggable="false"
closable="false" maximizable="false" resizable="false"
header="Searching">
<p:graphicImage value="/images/loading.gif" />
</p:dialog>
</h:form>
</body>
</html>
you are missing update="distTable" in commandButton
<p:commandButton id="btnSubmit" value="Submit"
partialSubmit="true" process="statemenu,dist,#this"
actionListener="#{MenuBean.setVisiblity}"
action="#{MenuBean.getValues}"
title="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 14px; font-weight: normal'
update="distTable">
</p:commandButton>
that page is a terrible mess. even eclipse refuse to format its content...
multiple suggestions:
put your css, js, images inside /resources/js, /resources/css folders
use <h:outputStylesheet name="css/menustyles.css" /> instead of <link href="./css/menustyles.css" rel="stylesheet" type="text/css" />
use <h:body> instead of <body>
do not use <f:event type="preRenderView" listener="#{DataTable.init}" /> if DataTable is a #ManagedBean, use #PostConstruct instead
prefer conventional names: #{dataTableBean.init} is better than #{DataTable.init}
use <h:graphicImage name="images/img.gif" /> instead of <img src="images\img.gif" />
use / instead of \ in paths
put <p:growl> as direct child of <h:body> or <h:form>
USE CSS CLASSES!!
it's nearly impossible to debug a page coded that way.
i'm sorry, but i give up.
I am trying to highlight the rows of a table when mouse is over. Here is the code:
<div style="position: relative; top: 120px; left: 300px">
<h:panelGrid columns="2">
<h:form>
<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='yellow'"
onrowmouseout="this.style.backgroundColor='white'" value="#{moneyTransferManager.allAccounts}" var="accounts"
selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
style="height:170px; width:484px;">
<a4j:ajax execute="#form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
render=":res"/>
<f:facet name="header">
<h:outputText value="Hesaplarım"/>
</f:facet>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Hesap Numarası"/>
</f:facet>
<h:outputText value="#{accounts.accountNumber}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Para Birimi"/>
</f:facet>
<h:outputText value="#{accounts.accountCurrency}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="IBAN"/>
</f:facet>
<h:outputText value="#{accounts.iban}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Bakiye"/>
</f:facet>
<h:outputText value="#{accounts.balance}"/>
</rich:column>
</rich:extendedDataTable>
</h:form>
<a4j:outputPanel id="res">
<rich:panel header="Seçilen Hesap:" rendered="#{not empty extTableSelectionBean.selectionItems}">
<rich:list type="unordered" value="#{extTableSelectionBean.selectionItems}" var="sel">
<h:outputText value="#{sel.accountCurrency} - #{sel.iban} - #{sel.balance}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
<rich:panel styleClass="top">
<div style="position: relative; left: -3px; top: 23px">
<h:outputText style=" font-size: 12px; font-weight: bold; " value="Yapmak istediğiniz işlem .."></h:outputText>
</div>
<h:form>
<div style="position: relative; left: 160px; top: -3px">
<rich:select value="#{transactionManager.selection}" defaultLabel="Bir işlem seçin...">
<f:selectItem itemValue="0" itemLabel="Hesap Hareketlerini Listele" />
</rich:select>
</div>
<div style="position: relative; left: 380px; top: -22px">
<h:commandButton action="#{transactionManager.accountActivity()}" value="Devam" style="color: #000000; font-weight: bold; width: 70px; height: 21px; background-color: grey; -moz-border-radius: 0px; -webkit-border-radius: 15px;"></h:commandButton>
</div>
</h:form>
</rich:panel>
</h:panelGrid>
</div>
The problem is, only columns 1-2 together or 3-4 together are highlighted like this:
Can anyone tell me the problem? Thanks
This is being caused by the frozenColumns attribute. Remove it if you want all the rows to be selected.
In according to this post, I want to redesign my template, because I have the same issue.
My <h:commandButton>'s are not called.
EDIT: I implement a way to make a template from this tutorial: KLICK
Here's my new main template-client called app.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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./layout/layout.xhtml">
<ui:define name="header">
<ui:include src="./misc/header.xhtml"/>
</ui:define>
<ui:define name="rightColumn">
Ads here
</ui:define>
<ui:define name="leftColumn">
<ui:include src="./misc/sideBar.xhtml"/>
</ui:define>
<ui:define name="content">
<h:panelGroup id="contentPanel">
<ui:include src="#{appController.content}.xhtml" />
</h:panelGroup>
</ui:define>
<ui:define name="footer">
<ui:include src="./misc/footer.xhtml"/>
</ui:define>
</ui:composition>
</body>
</html>
The master-layout page:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
<style type="text/css" media="all">
body
{
background-color: #2b3a3c;
color: #2d2e2e;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.2em;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
#outerWrapper
{
background-color: #fff;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 100%;
}
#outerWrapper #header
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn
{
background-color: #eef6ed;
border-left: solid 1px #8ab573; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 180px;
height: 200px;
}
#outerWrapper #contentWrapper #leftColumn
{
background-color: #eef6ed;
border-right: solid 1px #8ab573; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 180px;
height: 200px;
}
#outerWrapper #contentWrapper #content
{
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper .clearFloat
{
clear: both;
display: block;
}
#outerWrapper #footer
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<ui:insert name="header"/>
</div>
<div id="contentWrapper">
<div id="rightColumn">
<ui:insert name="rightColumn"/>
</div>
<div id="leftColumn">
<ui:insert name="leftColumn"/>
</div>
<div id="content">
<ui:insert name="content"/>
</div>
<br />
</div>
<div id="footer">
<ui:insert name="footer"/>
</div>
</div>
</body>
</html>
And this is one of the Pages, which gets included. EDIT: I set in the managed bean this page as default. The menu at the left side doesn't do anything at the moment. Because it isn't needed at the moment. The only thing i want is that this action gets called if i click on this button: <h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>
<?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:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
</f:facet>
</h:head>
<h:body>
<h:form id="frm_hldy_plan">
<p:panelGrid style="width: 100%;" >
<f:facet name="header">
<p:row>
<p:column colspan="2" style="height:50px;">
Urlaubsplanung
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width: 420px; vertical-align: top;" colspan="1">
<p:panel style="font-size: 12px; width: 420px; position: relative; border: 1px solid gray">
<f:facet name="header">
Urlaubsantrag Formular
</f:facet>
<p:panelGrid id="pnl_userinfo" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Persönliche Informationen</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<h:outputText value="Name:"/>
</p:column>
<p:column>
<h:outputText value="#{loginController.sessionData.user_name}" />
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<h:outputText value="Team:" />
</p:column>
<p:column>
<h:outputText value="#{loginController.sessionData.teams_name}" />
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_time" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Zeitraum</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="cld_startdate" value="Startdatum:" />
</p:column>
<p:column>
<p:calendar value="#{hldyPlanningController.startdate}" id="cld_startdate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Startdatum ist ein Pflichtfeld!" showWeek="true"/>
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="cld_enddate" value="Enddatum:" />
</p:column>
<p:column>
<p:calendar value="#{hldyPlanningController.enddate}" id="cld_enddate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Enddatum ist ein Pflichfeld!" showWeek="true"/>
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_misc" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Weiteres</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="opt_hType" value="Typ:"/>
</p:column>
<p:column>
<p:selectOneButton value="#{hldyPlanningController.type}" id="opt_hType" required="true" requiredMessage="Typ ist ein Pflichtfeld!">
<f:selectItem itemLabel="Urlaub" itemValue="U" />
<f:selectItem itemLabel="Absetzen" itemValue="A" />
</p:selectOneButton>
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="txta_note" value="Bemerkung:"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="45" rows="2" cols="30" value="#{hldyPlanningController.note}" id="txta_note"/>
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_actions" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Aktion</p:column>
</p:row>
</f:facet>
<p:row>
<p:column>
<h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>
</p:column>
<p:column>
<h:commandButton id="btn_submit" value="Abschicken" style="width: 170px; height: 30px"/>
</p:column>
</p:row>
</p:panelGrid>
</p:panel>
</p:column>
<p:column colspan="1" style="vertical-align: top;">
<p:panel style="font-size: 12px; border: 1px solid gray;">
<f:facet name="header">
Mitarbeiter, die in diesem Zeitraum auch Urlaub geplant haben
</f:facet>
<p:schedule value="#{calendarController.eventModel}" widgetVar="myschedule"></p:schedule>
</p:panel>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</html>
All Beans are #MangedBean and #SessionScoped. I'm using JSF2.1 with Primefaces 3.4.1 on Tomcat 7.x;
I'm new to the JSF Framework and can't figure out what i'm doing wrong in this case. Please help me.
Thanks a lot.
I propose 2 methods to solve your issue:
1- Put the commandButton outside the panel grid, just before the form tag as follows:
<h:commandButton action="#{ficheDescControl.edit()}" value="Valider" />
</h:form>
2- use the UI:composite instead of include. I used it and I'm able to trigger CommanButton properly. You can take a look of a question of mine where the command button works:
How to pass a bean from jsf to another using templating?