Hi guys primefaces' dialog box not showing up anymore. Here is my code. Please help, did I do something wrong.
this is code where I call dialog box from column titled 'More':
<h:panelGrid columns="2">
<p:dataTable id="tbl" var="holder">
...
<p:column>
<f:facet name="header">
<h:outputText value="More"/>
</f:facet>
<p:commandLink value="more" type="button" styleClass="ui-icon ui-icon-search" actionListener="#{editCustomerView.viewCustomerInfo}" update=":content_form:customerInfoDialog" oncomplete="_cusInfoDlg.show()">
<f:attribute name="currentCustomer" value="#{holder}"/>
</p:commandLink>
</p:column>
...
</p:dataTable>
</h:panelGrid>
//dialog is here
<p:dialog id="customerInfoDialog" widgetVar="_cusInfoDlg" header="Зээлдэгчийн мэдээлэл">
<ui:include src="#{editCustomerView.infoPage}.xhtml"/>
<h:commandButton value="ok" styleClass="btn" style="width: 100px; float: right; margin-right: 20px; margin-bottom: 20px;" onclick="customerInfoDlg.hide(); return false;"/>
</p:dialog>
Here is backing bean actionListener method
public void viewCustomerInfo(ActionEvent event)
{
this.currentCustomer = (Customer) event.getComponent().getAttributes().get("currentCustomer");
this.currentCustomerAddress = prepareCurrentCustomerAddress(this.currentCustomer);
if(this.currentCustomer.isIsCitizen()){
this.infoPage = "CitizenInfo";
}
else
{
this.infoPage = "OrganizationInfo";
}
}
I usually open dialogs via Javascript
PF('_cusInfoDlg').show();
Related
I'm using primefaces with JSF2.1, tomcat7+ as an application server, Internet Explorer 8 as a browser, here's the case :
I have a 1000 records table inside a dialog, when i press a page link it changes records only once but the pressed page link does not get pressed (shaded as active) then the whole application does not respond. However when i select a row before using pageLinks everything works fine after that. Any Help?? here's a part of my xhtml page.
N.B: I cannot change IE8 as it is a customer requirement.
Here is the table part
<p:ajax global="false" event="close" listener="#{addConditionBean.handleClose}" update="conditionsDialog" />
<h:form id="conditionfrm">
<p:messages autoUpdate="true" showDetail="true" closable="true" severity="error"/>
<table style="text-align: center;">
<tr>
<td style="text-align: left; height: 100%; vertical-align: top;">
<p:growl id="infoMsg" showDetail="true" life="2000" autoUpdate="true" severity="info"/>
<p:dialog id="conditionsDialog" widgetVar="addCondition"
header="Add Condition" modal="true"
showEffect="fold" hideEffect="fold" closeOnEscape="true" height="400px" width="80%"
dynamic="true" style="display: none;" binding="#{addConditionBean.conditionDialog}">
<p:ajax global="false" event="close" listener="#{addConditionBean.handleClose}" update="conditionsDialog" />
<h:form id="conditionfrm">
<p:messages autoUpdate="true" showDetail="true" closable="true" severity="error"/>
<table style="text-align: center;">
<tr>
<td style="text-align: left; height: 100%; vertical-align: top;">
<p:growl id="infoMsg" showDetail="true" life="2000" autoUpdate="true" severity="info"/>
<p:dataTable id="ConditionsDT" value="#{addConditionBean.allConditionsData}" style="height: 90%;"
selectionMode="single"
selection="#{addConditionBean.selectedCondition}"
rowKey="#{condition.conditionId}"
paginator="true"
rows="50"
pageLinks="50"
var="condition" scrollable="true"
widgetVar="conditionsTable"
emptyMessage="No Conditions found with given criteria">
<p:ajax event="rowSelect" update="#form" oncomplete="slideShowPanel('displayDiv');" listener="#{addConditionBean.fillSelectedCondition}"/>
<f:facet id="facetId" name="header" >
<h:commandButton id="addNewCond" label="Add New Condition" image="/styling/images/add.png" style="height:15px;" >
<p:ajax global="false" event="click" update="#form" oncomplete="slideShowPanel('displayDiv');" listener="#{addConditionBean.showAddPanel()}"/>
</h:commandButton>
<br></br>
<!-- <p:outputPanel>
<p:inputText id="globalFilter" style="width:150px" value="" >
<p:ajax event="keyup" />
</p:inputText>
</p:outputPanel> -->
</f:facet>
<p:column style="height: 50%; text-align:left; width: 20%;" >
<h:commandButton value="Delete" image="/styling/images/Delete-icon.png" title="Delete condition" style="height: 20px" >
<p:ajax global="false" event="click" listener="#{addConditionBean.deleteCondition(condition)}" update="ConditionsDT" />
</h:commandButton>
</p:column >
<p:column headerText="Condition Name" style="height: 50%; text-align:left; width: 80%;" sortBy="#{condition.conditionName}" >
<h:outputText value="#{condition.conditionId} - #{condition.conditionName}"/>
</p:column>
</p:dataTable>
I guess my problem had nothing to do with rowSelection it concerned the scrollable attribute, I removed scrollable = true and scrollHeight and it all worked fine. I guess there was some kind of clash between scroll height and rows attributes of the datatable tag.
I'm having problems with a form that is rendered by a booleanButtom on PrimeFaces 3.5
the form appear as expected but when I commit the values of the field come null.
The code of the pag:`
<p:panelGrid>
<p:row>
<p:column>
<h:form id="city">
<p:panelGrid columns="2">
<h:outputText value="Name: "/>
<p:inputText label="Name" value="#{managedBean.city.name}"/>
<h:outputText value="Status: "/>
<p:selectBooleanButton value="#{managedBean.city.status}" onLabel="Enable" offLabel="Disable">
<p:ajax listener="#{managedBean.changeStatusCity()}"/>
</p:selectBooleanButton>
<h:outputText value="Add neighborhood?"/>
<p:selectBooleanButton id="btAddNeighborhood" value="#{managedBean.addNeighborCity}" onLabel="Cancel" offLabel="Yes">
<p:ajax update=":addNeighbor" listener="#{managedBean.addNeighborCity()}"/>
</p:selectBooleanButton>
</p:panelGrid>
</h:form>
</p:column>
</p:row>
<p:row>
<p:column>
<h:form id="addNeighbor">
<p:panel header="Neighborhood" rendered="#{managedBean.addNeighborCity}">
<p:panelGrid columns="2">
<h:outputText value="Name: "/>
<p:inputText label="Name" value="#{managedBean.neighborhood.name}"/>
<h:outputText value="Status: "/>
<p:selectBooleanButton value="#{managedBean.neighborhood.status}" onLabel="Enable" offLabel="Disable" onIcon="ui-icon-check" offIcon="ui-icon-close">
<p:ajax listener="#{managedBean.changeStatusNeighbor()}"/>
</p:selectBooleanButton>
</p:panelGrid>
</p:panel>
</h:form>
<h:form id="formBt">
<p:commandButton id="bt" value="Add" actionListener="#{managedBean.saveNeighborCity()}" update=":addNeighbor, :city:btAddNeighborhood"/>
</h:form>
</p:column>
</p:row>
</p:panelGrid>`
And the manage bean
public void addNeighborCity(){
if(addNeighborCity){
neighborhood = new Neighborhood();
neighborhood .setStatus(true);
neighborhood .setStringStatus("Enable");
}else{
neighborhood = null;
}
}
public void changeStatusNeighbor() {
if (neighborhood .isStatus()) {
neighborhood .setStringStatus("Enable");
} else {
neighborhood .setStringStatus("Disable");
}
}
public void saveNeighborCity(){
city.getNeighborhoods().add(neighborhood );
neighborhood = null;
addNeighborCity = false;
}
All the input inside of the form that was rendered doesn't send the information to the manage bean and when I put the button that add the neighbor to the list of the city the button stop working and doesn't call the manage bean any more.
Does someone knows what I'm doing wrong or what is happening.
I'm using Primefaces3.5, GlassFish4.0 and JSF2.2
As you did not post the whole managed bean, I guess that you're using the default scope of the managed bean: #RequestScoped. In that case you should use #ViewScoped.
I solved the problem, I was using glassfish 4 and it forces the jsf2.2 even when you put the jsf2.1 in our project, then I changed to glassfish 3 and all work just fine, thanks for the answers, and I'm using #ScopeSession.
I have a jsf, where I want to show a list of checkboxes. If I create it like in the following example, the checkboxes are rendered correctly.
<p:outputPanel layout="block" rendered="#{scheduleConfigBean.selectedMonthType == 1}" style="width: 400px; margin-top: 45px">
<ui:repeat var="monthDay" value="#{scheduleConfigBean.monthDays}">
<p:selectBooleanCheckbox value="#{monthDay.checked}" />
<h:outputText value="#{monthDay.name}" />
</ui:repeat>
</p:outputPanel>
But when I add a ajax event listener to each checkbox, the panel is not rendered any longer. What is my problem here?
<p:outputPanel layout="block" rendered="#{scheduleConfigBean.selectedMonthType == 1}" style="width: 400px; margin-top: 45px">
<ui:repeat var="monthDay" value="#{scheduleConfigBean.monthDays}">
<p:selectBooleanCheckbox value="#{monthDay.checked}">
<p:ajax listener="#{scheduleConfigBean.updateMonthlyButtonState}" update="saveBtn" />
</p:selectBooleanCheckbox>
<h:outputText value="#{monthDay.name}" />
</ui:repeat>
</p:outputPanel>
Thanks to Darka, his answer gives me the solution.
<p:outputPanel layout="block" rendered="#{scheduleCreate.selectedMonthType == 1}" style="width: 500px; margin-top: 45px">
<c:forEach items="#{scheduleCreate.monthDays}" var="monthDay" varStatus="status">
<p:selectBooleanCheckbox value="#{monthDay.checked}" style="margin-left: 8px">
<p:ajax listener="#{scheduleCreate.updateButton}" update="saveBtn" />
</p:selectBooleanCheckbox>
</c:forEach>
</p:outputPanel>
I am using primefaces(v.3.0) datatable in my application.
In Datatable there are two columns , one column is inputtext and other is SelectOneMenu(dropdown).
Now I want to change inputtext color with some cases like..
1.if SelectOneMenu value get selected as "Single" input textbox color will be "green" for that particular pID only.
2.if SelectOneMenu value get selected as "Married" input textbox color will be "red" for that particular pID only.
3.if SelectOneMenu value get selected as "Divorced" input textbox color will be "yellow" for that particular pID only.
So I am trying in this way....
<h:form id="form">
<h:panelGrid columns="2" cellpadding="10" id="h">
<p:dataTable id="table" var="s"
value="#{backingBean.arrayList}"
widgetVar="empTable" rowKey="#{pt.pID}"
paginator="true" rows="15"
style="width: 100%;margin-bottom: 10px;" rowStyleClass="#{s.status}">
<f:facet name="header">
List of Patients Appointments
</f:facet>
<p:column headerText="Status" id="t">
<p:inputText value="#{s.status}" />
</p:column>
<p:column headerText="EmployeeAction">
<p:selectOneMenu id="scAction" value="#{backingBean.obj.empStatus}"
style="width:125px">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems value="#{schedulerBB.scheduleActionSelect}"
itemLabel="#{backingBean.obj.empStatus}"
itemValue="#{backingBean.obj.empStatusID}" />
<p:ajax event="change" listener="#{backingBean.changeColor(s)}" update=":form" />
</p:selectOneMenu>
</p:column>
</p:dataTable>
</h:panelGrid>
</h:form>
In CSS
.Single td:nth-child(1) input {
background-color: green;
}
.Married td:nth-child(1) input {
background-color: red;
}
.Divorced td:nth-child(1) input {
background-color: yellow;
}
In BackingBean:
private Employee obj;
//Getter setter methods
public Employee getObj() {
if(obj==null){
obj=new Employee();
}
return obj;
}
public void setObj(Employee obj) {
this.obj = obj;
}
public void changeColor(Employee e){
if(obj.getEmpStatus().equals("1")){
EmployeeDAO.updateEmpTable(e.getPID,e.getStatus);
}
css
.Single td:nth-child(1) input {
background-color: green;
}
.Married td:nth-child(1) input {
background-color: red;
}
.Divorced td:nth-child(1) input {
background-color: yellow;
}
I am able to change the input text value on change of selectonemenu for that particular pID,but as you can
see I have applied inputtextbox color change logic at column level ,so all columns inputtext color changes.
So how can I apply logic of changing inputtext box color at row level(i.e for particular ID only)
You can use a different style class for rows that match a condition.
Using this in your page a style class will be enabled depended on the status:
<p:dataTable id="table" var="s" value="#{backingBean.arryList}" widgetVar="EmployeeTable" rowKey="#{s.pID}" paginator="true" rows="15" style="width: 100%;margin-bottom: 10px;" rowStyleClass=#{s.status}>
<p:column id="st">
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<p:inputText value="#{s.status}" style="width:90px;"/>
</p:column>
<p:column headerText="Employee Status">
<p:selectOneMenu value="#{backingBean.obj.empStatus}" style="width:125px">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems value="#{BackingBean.empStatusActionSelect}"
itemLabel="#{backingBean.obj.empStatus}"
itemValue="#{backingBean.obj.empStatusID}" />
<p:ajax event="change" listener="#{backingBean.changeColor}" update="table"/>
</p:selectOneMenu>
</p:dataTable>
In your CSS you need the following:
.Single td:nth-child(1) input {
background-color: green;
}
.Married td:nth-child(1) input {
background-color: red;
}
.Divorced td:nth-child(1) input {
background-color: yellow;
}
This way an input element in the first column of a table row gets a background color, green, red or yellow.
Note: the outcome of #{s.status} must be "Single", "Married", or "Divorced".
Here the code which worked for me perfectly.
<p:dataTable id="table" var="s" value="#{backingBean.myArraylist}" widgetVar="EmployeeTable" rowKey="#{s.pID}" paginator="true" rows="15" style="width: 100%;margin-bottom: 10px;" >
<p:column id="st">
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<p:inputText value="#{s.status}" style="width:90px;" style="#{s.color}"/>
</p:column>
<p:column headerText="Employee Status">
<p:selectOneMenu value="#{backingBean.obj.empStatus}" style="width:125px">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems value="#{BackingBean.empStatusActionSelect}"
itemLabel="#{backingBean.obj.empStatus}"
itemValue="#{backingBean.obj.empStatusID}" />
<p:ajax event="change" listener="#{backingBean.changeColor}" update="table"/>
</p:selectOneMenu>
</p:dataTable>
In Backing bean iterate datatabale arraylist in this way and set color for inputtext.
Delclare color varibale in Employee class with its getter and setters.
myArraylist = myDAO.getEmployeeList();
for (Employee s : myArraylist) {
if(s.getStatus().equals("Single")){
s.setColor("background-color : green");
}
else if(s.getStatus().equals("Married")){
s.setColor("background-color : red");
}
else if(s.getStatus().equals("Divorced")){
s.setColor("background-color : yellow");
}
}
You can use primefaces' rowStyleClass attribute on the datatable.
In the rowStyleClass attrribute you can use a ternary operator (as in your case, something like
#{backingBean.obj.empStatus eq single? green: blue}
The result of the ternary operator should correspond to css style classes you already have loaded on that page
I need some help on including a mouseover event for a datatable column in JSF. Can you please let me know how to include a popup list on mouseover a jsf column. Below is the code corresponding to my JSF column.
<p:column style="text-align: left;" styleClass="foo" rendered="#{demandBean.screeRenderVo.adjustedRenderer}" >
<f:facet name="header">
<h:outputText id="AdjustedID" value="#{demandBean.dmdScreenLabelVO.adjustedValue}"/>
</f:facet>
<h:inputText id="AdjustedValueID" value="#{car.adjustedValue}" style="height: 20px;width: 50px;"></h:inputText>
</p:column>
Not sure how to add the mouserover event for the above column. Please Assist.
You can do something like this:
<script>
jQuery(document).ready(function(){
jQuery('td').mouseover(function(){
var th = jQuery(this).closest('table').find('th').eq( this.cellIndex );
if (th.attr('id') == "datatable:column3"){
dlg1.show();
}
else{
dlg1.hide();
}
});
});
</script>
<h:form prependId="false">
<p:dataTable id="datatable" var="car" value="#{tableBean.carsSmall}">
<p:column id="column3" style="text-align: left;" styleClass="foo" rendered="#{demandBean.screeRenderVo.adjustedRenderer}" >
<f:facet name="header">
<h:outputText id="AdjustedID" value="#{demandBean.dmdScreenLabelVO.adjustedValue}"/>
</f:facet>
<h:inputText id="AdjustedValueID" value="#{car.adjustedValue}" style="height: 20px;width: 50px;"></h:inputText>
</p:column>
</p:dataTable>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
</h:form>