I have an autocomplete field and an output label to display the title of the selected module code
<p:row>
<p:column>
<p:outputLabel for="moduleTitle" value="Module Title: " />
</p:column>
<p:column colspan="2">
<p:outputLabel id="moduleTitle" value="#{classroomBean.classroom.module.moduleTitle}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel for="moduleCode" value="Module Code:" />
</p:column>
<p:column>
<p:autoComplete id="moduleCode" value="#{classroomBean.classroom.module}"
completeMethod="#{classroomBean.completeModule}" dropdown="true"
forceSelection="true"
converter="entityConverter" maxResults="15" required="true"
requiredMessage="Module is required." var="module" itemValue="#{module}" itemLabel="#{module.moduleCode}">
<p:ajax event="itemSelect" update="moduleTitle" />
</p:autoComplete>
</p:column>
</p:row>
This works fine, but what I want is clear the moduleTitle field when the autocomplete field is empty. Any idea? I tried to add <p:ajax event="keyup" listener="#{...}" /> but the backing bean method wasn't called. And I also have no idea on how to get the string length of autocomplete field from ajax.
Add p:ajax with keyup event along with p:ajax of itemSelect event on your p:autoComplete component to update the respect fields as following:
<p:autoComplete id="moduleCode" value="#{classroomBean.classroom.module}"
completeMethod="#{classroomBean.completeModule}" dropdown="true"
forceSelection="true" converter="entityConverter" maxResults="15"
required="true" requiredMessage="Module is required."
var="module" itemValue="#{module}" itemLabel="#{module.moduleCode}">
<p:ajax event="keyup" update="moduleTitle" />
<p:ajax event="itemSelect" update="moduleTitle" />
</p:autoComplete>
Related
I'm have a submit form and would like to display a row where they enter a birthdate if the relationship selected is a son or daughter.
I finally got things to work but it feels clunky and verbose with the use <p:row> Plus I couldn't get the update to work unless I used #form which then required the extra <p:ajax> on first/last name textinputs since their values would disappear if entered before a selection in the drop down was made.
This works but seems verbose
<h:form id="form2">
<p:panel header="Add a Non-Member">
<p:panelGrid>
<p:row>
<p:column>
<h:outputLabel for="fname" value="First Name: " />
</p:column>
<p:column>
<p:inputText id="fname" required="true"
value="#{memberManager.newNonMember.first_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="fname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputLabel for="lname" value="Last Name: " />
</p:column>
<p:column>
<p:inputText id="lname" required="true"
value="#{memberManager.newNonMember.last_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="lname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Relationship: " />
</p:column>
<p:column>
<p:selectOneMenu id="relationship" value="#{memberManager.newNonMember.type}" required="True"
requiredMessage="Relationship is required for non-member">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{memberManager.relationTypes}" var="type" itemValue="#{type}" itemLabel="#{type.label}" />
<p:ajax update="#form" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:message for="relationship" />
</p:column>
</p:row>
<p:row id="birthrow">
<p:column>
<h:outputLabel for="nm_birth_date" value="#{memberManager.newNonMember.type.label}'s Birthdate: "
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}" />
</p:column>
<p:column>
<p:calendar id="nm_birth_date" showOn="button" navigator="true" value="#{memberManager.newNonMember.birth_date}"
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
required="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
pattern="MM/dd/yyyy" mask="true"
requiredMessage="Your #{memberManager.newNonMember.type.label}'s Birthdate is required" />
</p:column>
<p:column>
<p:message for="nm_birth_date"></p:message>
</p:column>
</p:row>
</p:panelGrid>
<br />
<p:commandButton value="Add" action="#{memberManager.addAction}" ajax="false" />
</p:panel>
</h:form>
When I kept the panelGrid but used update="birthrow" on just the selectOneMenu ajax and removed the inputText ajax the birthdate row didn't update as expected, including after form was submitted with errors (ie last name required, then the ajax update stopped working)
Originally I wasn't using p:row or p:column but instead the columns attribute on the panel grid. But based on this How to rendered <p:selectOneMenu> by BalusC I knew I needed a wrapper component which is why I went the p:row route.
But is there a cleaner way to not use all the p:rows and extra ajax on the text inputs?
You could just have wrapped individual cells in a <h:panelGroup> without the need for all that <p:row><p:column> verbosity.
<h:panelGroup id="birthdateLabel">
<h:outputLabel ... />
</h:panelGroup>
<h:panelGroup id="birthdateInput">
<p:calendar ... />
</h:panelGroup>
<p:message ... />
To update them, just use update="birthdateLabel birthdateInput".
I am using p:ajax of primefaces in a p:selectOneRadio, to disable and re-enable form input text fields. these text fields have watermarks which disappear after disabling and they do not appear even after re-enabling them. I could not figure out the problem. please help. The code chunk where it appears is as bellow
<h:outputText
value="#{msg['elicense.contractorLicenseForm.personal.licenseApplied']}"/>
<p:selectOneRadio id="licenseApplied"
value="#{contractorLicenseBean.licenseApplied}">
<f:selectItem itemLabel="Yes" itemValue="1" />
<f:selectItem itemLabel="No" itemValue="0"/>
<p:ajax update="licensePersonName, relationshipPersonName" />
</p:selectOneRadio>
<h:outputText value="When it is yes, it should skip to supervisor details"/>
<h:outputText
value="#{msg['elicense.contractorLicenseForm.personal.licensePersonName']} "/>
<p:inputText id="licensePersonName"
value="#{contractorLicenseBean.licensePersonName}"
required="true"
label="LicensePersonName"
disabled="#{contractorLicenseBean.licenseApplied=='1'}"/>
<p:watermark for="licensePersonName"
value="Person/firm/company on whose Favour License is Sought "
id="watermark2" />
<h:outputText
value="#{msg['elicense.contractorLicenseForm.personal.relationshipPersonName']} "/>
<p:inputText id="relationshipPersonName"
value="#{contractorLicenseBean.relationshipPersonName}"
required="true"
label="RelationshipPersonName"
disabled="#{contractorLicenseBean.licenseApplied=='1'}" />
<p:watermark for="relationshipPersonName"
value="Relationship of the Applicant "
id="watermark3" />
Use a h:panelGroup around your watermarked components and update that h:panelGroup instead of component.
Primefaces binds the watermark to component through JQuery. If you changes/update the component then events bound to that component will not work, that may be the reason for your Issue.
I used primefaces 5.0, and I encountered as your problem. When I put the p:inputText into p:panelGrid and update the panelGrid. The problem was gone.
<h:form>
<p:messages id="messages" showDetail="true"/>
<p:selectOneRadio id="radio" value="#{watermarkView.radio}">
<f:selectItem itemLabel="Yes" itemValue="1" />
<f:selectItem itemLabel="No" itemValue="0"/>
<p:ajax process="radio" update="panelGridInput" />
</p:selectOneRadio>
<h:panelGrid id="panelGridInput"
columns="3" cellpadding="5"
style="margin-bottom:10px">
<h:outputLabel value="Search: "/>
<p:inputText id="keyword"
value="#{watermarkView.keyword}"
required="true"
label="Keyword"
disabled="#{watermarkView.radio eq '1'}"/>
<p:watermark for="keyword"
value="Search with a keyword"
id="watermark" />
<h:outputLabel value="Search: "/>
<p:inputText id="keyword2"
value="#{watermarkView.keyword2}"
required="true"
label="Keyword"
disabled="#{watermarkView.radio eq '1'}"/>
<p:watermark for="keyword2"
value="Search with a keyword"
id="watermark2" />
</h:panelGrid>
<p:commandButton id="regular"
actionListener="#{watermarkView.search}"
value="Regular"
ajax="false" />
<p:commandButton id="ajax"
actionListener="#{watermarkView.search}"
value="Ajax"
onclick="PrimeFaces.cleanWatermarks();"
oncomplete="PrimeFaces.showWatermarks();"
update="messages" />
</h:form>
I trying to use the onChange event of selectOneMenu, but it doesn't work and the form is not reloaded bye the data chosen when I add onChange attribue.
Can someone tell me how can I handle the onChange event of ?
Here is my view:
<p:panel id="cubeId" header="Cube" widgetVar="toggleable>
<h:form id="CubeIdForm">
<p:panelGrid columns="2">
<p:outputLabel value="Cube Name: "></p:outputLabel>
<p:inputText value="#{cubeMan.cub.name_cube}"></p:inputText>
<p:outputLabel value="Description: "></p:outputLabel>
<p:inputText value="#{cubeMan.cub.description_cube}"></p:inputText>
<p:outputLabel value="Caption: "></p:outputLabel>
<p:inputText value="#{cubeMan.cub.caption_cube}"></p:inputText>
<p:outputLabel value="Cache: "></p:outputLabel>
<p:selectBooleanCheckbox value="#{cubeMan.cub.cache}"></p:selectBooleanCheckbox>
<p:outputLabel value="Enabled : "></p:outputLabel>
<p:selectBooleanCheckbox value="#{cubeMan.cub.enabled}"
label="Activate Cube"></p:selectBooleanCheckbox>
<p:outputLabel value="Visible : "></p:outputLabel>
<p:selectBooleanCheckbox value="#{cubeMan.cub.visible}"></p:selectBooleanCheckbox>
<p:outputLabel value="Select Column: " />
<p:selectOneMenu value="#{cubeMan.name_cube}" id="cat">
<f:selectItem itemLabel="Select Column" itemValue="" />
<f:selectItems value="#{cubeMan.getColumnName()}" />
</p:selectOneMenu>
<p:outputLabel value="Select Cube: " />
<p:selectOneMenu value="#{cubeMan.name_cube}" id="cub">
<f:selectItem itemLabel="Select Cube" itemValue="" />
<f:selectItems value="#{cubeMan.AllCubs()}" />
<p:ajax event="change" listener="#{cubeMan.dUpdateCube}" update="#this" />
</p:selectOneMenu>
</p:panelGrid>
<p:commandButton value="Add" action="#{cubeMan.makeCube()}" update="#form">
<p:commandButton action="#{cubeMan.handleCube()}" /></p:commandButton>
</h:form>
</p:panel>
And here is the method in a request scoped bean:
public void dUpdateCube(AjaxBehaviorEvent event){
cubeService.update_cube(cub);
}
public void handleCube() {
cubeService.update_cube(cub);
}
When I change the menu, however, nothing is been printed.
How is this caused and how can I solve it?
I think you are talking about the selectOneMenu with id="cub".
You have to change the value of update of the p:ajax-element. With your current setting nothing gets updated. Try the following to update the whole form:
<p:ajax event="change" listener="#{cubeMan.dUpdateCube}" update="#form" />
I have this datatable :
<p:commandLink value="ajouter Ligne" update="lesarticles"
process="#this" actionListener="#{commandeMB.addLigne}" />
<p:dataTable id="lesarticles" var="car" widgetVar="carsTable"
rowKey="#{car.ligneCommandeFournisseurId}" selectionMode="single"
selection="#{commandeMB.selectedLigneCommandeFournisseur}"
value="#{commandeMB.commande.ligneCommandeFournisseurs}"
>
<p:column headerText="Numero">
<p:autoComplete id="art" required="true" var="p"
itemLabel="#{p.numero}" itemValue="#{p}" dropdown="true"
requiredMessage="Valeur requise" value="#{car.article}"
forceSelection="true" converter="#{articleConverter}"
completeMethod="#{commandeMB.completeArticle}">
<p:column>#{p.numero}</p:column>
<p:column>#{p.designation}</p:column>
<p:ajax event="itemSelect" listener="#{commandeMB.handleSelect}"
update="designation unite pu" />
</p:autoComplete>
<p:message for="art" display="text" />
</p:column>
<p:column headerText="designation">
<h:outputText id="designation"
value="#{car.article.designation}" />
</p:column>
<p:column headerText="unité">
<h:outputText id="unite"
value="#{car.article.unite.libelle}" />
</p:column>
<p:column headerText="PU">
<h:inputText id="pu" styleClass="monpu"
value="#{car.PUAchat}" />
</p:column>
<p:column headerText="Quantité">
<h:inputText binding="#{qte}" styleClass="maqte" value="#{car.qte}" >
</h:inputText>
</p:column>
<p:column headerText="Mt">
<h:outputText id="mt" styleClass="monmt"
value="#{car.mtLigne}" />
</p:column>
</p:dataTable>
I want when the user select one article(product in english) (througt autocomplete) I can detect which row is concerned by this selection to do do some treatements on managed bean side
as you see in the code I retrieve the selected article by :
public void handleSelect(SelectEvent event){
Article art = (Article) event.getObject();
}
but I want to retrieve also the row which contains this new article in the datatable
how can I achieve this
thank you in advance
<p:dataTable rowIndex="myIndex"/>
Then you can bind this value via;
<f:setPropertyActionListener target="#{bean.index}" value="#{myIndex}"/>
Or;
<f:param name="myIndex" value="#{myIndex}"></f:param>
To be able to retrieve the value which comes with f:param:
Map<String, String> map = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
int index = Integer.parseInt(map.get("myIndex"));
You can put those in a p:commandLink, p:commandButton or p:ajax.
I resolved this problem by that :
<p:column headerText="Numero">
<p:autoComplete id="art"
required="#{commandeMB.validation}" var="p"
itemLabel="#{p.numero}" itemValue="#{p}" dropdown="true"
requiredMessage="Valeur requise" value="#{car.article}"
forceSelection="true" converter="#{articleConverter}"
completeMethod="#{commandeMB.completeArticle}">
<p:column>#{p.numero}</p:column>
<p:column>#{p.designation}</p:column>
<p:ajax event="itemSelect" listener="#{commandeMB.handleSelect}"
update="designation unite pu mt" />
</p:autoComplete>
<p:message for="art" display="text" />
</p:column>
and in the managed bean I retrieve the concerned row by this :
FacesContext context = FacesContext.getCurrentInstance();
LigneCommandeFournisseur ligne_concernee =
context.getApplication().evaluateExpressionGet(context, "#{car}", LigneCommandeFournisseur.class);
My global filter saves the selected value by updating table. Table is filtered by text like bevor updating. In columns sortBy or filterBy is cleaning and empty after update/refresh dataTable... How can I save the typed values of filterBy and sortBy in columns?
Here are some code snippets:
<h:form id="showEmployees">
<p:dataTable id="liste" value="#{employeeView.allEmployeeList}"
filteredValue="#{employeeView.filteredEmployees}" var="employee"
widgetVar="employeeTable" resizableColumns="true"
emptyMessage="#{msg.noData}" rowKey="#{employee}"
selection="#{employeeView.selected}" selectionMode="single"
tableStyle="width:auto">
<p:ajax event="rowDblselect" listener="#{employeeView.onRowSelect}"
update=":employeeEditDialog" oncomplete="dlgEmployeeEdit.show()" />
<f:facet name="header">
<p:commandButton value="#{msg.employeeAdd}" id="addButton"
update=":employeeEditDialog" oncomplete="dlgEmployeeEdit.show()">
</p:commandButton>
<p:outputPanel>
<h:outputText value="#{msg.searchField}" />
<p:inputText id="globalFilter" onkeyup="employeeTable.filter()"
style="width:150px" />
<p:commandButton value="#{msg.export}" ajax="false"
action="#{employeeView.exportExcel()}" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{employee.active}" headerText="#{msg.active}"
filterOptions="#{employeeView.activeOptions}"
filterMatchMode="exact" sortBy="#{employee.active}">
<h:outputText value="#{(employee.active) ? 'X' : ''}" />
</p:column>
<p:column filterBy="#{employee.salutation.description}"
filterMatchMode="contains"
sortBy="#{employee.salutation.description}"
headerText="#{msg.salutation}">
<h:outputText value="#{employee.salutation.description}" />
</p:column>
How can I store the actuall filter and sort value??