I'm trying to use primefaces component called rating inside a datatable.
<p:column headerText="Minha Dificuldade" syle="text-align: center; width: 100px">
<p:rating readonly="false" stars="10" value="#{cadastroDificuldadeBean.calculaMinhaDificuldade(jogo)}" >
<f:param name="jogoId" value="#{jogo.id}" />
<p:ajax event="rate" listener="#{cadastroDificuldadeBean.onrate}" />
</p:rating>
</p:column>
On page load my column is visible with p:rating calculated (method with parameter). When I click on star to rating an ajax call is submitted (event = "rate") and a throw is shown Property 'calculaMinhaDificuldade' not found on type 'my class'.
Any ideas?
Related
I use the primefaces extension for the timer. I display severals timers in a data list components and those data list components are displayed in a cell of a data table.
I change the color of each cell with style parameter, with value from bean value. For each cell the background color changed and so is for the timers cells but the text color is not changed.
<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}"
resizableColumns="false"
rendered="true"
rowIndexVar="rowIndex">
<p:column headerText="ID" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
<h:outputText value="#{synopticIdBean.number}" />
</p:column>
<p:column headerText="Nom" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
<h:outputText value="#{synopticIdBean.name}"/>
</p:column>
<p:column headerText="Chrono" rendered="#{dashboardView.manageChronometers}" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
<p:dataList value="#{synopticIdBean.synopticCounterBeans}" var="synopticCounterBean" type="definition" class="data-zone">
<pe:timer id="timer_#{synopticLocationBean.id}"
forward="true"
timeout="10000"
formatFunction="return displayElapsedTimeForChrono_save('#{synopticCounterBean.name}',
'#{synopticCounterBean.startTime}',
'#{synopticCounterBean.pauseTime}',
'#{synopticCounterBean.endTime}',
'#{synopticCounterBean.counterValue}');"/>
</p:dataList>
</p:column>
</p:dataTable>
When I set the style parameter on the timer component I get the following error :
Error Parsing /pages/dashboardgeneric/dashboardWip.xhtml: Error Traced[line: 846] Attribute "style" was already specified for element "pe:timer".
It looks like it should work but the Timer is missing style and styleClass attributes from the documentation but they should be there on the component. I have created a ticket to update the documentation.
https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/733
I find a solution, I have added a style in the component pe:timer like that :
<p:dataList value="#{synopticIdBean.synopticCounterBeans}" var="synopticCounterBean" type="definition" class="data-zone">
<pe:timer id="timer_#{synopticLocationBean.id}"
forward="true"
timeout="10000"
formatFunction="return displayElapsedTimeForChrono_save('{synopticCounterBean.name}',
'#{synopticCounterBean.startTime}',
'#{synopticCounterBean.pauseTime}',
'#{synopticCounterBean.endTime}', '#{synopticCounterBean.counterValue}');"
style="color : #{synopticMainLocationIdBean.foregroundColor};"/>
</p:dataList>
The background color inherited from the datalist and the foreground color take the value declared from the datalist.
I have a form with tree buttons on in. One of them is the "Cancel" button that goes back to the previous page.
The problem is there is any validation issue, like a mandatory field not submited, the styling of the field is not reset when I go back to the form.
This is a simplified structure of the xhtml:
<panel id="horizontal">
<form id="filterVipLoungeForm">
</form>
<form id="frmAddPax">
<form id="frmAccessType">
</form>
</form>
<panelGrid>
<commandButton value="agregar" />
<commandButton value="limpiar" />
<commandButton value="cancelar" />
</panelGrid>
</panel>
The code of the button that calls the add passenger form:
<p:commandButton
value="#{label['manageVipLoungeEntrance.button.addPassenger']}"
action="#{manageVipLoungeEntranceExtMB.setRenderStatus(3, 1)}"
actionListener="#{manageVipLoungeEntranceExtMB.hideMainForm}"
update=":filterVipLoungeForm :horizontal">
</p:commandButton>
The code of the cancel button:
<p:commandButton
value="#{label['manageVipLoungeEntrance.button.cancel']}"
onclick="showLocalDate()"
action="#{manageVipLoungeEntranceExtMB.setRenderStatus(0, 1)}"
actionListener="#{manageVipLoungeEntranceExtMB.setRenderStatus(3, 0)}"
update=":filterVipLoungeForm :horizontal">
</p:commandButton>
This calls a method from the backing bean calls setRenderStatus that set the form and he's render status to be evaluated in the rendered attribute.
In this process the render status of the cancel button's form is set to false and the render status of the previous form is set to true.
The hideMainForm method calls two times the setRenderStatus method, setting the main form render status to false and the add passenger render status to true.
The problem there is any validation error and if I go back to the previous page and come back to the form I'm still getting the validation errors.
[EDIT]
Sorry I forgot to add the code of the rendered evaluation of the two forms involucrated in this:
Render status validation for form "frmAddPax"
<h:form id="frmAddPax" rendered="#{manageMB.renderStatus.isRenderFormAddPax()}">
Render status validation for form "filterVipLoungeForm"
<h:form id="filterVipLoungeForm" style="width:95% !important;"
rendered="#{manageMB.renderStatus.isRenderFormMain()}"
onkeypress="return event.keyCode != 13">
I have tried by using the <p:resetInput>but it didn't work, with this I was expecting the form with the id frmAddPax reset his status but it didn't work:
<p:commandButton
value="#{label['manageVipLoungeEntrance.button.cancel']}"
onclick="showLocalDate()"
action="#{manageVipLoungeEntranceExtMB.setRenderStatus(0, 1)}"
actionListener="#{manageVipLoungeEntranceExtMB.setRenderStatus(3, 0)}"
update=":filterVipLoungeForm :horizontal">
<p:resetInput target=":frmAddPax" />
</p:commandButton>
I used the <p:ajax resetValues="true"> and this one works as I needed.
I really don't know why work with the ajax and not with the resetInput.
<p:commandButton
value="#{label['manageVipLoungeEntrance.button.cancel']}"
onclick="showLocalDate()"
action="#{manageVipLoungeEntranceExtMB.setRenderStatus(0, 1)}"
actionListener="#{manageVipLoungeEntranceExtMB.setRenderStatus(3, 0)}"
update=":filterVipLoungeForm :horizontal">
<p:ajax update=":frmAddPax" resetValues="true" />
</p:commandButton>
I want to show or hide a primefaces datatables by clicking on their command button, I have a java bean and I can call the java function dashboardView.displayOrHide(). I don't know how to make this happen.
I want to show or hide the datatable, maybe collapse it or not by clicking a button, and save the state of the datatable in the java bean
My version of Primefaces is 6.0.15.
My JSF/xhtml code :
<p:commandButton value="Show Or Hide" id="ajax" action="#{dashboardView.displayOrHide}" style="margin-right:20px;" styleClass="ui-priority-primary" />
<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}">
<p:column headerText="Famille">
<h:outputText value="#{synopticIdBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticIdBean.brNumber}"/>
</p:column>
</p:dataTable>
My Java code, but I don't know what to do here :
public void buttonAction() {
System.out.println("test ash retor ana");
}
For the moment I use a javascript function with a button
And hide or show my datatable with the displayTabInformation js function :
function displayTabInformation(id,dataTableId){
var divDisplay = dataTableId.style.display;
if(divDisplay === ''){
dataTableId.style.setProperty('display', 'none');
}else if(divDisplay === 'none'){
dataTableId.style.setProperty('display', 'block');
}else{
if(divDisplay === 'visible'){
dataTableId.style.setProperty('display', 'none');
}else{
if(divDisplay === 'block'){
dataTableId.style.setProperty('display', 'none');
}
}
}
}
I would like to make the same function with the java bean for saving which database is show or hide.
I have added a command button that call a function from a java managed bean. I have a boolean flag that is used in the "rendered" of the datatable which is set to true or false in the showOrHideLocation function.
I don't know how to refresh my JSF page from my Java managed bean
<p:commandButton value="#{synopticLocationBean.name}" update="item_#{synopticLocationBean.id}" action="#{dashboardView.dashboardService.showOrHideLocation(synopticLocationBean.id)}" styleClass="ui-priority-primary" ajax="true" />
<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}"
sortBy="#{synopticIdBean.longEnteredTime}" sortOrder="ascending"
rowStyleClass="#{synopticIdBean.alarm eq true ? 'old' : null}"
rendered="#{synopticLocationBean.collapseDataTable eq true}">
<p:column headerText="Famille">
<h:outputText value="#{synopticIdBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticIdBean.brNumber}"/>
</p:column>
My Java showOrHideLocation function :
public void showOrHideLocation(String id) {
SynopticLocationBean synopticLocationBean = getLocation(id);
boolean isCollapsed = synopticLocationBean .getCollapseDataTable();
location.setCollapseDataTable(!isCollapsed);
//TODO How can i refresh my JSF page with my java bean ?
}
I have a requirement with p:selectonemenu when I am using inside dataTable.
<p:selectOneMenu value="#{buyerInProcessBean.subject}"
id="buyerResponseId" >
<f:selectItems
value="#{buyerInProcessBean.subjectMap[trans.decisionrule.ruleId]}"
var="subject" itemLabel="#{subject}" itemValue="#{subject}"></f:selectItems>
<f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
</p:selectOneMenu>
If I choose 'other' a dialogue must compulsory get popup. otherwise it is not mandatory.
How can I achieve this type of requirement?
You should bind a function to an onchange event of your <p:selectOneMenu>, find out if the value of the desired option matches the value that should open the dialog, and trigger dialog.open() in that case.
Note, that Primefaces' component wraps the <select> tag within some divs and outputs the selected <option> in an intermediary component, therefore attachment of event to the hidden <select> element won't work. On the other hand, for example, JSF <h:selectOneMenu> tag renders a <select> element, so binding behaviour to the onchange will trigger the desired behaviour.
The view:
<h:form id="form">
<p:selectOneMenu value="#{buyerInProcessBean.subject}" id="buyerResponseId" onchange="changeEvent(this)">
<f:selectItems value="#{buyerInProcessBean.subjectMap[trans.decisionrule.ruleId]}"
var="subject" itemLabel="#{subject}" itemValue="#{subject}" />
<f:selectItem itemLabel="Other" itemValue="Other" />
</p:selectOneMenu>
</h:form>
<p:dialog widgetVar="dialog">
<h:outputText value="Additional Data" />
</p:dialog>
The JavaScript:
function changeEvent(element) {
var val = $(element).find('option:selected').text();
if(val === 'Other') {
dialog.show();
}
}
I'm working on a PrimFaces mobile employee directory app and have hit a road block. Its a simple app which consists of two screens (employee filter/list + employee detail).
I was able to load a datalist without issues. Clicking on the commandlink properly loads the employee detail. I then was able to implement a custom employee filter which was somewhat painful, but I got that working. The filter works by repopulating the employee datalist's model with the filtered results.
The issue is, after I use the filter to repopulate/filter the datalist, clicking on an employee (commandlink) does not pass the correct employee ID back to the model. Instead, the employee ID that was there before the filter was performed is passed. It's like the JSF model is not matching the DOM.
I'm using:
TomEE (MyFaces 2.1.7)
PrimeFaces Mobile 0.9.3
PrimeFaces 3.3
Both of my backing models are #ViewScoped
<pm:view id="peopleDirView" onload="">
<pm:header title="People Directory" fixed="true">
</pm:header>
<pm:content>
<h:form id="form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<p:inputText id="searchCriteria" value="#{peopleDirectoryBean.criteria}" type="search"
onkeyup="delay(function() {filterResults();}, 500);" />
</fieldset>
</div>
<p:dataList id="peopleDataList" value="#{peopleDirectoryBean.people}" var="person" rowIndexVar="rowIndex">
<p:column>
<p:commandLink action="#{peopleDirectoryDetailBean.loadPersonDetail(person.employeeId)}" update=":personDetailView">
<img src="/phonedir/people/image/#{person.employeeId}?width=75&height=100" width="90" height="100"
onerror="missingImage(this);" id="per-search-picture" />
<h1>#{person.nameLast}, #{person.nameFirst}</h1>
<p>#{person.deptName}</p>
<p>#{person.jobTitle}</p>
</p:commandLink>
</p:column>
</p:dataList>
<p:remoteCommand name="filterResults" update="peopleDataList" action="#{peopleDirectoryBean.peopleSearch}" />
</h:form>
</pm:content>
<pm:footer fixed="true">
<pm:navBar>
<p:button value="People" icon="home" href="#peopleDirView?reverse=true" styleClass="ui-btn-active" />
<p:button value="Locations" icon="info" href="#locationsView?reverse=true" />
<p:button value="Conference" icon="search" href="#conferenceRoomsView?reverse=true" />
</pm:navBar>
</pm:footer>
<script>
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
function missingImage(image) {
image.onerror = "";
image.src = "missing-person.jpg";
return true;
}
</script>
</pm:view>
Okay, looks like the mistake was on my part.
In my backing bean, I was using javax.inject.Named (#Named) because I was trying to make use of my container's ability to do CDI. Once I changed it to javax.faces.bean.ManagedBean (#ManagedBean ) the problem went away. The TomEE docs state that it supports #Named so I'm not sure what the deal is.