I am using primeface rowExpansion
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1 text-right">Notes:</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">#{order.comments}</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-3">Requestor: #{order.requestorFullName}<h:outputText value="#{order.requestorFullName}"></h:outputText>
<!-- <p:spacer width="5" height="5" />
<h:outputText value="#{order.currency}"></h:outputText> -->
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-xs-2">
Added:
<h:outputText value="#{order.requestedDate}">
<f:convertDateTime pattern="MM/dd/yy" />
</h:outputText>
</div>
</div>
</p:rowExpansion>
I have 3 records in data-table,when I am using the row-expansion,only the first row is showing the data rest 2 other rows are not showing the data ,the data is available in all the 3 records but it shows only in first row expansion in next 2 rows it is coming empty.
Can you help me on that
Thanks
Related
I have this part of code:
<!-- /row -->
<div class="row" style="margin-top: 15px">
<div class="span8">
<div class="control-group">
<label class="hcg-control-label span5">Ημερομηνία Ανάκλησης Ποινής</label>
<div class="controls span7">
<p:calendar id="recallDate" styleClass="hcg-full-width cursor-pointer" pattern="dd/MM/yyyy"
value="#{penaltiesView.penalty.recallDate}" disabled="true"/>
<i class="fa fa-calendar hcg-input-icon"></i>
</div>
</div>
</div>
<!-- /span -->
</div>
<!-- /row -->
<div class="row" style="margin-top: 15px">
<div class="span8">
<div class="control-group">
<label class="hcg-control-label span5">Σχόλια Ανάκλησης Ποινής</label>
<div class="controls span7">
<p:inputTextarea rows="6" id="recallComments" styleClass="hcg-full-width" value="#{penaltiesView.penalty.recallComments}" disabled="true"/>
</div>
</div>
</div>
<!-- /span -->
</div>
<!-- /row -->
<div class="row">
<div class="span8">
<div class="control-group">
<label class="hcg-control-label span5">Ανάκληση - Ολοκλήρωση Πειθαρχικής Ποινής</label>
<div class="controls span7">
<p:selectBooleanCheckbox id="RevocationOrCompletion" styleClass="hcg-checkbox margin-bottom-10" value="#{penaltiesView.penalty.revocationOrCompletion}" disabled="#{!penaltiesView.canEdit()}" >
<p:ajax event="change" update="recallDate,recallComments"/>
</p:selectBooleanCheckbox>
</div>
</div>
</div>
<!-- /span -->
</div>
which produces the following components:
Now, what I want to do, is to make the calendar component and the Textarea to get enabled when I check the checkBox and if I uncheck it, they must be disabled again. The use of javascript due to requirements is not a valid way. I am having some difficulties on how to make this happen.
Any suggestions are appreciated.
Thank you in advance.
Your elements can't be updated because you have in your code disabled=true for calendar and textArea. If you want to change disable parameter depending on boolean checkbox than disabled value needs to be a value of boolean checkbox. Your boolean field also needs to have geters and setters.
<p:calendar id="recallDate" styleClass="hcg-full-width cursor-pointer" pattern="dd/MM/yyyy"
value="#{penaltiesView.penalty.recallDate}" disabled="#{penaltiesView.penalty.revocationOrCompletion}"/>
<p:inputTextarea rows="6" id="recallComments" styleClass="hcg-full-width" value="#{penaltiesView.penalty.recallComments}" disabled="#{penaltiesView.penalty.revocationOrCompletion}"/>
<p:selectBooleanCheckbox id="RevocationOrCompletion" styleClass="hcg-checkbox margin-bottom-10" value="#{penaltiesView.penalty.revocationOrCompletion}" disabled="#{!penaltiesView.canEdit()}" >
<p:ajax update="recallDate recallComments" process="#this"/>
</p:selectBooleanCheckbox>
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 4 years ago.
Can any one help me out of my problem? though i have been seen semilar problem from this site but i'm unable to fix my problem. here is my code..
<?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">
<ui:composition
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">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device.width, initial-scale=1"/>
<meta http-equiv="X-UA-Conpatible" content="IE=edge"/>
<h:outputStylesheet library="css" name="bootstrap.css"/>
<link href="resources/css/w3.css" rel="stylesheet" type="text/css"/>
<link href="resources/css/w3-theme-teal.css" rel="stylesheet" type="text/css"/>
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading">Student Wise Fees Collection Details</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="panel panel-info" >
<div class="panel-heading">Payment Details</div>
<div class="panel-body">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-top: 4%">
<h:form id="form1">
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1" style="color: blue;">Student Id:</span>
<p:inputText id="student_id" value="#{controllerBean.selectedfee.stuId}" type="text" readonly="true" style="width: 85%; color: blue;" class="form-control" placeholder="Student Id"/>
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Name:</span>
<p:inputText id="stname" type="text" readonly="true" value="#{controllerBean.selectedfee.name}" class="form-control" placeholder="Name of the student" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Program:</span>
<p:inputText id="pname" type="text" readonly="true" value="#{controllerBean.selectedfee.program}" class="form-control" placeholder="Program Name" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Session:</span>
<p:inputText id="s_name" type="text" readonly="true" value="#{controllerBean.selectedfee.session}" class="form-control" placeholder="Session Name" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Recept No:</span>
<p:inputText id="recptno" type="text" value="#{controllerBean.selectedfee.recptNo}" readonly="true" class="form-control" placeholder="Recept Number" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1">Amount:</span>
<p:inputText id="a_mnt" type="text" value="#{controllerBean.selectedfee.amount}" readonly="true" class="form-control" placeholder="Paid Amount" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 6%;">
<span class="input-group-addon" id="sizing-addon1" style="color: green;">Voucher:</span>
<p:inputText id="voucher" type="text" value="#{controllerBean.selectedfee.AIBLVoucher}" readonly="true" style="color: green;" class="form-control" placeholder="AIBL Voucher Number" />
</div>
<div class="input-group input-group-lg input-group-sm" style="padding-bottom: 4%;">
<span class="input-group-addon" id="sizing-addon1" style="color: red;">AUB Token:</span>
<p:inputText id="aub_token" type="text" value="#{controllerBean.selectedfee.stud_pay_rec_mid}" style="color: red;" readonly="true" class="form-control" placeholder="AUB TXN ID Number" />
</div>
</h:form>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9" >
<div class="col-lg-12 col-md-12 col-sm-12" >
<div class="panel panel-info">
<div class="panel-heading">Student's Payment Record</div>
<div class="panel-body">
<h:form id="form2">
<input type="text" class="form-control" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Tasks" />
<p:dataTable class="table table-hover" value="#{controllerBean.listofunifees}" var="FEES_COLLECTION" selection="#{controllerBean.selectedfee}" id="task-table" rowKey="#{FEES_COLLECTION.stud_pay_rec_mid}" selectionMode="single" paginator="true" paginatorPosition="bottom" rows="7" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" >
<p:ajax event="rowSelect" update=":form1" />
<p:column headerText="StuId" width="11%">
<h:outputText value="#{FEES_COLLECTION.stuId}" />
</p:column>
<p:column headerText="Student Name">
<h:outputText value="#{FEES_COLLECTION.name}" />
</p:column>
<p:column headerText="Program" width="15%">
<h:outputText value="#{FEES_COLLECTION.program}" />
</p:column>
<p:column headerText="Session" width="11%">
<h:outputText value="#{FEES_COLLECTION.session}" />
</p:column>
<p:column headerText="Rcpt No" width="10%">
<h:outputText value="#{FEES_COLLECTION.recptNo}" />
</p:column>
<p:column headerText="Amount" width="10%">
<h:outputText value="#{FEES_COLLECTION.amount}" />
</p:column>
<p:column headerText="Voucher" width="11%">
<h:outputText value="#{FEES_COLLECTION.AIBLVoucher}" />
</p:column>
</p:dataTable>
</h:form>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-top: 0px;">
<div class="col-lg-4 col-md-4 col-sm-4">
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h:form id="form3">
<button type="button" class="btn btn-success btn-sm col-lg-5 col-md-5 col-sm-5">Save</button>
<div class="col-lg-2 col-md-2 col-sm-2"></div>
<button type="button" class="btn btn-danger btn-sm col-lg-5 col-md-5 col-sm-5">Cancel</button>
</h:form>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
</div>
</div>
</div>
</div>
</div>
</ui:composition>
When i run this code, it shows javax.faces.FacesException: Cannot find component with expression ":form1:st_id" referenced from "centrepage:form2:task-table".
Now i've got my answer. The should be ":centrepage:form1:st_id, .., ..." and so on. bottom line is update="centrepage:form1:st_id". thanks for every one
This question already has answers here:
JSF -- <ui:repeat /> over a java.util.Set?
(3 answers)
Closed 6 years ago.
I am trying to make the bootstrap collapse(accordion) according to the last example in this page.
http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp
Now in this example, the number of divs are hard coded, 3 in this case.
I want to make the same based on the number of values in a JAVA Set .
From my knowledge, i am trying to use ui:repeat like this
<ui:repeat value="#{myBean.apples}" var="apples">
</ui:repeat>
where apples is a set(unique list) of integers.
Here is the complete code:
<h:panelGroup layout="block"
rendered="#{researcherQueriesDetailBean.offerPersonDTO.size() > 0}">
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
var="offerMakers">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#sample-list"
aria-expanded="false" aria-controls="sample-list">
Sample Availability </a>
</h4>
</div>
<div id="sample-list" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"></div>
</div>
</div>
</ui:repeat>
</div>
</h:panelGroup>
I am having trouble in placing the ui:repeat in the code so that the accordion panels are repeated according to the number of elements in the set.Is it even possible to do it this way? Any code reference in this case would be helpful.
Thanks.
According to your code:
<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
var="offerMaker">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#sample-list"
aria-expanded="false" aria-controls="sample-list">
Sample Availability </a>
</h4>
</div>
<div id="sample-list" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"></div>
</div>
</div>
</ui:repeat>
You are doing the iteration over offerMakers but I don't see you using the objects for anything, when you say to iterate over a set of Integers but i don't think you understand how a set behaves.
Anyways, if you iterate with this code, you will only get one iteration, change you <ui:repeat with the following and you will see what I mean:
<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
var="offerMaker">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#sample-list"
aria-expanded="false" aria-controls="sample-list">
OFFERMAKER VALUE IS: #{offerMaker}
</a>
</h4>
</div>
<div id="sample-list" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"></div>
</div>
</div>
</ui:repeat>
If you wanted to create dinamic accordions depending on the amount of elements(size) in you Set then you might want something like this:
<c:forEach begin="0" end="#{researcherQueriesDetailBean.offerMakersSize}" var="i">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading#{i}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="#accordion" href="#hh#{i}"
aria-expanded="false" aria-controls="sample-list">
Collapsible group #{i}
</a>
</h4>
</div>
<div id="hh#{i}" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading#{i}">
<div class="panel-body">some info #{i}</div>
</div>
</div>
</c:forEach>
Where your ResearcherQueriesDetailBean would have the following method:
public Integer getOfferMakersSize(){
return offerMakers.size();
}
I am new to JSF and I am working on an application where a group of parameters placed in a datagrid can be either added or removed. Below is the initial level of screenshot:
When I click on RemoveInvoice of any of the existing list, the list present after that box should automatically take the position of the removed list. But in my case, a blank section is getting displayed as per the below screenshot:
My jsf code looks like:
<div class="listing_Table">
<p:dataGrid columns="3" layout="grid" id="addInvoicePanel"
value="#{hrOrganizationPaymentDetailBean.invoiceDetailTOList}"
var="invoiceDetail">
<p:panelGrid rendered="#{!invoiceDetail.delete}">
<div class="Table">
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceType:</p:outputLabel>
</div>
<div class="Cell">
<p:selectOneMenu value="#{invoiceDetail.invoiceTypeID}"
filter="true" filterMatchMode="contains" required="true"
requiredMessage="InvoiceType is required">
<f:selectItems
value="#{hrOrganizationPaymentDetailBean.newInvoiceTypeList}"
var="list" itemValue="#{list.typeId}"
itemLabel="#{list.type}" />
</p:selectOneMenu>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceNumber:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoiceNumber}"
required="true" requiredMessage="InvoiceNumber is required" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceAmount:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoiceAmount}"
required="true" requiredMessage="InvoiceAmount is required">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>InvoicePath:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoicePath}" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceDate:</p:outputLabel>
</div>
<div class="Cell">
<p:calendar id="invoiceDate"
value="#{invoiceDetail.invoiceDate}" showOn="button"
readonlyInput="true" timeZone="IST" pattern="dd-MMM-yyyy"
required="true" requiredMessage="InvoiceDate is required" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel value="ServiceTax:" />
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.serviceTax}">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel value="TDS:" />
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.tDS}">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<p:commandButton styleClass="Submit_button"
value="Remove Invoice"
action="#{hrOrganizationPaymentDetailController.removeInvoiceDetail(invoiceDetail)}"
update=":EditOrganizationPaymentDetailForm:addInvoicePanel" />
</div>
</div>
</div>
</p:panelGrid>
</p:dataGrid>
</div>
And my backend java code is:
public void removeInvoiceDetail(InvoiceDetailTO invoiceDetailTO)
{
List<InvoiceDetailTO> invoiceDetailTOList = null;
List<Long> deletedInvoiceDetail = null;
try {
invoiceDetailTOList = hrOrganizationPaymentDetailBean.getInvoiceDetailTOList();
deletedInvoiceDetail = hrOrganizationPaymentDetailBean.getDeletedInvoiceDetailID();
if (deletedInvoiceDetail != null && !deletedInvoiceDetail.isEmpty()) {
} else {
deletedInvoiceDetail = new ArrayList<Long>();
}
for (InvoiceDetailTO detailTO : invoiceDetailTOList) {
if ((detailTO.getInvoiceDetailID() != null && detailTO.getInvoiceDetailID().equals(invoiceDetailTO.getInvoiceDetailID()))
|| (detailTO.getUniqueID() != null && detailTO.getUniqueID().equals(invoiceDetailTO.getUniqueID()))) {
detailTO.setDelete(true);
if (invoiceDetailTO.getInvoiceDetailID() != null) {
deletedInvoiceDetail.add(invoiceDetailTO.getInvoiceDetailID());
}
}
}
hrOrganizationPaymentDetailBean.setInvoiceDetailTOList(invoiceDetailTOList);
hrOrganizationPaymentDetailBean.setDeletedInvoiceDetailID(deletedInvoiceDetail);
} catch (Exception e) {
LOGGER_.error("", e);
}
}
Please advise where I am making a mistake?
The problem is in <p:panelGrid rendered="#{!invoiceDetail.delete}">. Even with rendered="false" cell won't be removed from html page after rendering. If you open debugger in your browser (press F12 for Mozilla or Chrome) you can find empty cell there <td class="ui-datagrid-column"></td>. So you need to remove deleted item from your #{hrOrganizationPaymentDetailBean.invoiceDetailTOList} and update dataGrid.
I am opening a modal which has form in it. I am trying to check if the button is clicked or not by #{empty param['buttonid']}. But it is always shows empty even when clicked.
<div class="modal fade" jsf:id="dataReset">
<div class="modal-dialog">
<form jsf:id="reset-data-form" class="form-horizontal">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="inputEmail" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control"
jsf:id="inputEmail" jsf:value="#{dataResetFacade.dataResetEmail}"
name="inputEmail" />
<h:message for="inputEmail" p:class="error-msg"/>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default"
data-dismiss="modal">#{msg['general.button.cancel']}</button>
<button class="btn btn-primary" jsf:id="reset-data-button"
jsf:action="#{dataResetFacade.resetdata}">submit
<f:ajax execute="#form" render="#form aaa bbb messages" onevent="close"/>
</button>
<h:outputText id="aaa" value="#{not empty param['reset-data-button']}"/>
<h:outputText id="bbb" value="#{empty param['reset-data-button']}"/>
</div>
</div>
</form>
</div>
</div>
Am I doing some thing wrong.
You did not specify the right request parameter name there. The request parameter name is basically the JSF component's client ID. The client ID of a JSF input and button component is represented by the HTML element's name attribute. You can find it out by just looking at the JSF-generated HTML output via rightclick, View Source in webbrowser.
Given the current view, that'll look like as below:
<button name="reset-data-form:reset-data-button" ... />
Alter parameter names accordingly:
<h:outputText id="aaa" value="#{not empty param['reset-data-form:reset-data-button']}" />
<h:outputText id="bbb" value="#{empty param['reset-data-form:reset-data-button']}" />
Alternatively, just bind the JSF UIComponent instance to an unique variable name in Facelet scope using binding attribute and then let JSF evaluate the UIComponent#getClientId().
<button jsf:binding="#{resetButton}" ... />
...
<h:outputText id="aaa" value="#{not empty param[resetButton.clientId]}" />
<h:outputText id="bbb" value="#{empty param[resetButton.clientId]}" />
Note: do not bind it to a bean property. The above code is as-is.
See also:
How does the 'binding' attribute work in JSF? When and how should it be used?