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>
Related
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?
We are using Primefaces 5
We are having one datagrid for search results. Inside datagrid there is one delete button for every row. Onclick of delete button a confirmation box is being displayed when the user clicks on yes button of confirmation dialog box then deleteUser method of bean should be called and the user with value of parameter id ‘testUserId’ should be deleted. Problem is the value of ‘testUserId’ which is being sent to bean is always value of userId of the last row of the datagrid. How to pass the value of the 'testUserId' of the current row from where delete button is clicked to the bean method?
Given below is the snippet of the code
Xhtml:-
<p:commandButton action="#{bean.deleteUser}" value="Delete"
ajax="false" onclick="PF('confirmation').show()" type="button">
</p:commandButton>
<p:confirmDialog
message="Are you sure about deleting the user?"
header="Initiating user deletion" severity="alert"
widgetVar="confirmation" appendTo="">
<p:commandButton value="Yes Sure" ajax="false" onclick="resetSearchForm()"
oncomplete="PF('confirmation').hide()" action="#{bean.deleteUser}" >
<f:param name="testUserId" value="#{user.id}"></f:param>
</p:commandButton>
<p:commandButton value="Not Yet" onclick="PF('confirmation').hide()"
type="button" />
</p:confirmDialog>
Bean:-
public void deleteUser() {
String id = FacesContext.getCurrentInstance().getExternalContext()
.getRequestParameterMap().get("testUserId ");
}
Use a property action listener:
<p:commandButton value="Delete" ajax="false" onclick="PF('confirmation').show()" type="button">
<f:setPropertyActionListener value="#{tableRowVar}" target="#{bean.selectedUser}" />
</p:commandButton>
Where tableRowVar is the name of the var in your dataTable and bean.selectedUser a property in your bean which will hold the selected row. Remove the action from the commandButton and leave it only in the confirm dialog's button.
Let me know if this works.
I want to get the value of the input Textarea and show it in the same page by clicking on the command button "compiler "
however i don't get any result ! and the contnet is only shown when I update with the browser updater
Sh How do I upate the page and the managed beans to show the content of a primefaces textarea in the same page
this is the code:
<p:layoutUnit position="west" size="520" header="Code à executer" resizable="true" >
<h:form id="moncode">
<p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" />
<p:commandButton value="compiler" id="btn3" action="guest.xhtml" styleClass="myButtonClass" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="550" header="Resultat d'execution" resizable="true" >
<h:outputText value="#{fichier.code}" />
</p:layoutUnit>
<p:layoutUnit position="south" >
my application is about compiling a given code: I write a code and then I executed with the button "compiler" so a file will be created however the file is always created with "null" and I think because the var "code" is not yet set in the managed bean that why I want to update the page so the managed bean ill be set here is compile:
`
private String code;
private String error;
public String getCode() {
return code;
}
public String getError() {
return error;
}
public void setCode(String code) {
this.code = code;
}
public void compile() throws IOException {
File file = new File("C:\\Users\\Rad1\\test.c");
PrintWriter ecrivain;
ecrivain = new PrintWriter(new BufferedWriter (new FileWriter(file)));
ecrivain.println(code);
ecrivain.close();
`
There are two ways to achieve what you want: either by using a synchronous submit of a form with a subsequesnt postback, or by sending an AJAX request to partially update necessary parts of the page.
Synchronous submit
<p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" />
<p:commandButton value="compiler" id="btn3" action="#{fichier.action}" styleClass="myButtonClass" ajax="false" />
<h:outputText id="upd" value="#{fichier.code}" />
with action method
public String action() {
//do business job
return null;
}
This way a fields will be refreshed by making a postback. Don't forget that the bean Fichier must be view scoped. Note the ajax="false" attribute of <p:commandButton>.
AJAX call
<p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" />
<p:commandButton value="compiler" id="btn3" action="#{fichier.action}" styleClass="myButtonClass" update="upd" />
<h:outputText id="upd" value="#{fichier.code}" />
with the same action method
public String action() {
//do business job
return null;
}
This way only the contents of <h:outputText> will be updated after AJAX call is finished. Don't forget that the bean Fichier should also be view scoped. Note that id attribute of <h:outputText> must be specified.
Actually, you don't call the action itself. Your action forwards to a certain page. There is no race condition or syncronization problems in a JSF action betwwen setting the properties and the action itself. I recommend you to read JSF life cycles tutorial by BalusC Aplly request values phase run before the action.
Try to call action on command Button.
<p:commandButton value="compiler" id="btn3" action="#{fichier.compile}" update="outputCode" styleClass="myButtonClass" />
Add an id attribute to your output panel and specify it in the action button.
<p:layoutUnit id="outputCode" position="east" size="550" header="Resultat d'execution" resizable="true" >
<h:outputText value="#{fichier.code}" />
</p:layoutUnit>
P.S. It is also good to read this BalusC answer for better understanding of actions, Ajax/non Ajax request etc.
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.