I have a PrimeFaces p:dataTable with one column of type p:cellEditor with an p:inputText field.
This inputText is supposed to be required but if I set required="true" and leave the input empty nothing happens / no message is shown. The form including the above is submitted anyway.
Here's my code, especially the <p:column headerText="Data Value"> part:
<h:form id="my-form">
<p:dataTable var="dataItem" rowIndexVar="rowIndex" value="#{backingBean.dataList}" draggableRows="true" editable="true" editMode="cell">
<p:ajax event="rowReorder" update="#form"/>
<p:column headerText="Order Position">
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Data Name">
<h:outputText value="#{dataItem.name}" />
</p:column>
<p:column headerText="Data Value">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{dataItem.value}" /></f:facet>
<f:facet name="input"><p:inputText required="true" requiredMessage="Please insert a value" id="valueInput" value="#{dataItem.value}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<div>
<h:commandLink action="#{backingBean.submit()}">Submit</h:commandLink>
</div>
<h:messages id="validateMsg" />
</h:form>
The submitting h:commandLink is not an ajax call. But in my opinion it shouldn't submit the form anyway as long as the required p:inputText fields are empty.
I also tried using h:inputText instead of p:inputText with the same result.
I tried to add a required h:inputText outside the p:dataTable which works as expected and prevents the form from being submitted as long as it is empty.
Any ideas about how I get a required p:inputText field in p:cellEdit ?
According to rion18's suggestion. I'm checking in my backing bean if all values are set. Only if all values are set the submit button is shown. Here's how I ended up doing this:
<h:form id="my-form">
<p:dataTable var="dataItem" rowIndexVar="rowIndex" value="#{backingBean.dataList}" draggableRows="true" editable="true" editMode="cell">
<p:ajax event="cellEdit" update=":#{p:component('submit-button-group')}" />
<p:column>
...
</p:column>
</p:dataTable>
<div>
<h:panelGroup id="submit-button-group">
<h:commandLink action="#{backingBean.submit()}" rendered="#{backingBean.isAllValuesSet()}">Submit</h:commandLink>
</h:panelGroup>
</div>
</h:form>
In my backing bean I have a simple function that iterates over the dataList:
public boolean isAllValuesSet(){
for(DataItem item:dataItems){
if(item.getValue()==null || item.getValue().isEmpty()){
return false;
}
}
return true;
}
Related
I am trying to enable/disable a commandLink depending more than one condition.
At the beginning the commandLink is disabled. To enable it, I must click on a commandButton that activates a boolean flag (this point is currently working) and two inputText must be filled.
CommandLink:
<p:commandLink id="buttonGuardar" action="#{vinculacionesGestionDetalleController.buttonGuardar}" update="#form" process="#form" styleClass="fa-commandlink fa-floppy-o" immediate="true" disabled="#{vinculacionesGestionDetalleController.flagGuardar and empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas and empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}">
<h:outputText value="#{msg.guardar}" />
</p:commandLink>
commandButton that returns a boolean flag from the controller:
<p:commandButton id="validacionesValidarCodigoButton" actionListener="#{vinculacionesGestionDetalleController.buttonValidar}" value="Validar" styleClass="searchButton" icon="fa fa-button fa-check-circle" process="#form" style="margin-left: 20px;" update="buttonGuardar">
</p:commandButton>
inputText:
<p:row>
<p:column styleClass="alignTextRight">
<h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionCas}" for="inputDenominacionCas" />
</p:column>
<p:column>
<p:inputText id="inputDenominacionCas" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas}" />
</p:column>
</p:row>
<p:row>
<p:column styleClass="alignTextRight">
<h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionVal}" for="inputDenominacionVal" />
</p:column>
<p:column>
<p:inputText id="inputDenominacionVal" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}" />
</p:column>
</p:row>
As you can see, I have tried using more than two conditions on disable property of commandLink:
disabled="#{vinculacionesGestionDetalleController.flagGuardar and not empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas and not empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}"
But it is not working.
Firstly, logical operations that in "disabled" attribute are wrong. As I understood, you want to enable the link when flag is true and inputTexts are not empty.
enabled="#{flag and not empty inputText1 and not empty inputText2}"
Oh no, commandLink doesn't have enabled attribute. No problem:
disabled="#{not (flag and not empty inputText1 and not empty inputText2)}"
Now the changes at the values of inputTexts must trigger an ajax event that will update the commandLink.
<p:row>
<p:column styleClass="alignTextRight">
<h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionCas}" for="inputDenominacionCas" />
</p:column>
<p:column>
<p:inputText id="inputDenominacionCas" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas}" >
<p:ajax event="keyup" update="buttonGuardar"/>
</p:inputText>
</p:column>
</p:row>
<p:row>
<p:column styleClass="alignTextRight">
<h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionVal}" for="inputDenominacionVal" />
</p:column>
<p:column>
<p:inputText id="inputDenominacionVal" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}" >
<p:ajax event="keyup" update="buttonGuardar"/>
</p:inputText>
</p:column>
</p:row>
If you want ajax event get triggered only when inputText lose focus, you can use "blur" event instead of "keyup".
I am trying to make a h:panelgrid visible and invisible by clicking on a button that's why i made this code:
<p:menu styleClass="ui-menubar" style="width:auto">
<p:menuitem value="khraaaaaaaaa" actionListener="#{accounts.buttonUser()}"></p:menuitem>
</p:menu>
<h:panelGrid id="naalobouk" binding="#{accounts.pg1}">
<h1>Activer/désactiver un compte étudiant</h1>
<hr/>
<h:form id="etudiants">
<p:dataTable emptyMessage="Pas d'étudiant!"
paginator="true"
paginatorPosition="bottom"
rows="4"
value="#{accounts.etudiants}"
var="stu">
<f:facet name="header">
<h:outputText value="Les comptes étudiant" />
</f:facet>
<p:column headerText="#">
<h:outputText value="#{stu.id}" />
</p:column>
<p:column headerText="nom">
<h:outputText value="#{stu.nom}" />
</p:column>
<p:column headerText="prenom">
<h:outputText value="#{stu.prenom}" />
</p:column>
<p:column headerText="email">
<h:outputText value="#{stu.email}" />
</p:column>
<p:column headerText="password">
<h:outputText value="#{stu.password}" />
</p:column>
<p:column headerText="action">
<p:commandButton rendered="#{accounts.butshow}" value="#{stu.actif?'desactiver':'activer'}" action="#{accounts.doToggleStudentState(stu)}" update=":etudiants"/>
</p:column>
</p:dataTable>
</h:form>
</h:panelGrid>
and here is my bean code
private HtmlPanelGrid pg1 = new HtmlPanelGrid();//getter and setter
public void buttonUser(){
if(pg1.isRendered()==true){
pg1.setRendered(false);;
}
if(pg1.isRendered()==false){
pg1.setRendered(true);
}
}
When i click on the button nothing happens. What's the problem here ?
I'm assuming you want the method to negate the rendered property. In that case the method is flawed, as mentioned in the comments. The simplest code would be
public void buttonUser() {
pg1.setRendered(!pg1.isRendered());
}
The main problem is that the p:menuItem by default uses ajax, which by default does'nt update anything on the page. So either update something, or don't use ajax;
<p:menuitem value="khraaaaaaaaa" actionListener="#{accounts.buttonUser()}" ajax="false">
With ajax you need to wrap the panelGrid in a component that will always be rendered, since you can't update a component that has not been rendered in the first place. Wrap the panelGrid in a panelGroup:
<h:panelGroup id="container">
and update that:
<p:menuitem value="khraaaaaaaaa" actionListener="#{accounts.buttonUser()}" update=":container">
I am providing a search function using JSF. I get the list and display it correctly in a datatable :
<p:dataTable id="props" var="prop" value="#{propController.propSearch}" editable="true" style="margin-bottom:20px">
<p:column headerText="Id" width="20">
<h:outputText value="#{prop.id}" />
</p:column>
<p:column headerText="Name" width="300">
<h:outputText value="#{prop.name}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{prop.shortDescription}" />
</p:column>
<p:column headerText="Price" width="120">
<h:outputText value="#{prop.price}" />
</p:column>
<p:column width="120">
<h:commandButton value="View Prop" immediate="true" action="#{propController.viewSingleProp(prop)}" />
</p:column>
<p:column width="120">
<h:commandButton value="Delete" immediate="true" onclick="return confirm('Are you sure you want to delete this prop?')" actionListener="#{propController.deleteProp(prop)}" />
</p:column>
</p:dataTable>
</h:form>
However the commandButton to view each individual item does not get called. Instead the search page just refreshes with no data.
Why is this happening?
(I hope your opening tag of <h:form> is just missing in your code posted in your question, not in your actual code!)
You need to remove the attribute immediate="true" from the h:commandButton.
See:
Immediate=true VS immediate=false in JSF Component
I have a JSF application using Primefaces 3.5. I have a page where after click in a commandButton I call a method in Managed Bean which will fill a list that will be showed in fields tblPerfis and txtPerfis below.
<ui:composition template="...">
<ui:define name="content">
<h:form id="formPrincipal">
<br />
<p:fieldset legend="Pesquisa de Perfil" >
<p:panelGrid columns="2" >
<f:facet name="footer">
<p:commandButton id="btnPesquisar"
actionListener="#{perfilAcessoMB.pesquisar}" value="Pesquisar"
update="tblPerfis txtPerfis pnlPerfis"
styleClass="ui-icon-search" />
</f:facet>
</p:panelGrid>
</p:fieldset>
<br />
<h:outputText id="txtPerfis" value="Perfis: #{perfilAcessoMB.perfis}" ></h:outputText>
<p:dataTable id="tblPerfis" value="#{perfilAcessoMB.perfis}" var="perfil" emptyMessage="Nenhum perfil encontrado." >
<p:column headerText="Nome">
<h:outputText value="#{perfil.descricao}"></h:outputText>
</p:column>
</p:dataTable>
<p:outputPanel id="pnlPerfis">
<p:fieldset id="resultadoPesquisa" legend="Resultado da Pesquisa">TESTE</p:fieldset>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>
The called method is the follow:
#ManagedBean
#ViewScoped
public class PerfilAcessoMB {
public void pesquisar(ActionEvent event) {
// Fill perfis List
}
}
At principle, it works as waited. My problem happens when I want add rendered attribute:
<h:outputText id="txtPerfis" value="Perfis: #{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" ></h:outputText>
<p:dataTable id="tblPerfis" value="#{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" var="perfil" emptyMessage="Nenhum perfil encontrado." >
<p:column headerText="Nome">
<h:outputText value="#{perfil.descricao}"></h:outputText>
</p:column>
</p:dataTable>
<p:outputPanel id="pnlPerfis" rendered="#{not empty perfilAcessoMB.perfis}">
<p:fieldset id="resultadoPesquisa" legend="Resultado da Pesquisa">TESTE</p:fieldset>
</p:outputPanel>
Even when there is results, these fields are not showed. Does someone have any idea what is happening here?
Thanks,
Rafael Afonso
EDIT
Following a workmate suggestion, I changed the code to put dataTable and outputText inside outputPanel. The commandButton will reference the outputPanel but the rendered attibute will be put in datatable and outputText.
<p:commandButton id="btnPesquisar"
actionListener="#{perfilAcessoMB.pesquisar}" value="Pesquisar"
update="pnlPerfis"
styleClass="ui-icon-search" />
<p:outputPanel id="pnlPerfis">
<h:outputText id="txtPerfis" value="Perfis: #{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" ></h:outputText>
<p:dataTable id="tblPerfis" value="#{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" var="perfil" emptyMessage="Nenhum perfil encontrado." >
<p:column headerText="Nome">
<h:outputText value="#{perfil.descricao}"></h:outputText>
</p:column>
</p:dataTable>
</p:outputPanel>
After this, the page worked as waited.
However, I still did not understand what happened. What is the explanation for this behaviour?
Your problem occurs because our table is not rendered it simply does not exist in your html code, that is not in this context to be found to update or another source.
When you shut a larger scope as the panel and force an update in this it forces the table to check the condition for rendering, if yes the code is written and can be seen without problems.
I am trying to update a primefaces form (wizard-first step) after an ajax command button request with no success. The command button that makes the actual ajax call is on a dialog. I would like after submitting the request to force my view to refresh.
The command button deletes a record from a datatable. It works fine, record is deleted but when dialog is hidden the datatable keeps displaying the deleted record. I would like to force it somehow to refresh. Any ideas? Could I do it from my backing bean reviewManagerBean.deleteProtocol() method?
Here is the code (my BackBean is viewScoped):
<h:form id="reviewManagerForm">
...
<pe:masterDetail id="masterDetail" level="#{reviewManagerBean.currentLevel}" showBreadcrumb="false" selectLevelListener="#{reviewManagerBean.levelListener}" >
<f:facet name="header" >
<h:panelGroup layout="block" style="margin-top: 10px;" >
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all wizard-breadcrumbs#{reviewManagerBean.currentLevel eq 1 ? 'ui-state-hover' : ''}">
<h:outputText value="1: Protocol picker"/>
</h:panelGroup>
...
<p:messages id="mainMessagesPanel" showDetail="true" closable="true" />
</h:panelGroup>
</f:facet>
<pe:masterDetailLevel level="1">
<p:panel id="panel1" header="List of available protocols">
<p:dataTable id="protocolsDataTable" var="cRProtocol" rowKey="#{cRProtocol.revProtId}" value="#{reviewManagerBean.cRReviewProtocolList}"
widgetVar="protocolsTable"
...
selection="#{reviewManagerBean.selectedReviewProtocol}"
selectionMode="single" >
...
<p:ajax event="rowSelect" listener="#{reviewManagerBean.setSelectedRow}" />
<p:ajax event="rowUnselect" listener="#{reviewManagerBean.unsetSelectedRow}"/>
...
<p:column sortBy="#{cRProtocol.revProtTitle}" headerText="Title" style="width:200px;text-align:center;">
<h:outputText value="#{cRProtocol.revProtTitle}" />
</p:column>
...
<p:column>
<p:commandButton value="Delete" onclick="dlg5.show()"
update=":reviewManagerForm:deleteSingleProtocol"
disabled="#{reviewManagerBean.checkifProtocolIsOpen(cRProtocol)}"
ajax="true" process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:dataTable>
</p:panel>
...
<p:dialog id="dialog-deleteprotocol" header="Delete Image Type" widgetVar="dlg5" dynamic="true" modal="true" resizable="false">
<p:panelGrid id="deleteSingleProtocol">
<p:row>
<p:column>
<h:outputText value="Id:" style="font-weight:bold; padding-right:10px" />
</p:column>
<p:column>
<h:outputText value="#{reviewManagerBean.selectedReviewProtocol.revProtId}" />
</p:column>
</p:row>
...
<p:column>
<p:commandButton id='protocolDelete'
value='Delete'
action='#{reviewManagerBean.deleteProtocol()}'
ajax="true"
onclick="dlg5.hide()" icon="ui-icon-disk"
update=":reviewManagerForm:protocolsDataTable"
process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
Your datatable should be re-rendered properly, you would have gotten an exception otherwise (something like component with id :reviewManagerForm:protocolsDataTable could not be found).
This means that #{reviewManagerBean.cRReviewProtocolList} will get called again. You need to remove the item from that list. This is appropriately done from #{reviewManagerBean.deleteProtocol}.
When #{reviewManagerBean.cRReviewProtocolList} is called after the removal, your datatable will get updated.