This question already has an answer here:
ajaxStatus for specific component only
(1 answer)
Closed 3 years ago.
I want to hide loading symbol while poll content is working. Here is my code
<h:form id="indexForm" enctype="multipart/form-data">
<p:growl autoUpdate="true"/>
<p:ajaxStatus style="width:60px;height:60px;position:fixed;right:5px;top:5px" >
<f:facet name="start" >
<p:graphicImage value="resources/resimler/loading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<p:poll id="poll" ignoreAutoUpdate="true" interval="5" process="#this,sevk" update="islemler,sevk" partialSubmit="true" rendered="true" />
</h:form>
set global attribute of poll to false (see http://primefaces.github.io/primefaces/7_0/#/components/poll?id=poll).
Related
I have a screen in my Richfaces application which uses a datatable and datascroller, with validation to ensure that data is filled.
( example to simulate the problem, full example can be found here
<h:form id="articleForm" >
<h:panelGroup layout="block">
<rich:messages globalOnly="true" />
<rich:dataTable value="#{productModifyBean.articles}" var="article" id="articleTable"
rows="15" >
<rich:column headerClass="headerOverflow artNrColumn">
<f:facet name="header">
<h:outputText value="articleNumber" />
</f:facet>
<h:outputText value="#{article.articleNumber}"/>
</rich:column>
<rich:column headerClass="headerOverflow shortNameColumn">
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{article.shortName}" />
</rich:column>
<rich:column headerClass="headerOverflow quantityColumn" >
<f:facet name="header">
<h:outputText value="Quantity" />
</f:facet>
<h:inputText value="#{article.quantity}" required="true"
requiredMessage="This is required" converterMessage="Error conversion"
id="modifyArticleFormatQuantity" >
</h:inputText>
<rich:message for="modifyArticleFormatQuantity" errorClass="errorColorRed" />
</rich:column>
</rich:dataTable>
<rich:dataScroller for="articleTable" renderIfSinglePage="false" boundaryControls="show" fastControls="hide" execute="#form" render="articleTable"
stepControls="show" style="float:right;" />
</h:panelGroup>
<br style="clear: both" />
<br style="clear: both" />
<div align="right" style="clear: both">
<a4j:commandButton value="#{msgs['button.modify'] }" styleClass="submitButton"
render="#{facesContext.validationFailed ? '#none' : 'articleForm'}"
actionListener="#{productModifyBean.modifyProduct}">
</a4j:commandButton>
</div>
</h:form>
Data validation should happen when the user presses the submit button ( to save the data) , and when the user using the pagination to go to a different page.
When clicking the submit button after leaving one field empty, the behaviour is normal : it shows an empty field with the remark 'this is required'
However, when instead moving to a different page ( for example clicking on the '2' page button ) , validation happens correctly, but the old value is put back into the screen, thus stating that the value should be filled but showing it filled in with a value.
Anyone have any idea what the reason for this problem could be, and how to resolve it ? Is this a bug in RichFaces, or am I overlooking something ?
I found the solution by trial and error :
If I change the datascroller to use render="#region" , the screen is correctly rendered.
<rich:dataScroller for="articleTable" renderIfSinglePage="false" boundaryControls="show" fastControls="hide" execute="#form" render="articleTable"
stepControls="show" style="float:right;" />
I want to implement a sort and/or filter-function for my datatable, and I have done everything the documentation says.
The problem is, that if I klick on a sort-header or fill in a filter, nothing happens (even the ajax-symbol is not shown to i assume that nothing happens at all).
What can be the problem?
I am using:
templates to show the p:datatable
primefaces 5.1
myfaces bundle 2.2.0-20131222.194304-2575.jar
code:
<ui:define name="content">
<h:form>
<p:dataTable var="user" value="#{logbookProjectMembersBean.projectMembers}"
filterDelay="100" widgetVar="userList" emptyMessage="No ProjectMembers found with given criteria"
filteredValue="#{logbookProjectMembersBean.filteredProjectMembers}" rowStyleClass="#{user.enabled? 'row' : 'inactiveUserRow'}" styleClass="userList">
<f:facet name="header">
<p:outputPanel>
<h:outputText>Overview</h:outputText>
<h:outputText value=" - Search:" />
<p:inputText id="globalFilter" onkeyup="PF('userList').filter()" style="width:150px" placeholder="Enter keyword" />
</p:outputPanel>
</f:facet>
<p:column headerText="Name" filterBy="#{user.name}" filterMatchMode="contains" >
<h:outputText value="#{user.name}" />
</p:column>
<p:column headerText="Surname" filterBy="#{user.surname}" filterMatchMode="contains" >
<h:outputText value="#{user.surname}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
I'm not sure what's wrong with my HTML code. From what I read, it should work. I even tried using prependId="false" which didn't resolve the problem of not finding the UI Component.
<p:tabView>
<p:tab title="Tab1" id="tab1">
<h:form id="form1" prependId="false">
<p:panelGrid columns="2" id="grid1">
<h:outputLabel for="minDraw" value="Starting draw number:" />
<p:inputText id="minDraw" value="#{LottoMaxBacking.minDraw}" />
<p:commandButton value="Get Frequency From Begining"
actionListener="#{LottoMaxBacking.loadAllDrawFreq}"
update=":form2:freqTable" />
</p:panelGrid>
</h:form>
<h:form id="form2" prependId="false">
<p:dataTable var="entry" value="#{LottoMaxBacking.drawFreqList}"
id="freqTable">
<f:facet name="header">
<h:outputText value="#{LottoMaxBacking.tableHeader}" />
</f:facet>
<p:column sortBy="#{entry.key}" headerText="Ball Number">
<h:outputText value="#{entry.key}" />
</p:column>
<p:column sortBy="#{entry.value}" headerText="Frequency">
<h:outputText value="#{entry.value}" />
</p:column>
</p:dataTable>
</h:form>
</p:tab>
<p:tab title="Tab 2"></p:tab>
</p:tabView>
I tried ":tab1:form2:freqTable", ":freqTable", and "freqTable" but none of them work. When I put both forms together as a single form, it would find the freqTable fine.
OK I finally figured it out after looking at the error message again.
Cannot find component with identifier ":form2:freqTable" referenced from "j_idt54:j_idt56"
idt54 refers to the TabView and idt56 refers to the command button. So it turns out that my button's AJAX update string didn't go far enough original and all my other attempts referred to the wrong parent container. I added an id to p:tabView and changed the update String and it worked.
<p:commandButton value="Get Frequency From Begining"
actionListener="#{LottoMaxBacking.loadAllDrawFreq}"
update="tv:form2:freqTable" />
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
How to ajax-update the p:dataTable from inside the p:dataTable itself?
In my xhtml page i have a dataTable containing object of type Group , and a button to add a new group to the datable and eventually in the database
I'm using a sessionScoped managed Bean , So i need to refresh my datatable rows after adding a new record .
For this i used the update attribute of the command Button component but the datatable is not refreshed and here's the code :
<p:fieldset legend="Groups">
<p:commandButton id="newGroup" value=" New Group" onclick="newGoupDlg.show();"
type="button" update="groupsDataTable"/>
<br/>
<p:dataTable id="groupsDataTable" var="group" value="#
{projectAdminisrationMB.groupsList}"
rowKey="#{group.name}"
rowIndexVar="rowIndex"
binding="#{table}">
<f:facet name="header">
</f:facet>
<p:column id="column2">
<f:facet name="header">
<h:outputText value="Group Name"></h:outputText>
</f:facet>
<p:graphicImage value="/images/group/#{group.name}.gif" />
<h:commandLink action="#{projectAdminisrationMB.showGroupDetails}"
value="#{group.name}">
<f:setPropertyActionListener target="#{projectAdminisrationMB.selectedGroup}"
value="#{group}" />
<f:setPropertyActionListener target="#{projectAdminisrationMB.selectedGroupName}"
value="#{group.name}" />
<f:setPropertyActionListener target="#
{projectAdminisrationMB.selectedGroupDescription}" value="#{group.description}" />
<f:setPropertyActionListener target="#
{projectAdminisrationMB.selectedGroup.dbRowIndex}" value="#{table.rowIndex}" />
</h:commandLink>
</p:column>
<p:column id="column3">
<f:facet name="header">
<h:outputText id="text3" value=" Group Description "></h:outputText>
</f:facet>
<h:outputText value="#{group.description}"></h:outputText>
</p:column>
<f:facet name="footer">
</f:facet>
</p:dataTable>
<p:dialog header="New Group" widgetVar="newGoupDlg" width="750"
showEffect="explode" hideEffect="explode">
<br/> <br/>
<h:outputText value=" New Group : " />
<p:inputText id="newGroupName" value="#
{projectAdminisrationMB.newGroup.name}">
<f:validator validatorId="requiredValidator"></f:validator>
</p:inputText>
<br/> <br/>
<h:outputText value="Group Description :" />
<br/> <br/>
<p:editor id="newGroupDescription" value="#
{projectAdminisrationMB.newGroup.description}" width="600"/>
<br/> <br/>
**<p:commandButton id="ValidateNewGroup" value="Validate"
actionListener="#{projectAdminisrationMB.addNewGroup}"
onclick="newGoupDlg.hide()" update="groupsDataTable" ></p:commandButton>**
<p:commandButton id="CancelNewGroup" value=" Cancel "
onclick="newGoupDlg.hide()"></p:commandButton>
</p:dialog>
<br/> <br/>
</p:fieldset>
Any idea will be apprecited
The most common cause for your problem is that the id of the data table isn't referenced properly.
Check in your browser what the actual id of the data table is.
When your data table is in a container like a form the id of the container is prepended to the id of the data table separated (by default) by a :.
So this:
<h:form id="form">
<p:dataTable id="dt" ...
</h:form>
Will result in the data table having an id of form:dt
When referring to an element inside a container from within another container you need to begin the search from the root. This is done by adding a : in front of the id.
Example:
<h:form id="form">
<p:dataTable id="dt" ...
</h:form>
<h:form id="btnForm">
<p:commandButton update=":form:dt" ...
</h:form>
You can also use binding:
<h:form binding="#{form}">
<p:dataTable id="#{dt}" ...
</h:form>
<h:form id="#{btnForm}">
<p:commandButton update=":#{dt.clientId}" ...
</h:form>
I'm creating a dataTable with two dataTable inside :).
But this time I'm having problem to render it when I try use binding attribute in a h:panelGroup that wraps first dataTable.
I'm using binding to help refresh just the panelGroup, like BalusC told in this question. When I remove the binding attribute the dataTable renders normally, but of course nothing is rendered with f:ajax tags inside the dataTables.
Here is the xhtml:
<ui:component>
<h:panelGroup>
<h:panelGroup layout="block;" id="#{id}"
binding="#{painelTabelaContatos}" rendered="true">
<p:dataTable id="tabela#{id}"
value="#{modeloTabelaContatos.listaDeContatos}" var="contato"
selectionMode="single"
rowSelectListener="#{controladorTabelaContatos.processarSelecaoLinha}"
rowUnselectListener="#{controladorTabelaContatos.processarDeselecaoLinha}"
selection="#{modeloTabelaContatos.contatoSelecionado}">
<p:column headerText="Contatos">
<hrgi:editableText style="width:100%" value="#{contato.descricao}" />
</p:column>
<p:column headerText="Telefones">
<h:dataTable value="#{contato.telefones}" var="telefone">
<h:column>
<h:inputText value="#{telefone}" />
</h:column>
<h:column>
<h:graphicImage library="img" name="default_trash.png"
style="cursor:pointer;">
<f:ajax event="click" render=":#{painelTabelaContatos.clientId}"
listener="#{controladorTabelaContatos.removerTelefone(contato, telefone)}" />
</h:graphicImage>
</h:column>
</h:dataTable>
</p:column>
<p:column headerText="e-mails">
<h:dataTable value="#{contato.emails}" var="email">
<h:column>
<h:inputText value="#{email}" />
</h:column>
<h:column>
<h:graphicImage library="img" name="default_trash.png"
style="cursor:pointer;">
<f:ajax event="click" render=":#{painelTabelaContatos.clientId}"
listener="#{controladorTabelaContatos.removerEmail(contato, email)}" />
</h:graphicImage>
</h:column>
</h:dataTable>
</p:column>
<p:column>
<h:graphicImage library="img" name="default_trash.png"
style="cursor:pointer;">
<f:ajax render=":#{painelTabelaContatos.clientId}" event="click"
listener="#{controladorTabelaContatos.removerContato(contato)}" />
</h:graphicImage>
</p:column>
</p:dataTable>
</h:panelGroup>
<h:panelGroup layout="block">
<p:commandButton value="ADICIONAR CONTATO" update="#{id}"
immediate="true"
action="#{controladorTabelaContatos.adicionarContato}" />
<p:commandButton value="ADICIONAR TELEFONE" update="#{id}"
immediate="true"
action="#{controladorTabelaContatos.adicionarTelefone}" />
<p:commandButton value="ADICIONAR E-MAIL" update="#{id}"
immediate="true"
action="#{controladorTabelaContatos.adicionarEmail}" />
</h:panelGroup>
</h:panelGroup>
</ui:component>
I've already tried remove the h:dataTables that are inside p:dataTable, but without success.
This component is just the content of a PrimeFaces tab, and this tab is inside a PrimeFaces dialog. Could someone explain me why is this happening??
I've found the cause of error, after it was easy find a solution...
The problem is caused because I call this component in two different pages:
popupCadastroPessoa.xhtml
<ui:include src="../tabs/abaEdicaoContatos.xhtml">
<ui:param name="id" value="painelContatoPessoa" />
</ui:include>
and in popupCadastroFuncionario.xhtml
<ui:include src="../tabs/abaEdicaoContatos.xhtml">
<ui:param name="id" value="painelContatoFuncionario" />
</ui:include>
cause I didn't really created the binding bean, JSF gets confused. So I've just created two UIPanel beans and passed it as parameter:
<ui:include src="../tabs/abaEdicaoContatos.xhtml">
<ui:param name="id" value="painelContatoPessoa" />
<ui:param name="painelTabelaContatos" value="#{bindingTabelaContatoPessoa}"/>
</ui:include>
Was my fault. Thanks for your attention and sorry for the inconvenience.