<p:ajax> for <h:selectBooleanCheckBox> not working - ajax

I am trying to call a method on the bean when the checkbox is selected/de-selected. When I select/deselect the checkbox inside the header it works fine and calls the method. But the second checkbox doesn't seem to work.
Below is my code (Note that this code is inside h:dataTable).
I am using
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
<h:column rendered="#{tableID.equals('approved-payments-table')}">
<f:facet name="header">
<h:selectBooleanCheckbox id="checkbox_select_all" value="false">
<p:ajax id="process_select_all"
process="checkbox_select_all"
actionListener="#{batchCreationHandler.selectAllCheckBoxListener()}"
event="click"/>
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox id="checkbox_ABCDEFG" value="#{false}">
<p:ajax id="processItemInvoice" process="checkbox_ABCDEFG"
partialSubmit="true"
listener="#{batchCreationHandler.selectAllCheckBoxListener()}"
event="click"/>
</h:selectBooleanCheckbox>
<f:facet name="footer">
 
</f:facet>
</h:column>

Related

JSF Primefaces ajax on p:datatable

I am using JSF Primefaces for my UI. I have a specific requirement about ajax on p:datatable. This is a sample page of my project:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:comp="http://java.sun.com/jsf/composite/components/">
<ui:define name="content">
<h:form id="form1">
<p:growl id="messages" showDetail="false" />
<p:panel header="Available Rows" style="width: 15%;">
<p:dataTable id="table" value="#{rowBean.rows}" var="row"
widgetVar="50" style="width: 60px;" editable="true">
<p:ajax event="rowEdit" listener="#{rowBean.onEdit}"
update="form1:messages" />
<p:ajax event="rowEditCancel" listener="#{rowBean.onCancel}"
update=":form1:messages" />
<p:column>
<f:facet name="header">
<h:outputText value="Row ID" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.id}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{row.id}"
style="width:100%" label="Row ID">
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Row Value" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.value}" />
</f:facet>
<f:facet name="input">
<p:inputText disabled="true" value="#{row.value}"
style="width:100%" label="Row Value">
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6%">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panel>
<p:spacer height="5px;"/>
<p:panel id="createPanel" header="Create Row" closable="false" toggleable="true"
collapsed="true" style="width: 15%;">
<p:panelGrid columns="6">
<h:outputLabel for="rowBean" value="Row ID" />
<p:inputText value="#{rowBean.row.id}"
required="true" label="Row ID" style="width:125px" />
<h:outputLabel for="rowBean" value="Row Value" />
<p:inputText value="#{rowBean.row.value}"
required="true" label="Row Value" style="width:125px" />
<f:facet name="footer">
<p:commandButton value="Create" action="#{rowBean.createRow}"
update=":form1" />
</f:facet>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
Here I have a data table which lists down all the rows created. Each row is having id and value. Value is editable. There is one more panel within the form which creates new rows. Backing bean is pre-populated with all the created rows with #PostConstruct. Backing bean is having other methods to edit, cancel and create. This page is working and given below is the new requirement.
In some cases there can be an error associated with each row. If there is an error attached with a row, then the value text needs to be updated like a link. While clicking on the link, the row ID and a parameter needs to be passed to backing bean. With these params, backing bean fetches the error details and passes it to the page. Then the error message needs to be shown on a pop-up.
Can you tell me how to do this?
On the XHTML side:
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
On the JAVA side, in the function you call when you press the button:
if(error) {
FacesContext.getCurrentInstance().addMessage(
null,
new FacesMessage(FacesMessage.SEVERITY_WARN, "Error",
"Your error message."));
}
PD: This is my first answer, i'm getting used to the post options, i'm sorry if you dont see my message properly ;)
Maybe like this?:
<f:facet name="output">
<h:outputText value="#{row.value}" rendered="#{!row.hasError}" />
<h:commandLink value="#{row.value}" rendered="#{row.hasError}" command="#{row.command(parameters..)}" />
</f:facet>

get informed about ajax error in p:ajaxStatus

I have some ajax-operations, and if I execute one method, the Ajax-status displays me "error". I have no idea, what did fail.
Do you have any ideas, how I can fetch the ajax-error-message in case there is one to solve the problem?
<!-- AJAX-STATUS INFO -->
<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px" id="aj">
<f:facet name="start">
<p:graphicImage value="resources/images/loading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="Complete" />
</f:facet>
<f:facet name="prestart">
<h:outputText value="Starting..." /> </f:facet>
<f:facet name="error"> <h:outputText value="Error" />
</f:facet>
<f:facet name="success"> <h:outputText value="Success" />
</f:facet>
<f:facet name="default"> <h:outputText value="Ready" />
</f:facet>
</p:ajaxStatus>
I can't fix the problem due to the fact that I don't know what did crash. My method is called by
<h:selectBooleanCheckbox value="#{bean.booleanfield}" id="myonoffswitch" styleClass="onoffswitch-checkbox">
<f:ajax event="click" render=":main" execute="#form" listener="#{bean.reload}"/>
</h:selectBooleanCheckbox>
public void reload(AjaxBehaviorEvent event){...}
and the reload() method is executed without any errors, it finished without problems.
Somewhere after that the problem must occur? If I switch the button on, the Ajax status works fine. If i switch the button off, it says "error".
Any suggestions?

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.

h:selectOneMenu default value issue when put it in h:dataTable

I have a problem with h:selectOneMenu.
If I put it in h:dataTable I'm unable to set the default value.
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<ui:component xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:dataTable value="#{utenteBean.listaUtenti}"
var="utente" >
<h:column>
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:outputText value="1"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="#{sW.headerUsername}" />
</f:facet>
<h:outputText escape="false"
value="#{utente.username}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="#{sW.headerEnabled}" />
</f:facet>
<h:form>
<h:commandLink action="#{utenteBean.updateAbilitato}">
<h:outputText value="#{utente.enabled}">
<f:converter converterId="abilitatoConverter"/>
</h:outputText>
<f:setPropertyActionListener target="#{utenteBean.utente}"
value="#{utente}"/>
</h:commandLink>
</h:form>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="#{sW.headerRuolo}" />
</f:facet>
<h:form>
<h:selectOneMenu value="ROLE_ADMIN"
valueChangeListener="#{utenteBean.updateRuolo}">
<f:selectItem itemLabel="Utente" itemValue="ROLE_USER"/>
<f:selectItem itemLabel="Admin" itemValue="ROLE_ADMIN"/>
</h:selectOneMenu>
</h:form>
</h:panelGroup>
</h:column>
</h:dataTable>
</ui:component>
If I move the h:form with selectOneMenu out of h:dataTable all works.
I'm using jsf2.0 on glassfish3
Any Ideas?
(Solved by the OP in a question edit. Converted to a community wiki answer. See Question with no answers, but issue solved in the comments (or extended in chat) )
The OP wrote:
I have solved it by myself, i think there is a bug in <h:selectOneMenu value="ROLE_ADMIN" i changed the value="" from static to dynamic with a reference to an istance in managed bean and all work perfectly.

Resources