Primefaces update from inside another form - ajax

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" />

Related

p:datatable sort or filter not working

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>

Refreshing datatable rows after edits(add,modify,delete...) [duplicate]

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>

PrimeFaces dataTable doesn''t render when exists binding attribute

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.

Ajax call is made but the related fields are updated only after page refresh

I have tried making an ajax call for a selectOneMenu using JSF 2 and primefaces 2.2. The actionListener method is being called. But the columns I specified in the update attribute are not getting updated. When I refersh the page, I could find the updated values. Please help me out in this.
The code I used was
<h:form id="mainForm" prependId="false">
<p>
<p:tabView>
<p:tab title="Receipt">
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="table1:#{rowIndex}:receiptCode, table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Print">
</p:tab>
Try f:ajax instead of p:ajax and re-render the whole form to get closer to the problem source :
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model"
itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<f:ajax render="#form"
listener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}"/>
</h:selectOneMenu>
This should work as stated in my answer to your previous question.
Partial updates of dataTables and ajax updates of dataTables triggered from a component within the dataTable are not working in the 2.2 version of Primefaces. This is a known bug that may have been resolved in version 3.
One suggestion you can try is to use a single form for each dataTable and only update elements from within that one form.

Getting an h:inputbox to become disabled once I checked a h:selectBooleancheckbox

I'm trying to make a "h:selectBooleanCheckbox" component make another h:inputbox become disabled once the checkbox is set to true (checked).
There are a few versions I tried and none succeeded (When I check the box, nothing happens)
Version 1
<f:view>
<h:form id="MyForm">
<h:panelGrid id="OutgoingMailPanel" styleClass="subConfigurationPanel">
<h:panelGrid columns="1">
<h:outputText styleClass="propertyName" value='Password' />
<h:outputText styleClass="properyDescription" value='Password for the incoming mail server' />
<h:inputText id="OutGoingMail" styleClass="propertyInput" value="#{email.currentOutgoingMailPassword[0]}" />
</h:panelGrid>
<h:panelGrid columns="1">
<h:panelGroup>
<h:selectBooleanCheckbox value="#{email.currentUsePasswordSameAsIncoming[0]}"
onclick="document.getElementById('MyForm:OutGoingMail).disable = !this.checked" />
<h:outputText styleClass="propertyName" value='Outgoing Password Same As Incoming.' />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
</h:form>
</f:view>
Version 2
<f:view>
<h:form id="MyForm">
<h:panelGrid id="OutgoingMailPanel" styleClass="subConfigurationPanel">
<h:panelGrid columns="1">
<h:outputText styleClass="propertyName" value='Password' />
<h:outputText styleClass="properyDescription" value='Password for the incoming mail server' />
<h:inputText id="OutGoingMail" styleClass="propertyInput" value="#{email.currentOutgoingMailPassword[0]}"
disabled="#{email.currentUsePasswordSameAsIncoming[0]}"/>
</h:panelGrid>
<h:panelGrid columns="1">
<h:panelGroup>
<h:selectBooleanCheckbox value="#{email.currentUsePasswordSameAsIncoming[0]}" >
<a4j:support event="onclick" rerender="OutGoingMail">
</h:selectBooleanCheckbox>
<h:outputText styleClass="propertyName" value='Outgoing Password Same As Incoming.' />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
</h:form>
</f:view>
Both version don't work for the same reason - nothing happends when I check the box.
Any Ideas? (Working with Jsf1.2, myfaces, richfaces)
Thanks!
In your version1 modify code as
document.getElementById('MyForm:OutGoingMail').disabled = this.checked
In version 2, rerender should be reRender

Resources