In the code shown below the button with update="testTable" fires Bean.getSensors call three times, but the button with update="#form" fires only one. Why?
<h:form id="form4" prependId="true">
<p:commandButton value="id" update="testTable" process="#none"/>
<p:commandButton value="#form" update="#form" process="#none"/>
<p:dataTable id="testTable" value="#{bean.sensors}"
var="sensor"
rowStyleClass="#{sensor.alarm ? 'alarm' : null}">
<p:column headerText="Name" style="min-width: 100px; width: 100px;">
<h:outputText value="#{sensor.name}"/>
</p:column>
<p:column headerText="Value" style="min-width: 100px; width: 100px;">
<h:outputText value="#{sensor.value}"/>
</p:column>
</p:dataTable>
</h:form>
Thanks for all!
This is normal. JSF and Primefaces need to call it multiple times.
If You have performance issues, use lazy loading
public List<Sensor> getSensors(){
if(sensors == null){
sensors = ejb.getSensors();
}
return sensors;
}
Related
I'm using ajax in spinner to call some action in backing bean.
this is my code:
<b:panel>
<p:dataTable id="orderDataTable" var="order" value="#{orderViewBean.orders}"
widgetVar="ordersDataTable" tableStyle="table-layout: auto;">
<p:column headerText="Created" filterBy="#{order.creationDate}" filterStyle="display: none"
filterMatchMode="contains">
<h:outputText value="#{order.creationDate}"/>
</p:column>
<p:column headerText="Created By" filterBy="#{order.createdBy}" filterStyle="display: none"
filterMatchMode="contains">
<h:outputText value="#{order.createdBy}"/>
</p:column>
</p:dataTable>
<b:panelGrid colSpans="4,4,4">
<b:commandButton action="#{orderViewBean.previousPage}" value="Previous"
look="primary" process="#this:uploadOrderDataPanel" styleClass="pull-left"
disabled="#{!orderViewBean.page.hasPrevious()}" type="submit">
<p:ajax immediate="true" update=":companyOrdersForm"/>
</b:commandButton>
<b:row>
<div class="text-center">
<h:outputLabel value="Page"/>
<p:spinner value="#{orderViewBean.currentPage}" size="3"
min="#{orderViewBean.page.totalPages > 0 ? 1 : 0}"
max="#{orderViewBean.page.totalPages}">
<p:ajax listener="#{orderViewBean.changePageAjax}"
update="#form" process="#this" immediate="true"/>
</p:spinner>
<h:outputLabel value="Of"/>
<h:outputText value="#{orderViewBean.page.totalPages}"/>
</div>
</b:row>
<b:commandButton action="#{orderViewBean.nextPage}" value="Next"
look="primary" process="#this:uploadOrderDataPanel" styleClass="pull-right"
disabled="#{!orderViewBean.page.hasNext()}" type="submit">
<p:ajax immediate="true" update=":companyOrdersForm"/>
</b:commandButton>
</b:panelGrid>
</b:panel>
When I put some number into spinner and hit enter, then changePageAjax is invoked (this is ok) and also orderViewBean.previousPage (this is not ok). Can I avoid invoking other actions?
Add a partialSubmit="true" attribute on the relevant ajax tags.. From the PF documentation:
PartialSubmit reduces network traffic by only adding the partially processed components to the ajax request post. For big pages with many input components, partialSubmit is extremely useful as it leads to more lightweight requests. Compare the Post Data displayed by the logger for the difference.
See also:
http://www.primefaces.org/showcase/ui/ajax/partialSubmit.xhtml
I have this dialog:
<p:dialog
id="dlgComment"
widgetVar="dialogComentario"
modal="true"
header="#{messages.comentarios}"
width="600px"
resizable="false" showEffect="clip" hideEffect="clip">
<h:form id="formComentario">
<p:panelGrid columns="2" style="width: 100%">
<f:facet name="header">
<h:outputText value="#{monitorarEventoControlador.eventoSelecionado.titulo}"/>
</f:facet>
<h:outputText value="#{messages.inicio}" />
<h:outputText value="#{monitorarEventoControlador.eventoSelecionado.inicio}" />
<h:outputText value="#{messages.gravidade}" />
<h:outputText value="#{monitorarEventoControlador.eventoSelecionado.gravidade}" />
</p:panelGrid>
<p:dataTable id="tableComentario" var="comentario" value="#{monitorarEventoControlador.eventoSelecionado.getComentariosAsList()}" emptyMessage="#{messages.noRecordsFound}">
<f:facet name="header">
#{messages.comentarios}
</f:facet>
<p:column headerText="#{messages.dataHora}">
<h:outputText value="#{comentario.dataHora}">
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" timeZone="#{monitorarEventoControlador.buscaTimeZone()}"/>
</h:outputText>
</p:column>
<p:column headerText="#{messages.usuario}">
<h:outputText value="#{comentario.usuario.orgao.sigla} - #{comentario.usuario.apelido}"/>
</p:column>
<p:column headerText="#{messages.texto}">
<h:outputText value="#{comentario.texto}" />
</p:column>
</p:dataTable>
<p:panelGrid columns="2" style="width: 100%">
<h:inputText value="#{monitorarEventoControlador.comentarioSelecionado.texto}" maxlength="80"/>
<p:commandButton value="#{messages.comentar}" actionListener="#{monitorarEventoControlador.adicionarComentario()}" icon="ui-icon-check" update="tableComentario" />
</p:panelGrid>
</h:form>
</p:dialog>
And the bean:
public void adicionarComentario() {
comentarioSelecionado.setDataHora(new Date());
comentarioSelecionado.setEvento(eventoSelecionado);
comentarioSelecionado.setUsuario(autenticador.getUsuarioCorrente());
todosOsComentarios.colocar(comentarioSelecionado);
notificarComentario(comentarioSelecionado);
eventoSelecionado.getComentarios().add(comentarioSelecionado);
todosOsEventos.colocar(eventoSelecionado);
iniciarComentario(eventoSelecionado);
}
private void notificarComentario(Comentario comentario) {
Notificacao n = new Notificacao();
n.setDataHora(comentario.getDataHora());
n.setDescricao(DateUtil.dataHoraFormatada(n.getDataHora()) + " - " + comentario.getUsuario().getOrgao().getSigla() + "(" + comentario.getUsuario().getApelido() + "): " + comentario.getTexto());
n.setComentario(true);
n.setInforme(comentario.getEvento().getInforme());
comentario.getEvento().getInforme().getNotificacoes().add(n);
}
public void iniciarComentario(Evento evento) {
comentarioSelecionado = new Comentario();
setEventoSelecionado(evento);
}
The commandButton should update a dataTable. I have just moved from Prime 3.5 to 5.1 and among other problems I managed to figure out, there is this one that's realy annoying. It was working on Prime 3.5.
To be more specific about what is going wrong here: The action is fired normaly, the data is inserted correctly, but the dataTable is no longer updated. It is the very same code I was using yesterday with Prime 3.5, but now, using Prime 5.1 the dataTable does not refresh anymore.
Any ideas ? Thanks
use : before id
Remember
if you make a dialog
Before dialog old form tag should be close
then dialog content should be placed into another form.
use :dialogid, :dialogFormId
I made this code here, q aims to list the values of the bank, and that the User can update a date, even through the dataTable. So far, I managed to get to this point, only that, sets the value that the User enters. I can not find this value anywhere in the world, already ran tdo and the value that is typed in the box, does not come. I used several types of variables, but nothing.
<p:dataTable id="dataTable"
var="Arquivo"
paginator="true"
paginatorPosition="bottom"
rowsPerPageTemplate="100"
rows="100"
sortBy="#{Arquivo.id}"
value="#{arquivoBean.dataModelArquivo}"
rowStyleClass="#{Arquivo.pendente eq 1 ? 'ok' : 'erro'}"
>
<p:column headerText="ID">
#{Arquivo.id}
</p:column>
<p:column headerText="Nome">
#{Arquivo.nome}
</p:column>
<p:column headerText="Envio">
#{Arquivo.dataEnvio}
</p:column>
<p:column headerText="Produto" width="10px;">
<h:form id="formProduto">
<p:commandButton icon="ui-icon-circle-zoomout" value=""
action="#{arquivoBean.listarProdutoPorArquivo()}"
oncomplete="prodDialog.show()"
update=":form:dataTableProd"
onclick="listarProd([{name: 'ArquivoId', value:#{Arquivo.id}}]);">
<f:setPropertyActionListener value="#{Arquivo}" target="#{arquivoBean.arquivo}"/>
</p:commandButton>
</h:form>
</p:column>
<p:column headerText="Data" >
<p:inputMask id ="entrada#{cc.clientId}" mask="99/99/9999" value="#{Arquivo.dataEntrada}"
onkeypress="if (event.keyCode === 13) {
test([{name: 'ArquivoId', value:#{Arquivo.id}}]);
return;
};"
size="8">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</p:inputMask>
</p:column>
</p:dataTable>
After much poking around, I found this error inspector elements of chrome, tab networks:
<partial-response id="j_id1"><error><error-name>class java.lang.NullPointerException</error-name><error-message><![CDATA[]]></error-message></error></partial-response>
I fixed remove the form block and put many forms in place a need.
just it make works.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<ui:decorate template="/resources/Template.xhtml">
<ui:define id="content" name="content">
<p:growl id="war"/>
<style type="text/css">
.ok{
color: #336600
}
.erro{
color: #D20005;
}
</style>
<div style="width: 90%; margin-left: auto; margin-right: auto; ">
<h:form id="form">
<br/>
<br/>
<p:panel>
<f:facet name="header">
Lista de Arquivos Armazenados
</f:facet>
<h:form id="pesquisar">
<p:toolbar style="width: 100%;">
<p:toolbarGroup align="left" >
<h:panelGrid columns="1" cellpadding="0">
</h:panelGrid>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<h:panelGrid columns="5" cellpadding="0">
<h:outputLabel value="De: "/>
<p:inputMask mask="99/99/9999" value="#{arquivoBean.dataInicial}" size="10"/>
<h:outputLabel value="Até: "/>
<p:inputMask mask="99/99/9999" value="#{arquivoBean.datafinal}" size="10"/>
<p:commandButton value="Buscar" action="#{arquivoBean.listar()}" update=":form:dataTable" ajax="false"/>
<br/>
<p:selectBooleanCheckbox id="check" value="#{arquivoBean.pendente}"
itemLabel="Pendente">
<p:ajax process="#this" event="change" listener="#{arquivoBean.listarPendente()}" update=":form:dataTable" />
</p:selectBooleanCheckbox>
<p:button value="Ajustar Datas" outcome="/telas/armazenado/listaData.xhtml"/>
</h:panelGrid>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:panel>
<br/>
<p:dataTable id="dataTable"
var="Arquivo"
paginator="true"
paginatorPosition="bottom"
rowsPerPageTemplate="100"
rows="100"
sortBy="#{Arquivo.id}"
value="#{arquivoBean.dataModelArquivo}"
rowStyleClass="#{Arquivo.pendente eq 1 ? 'ok' : 'erro'}"
emptyMessage="Você ainda não ativou uma empresa ou não existe postagem para esta Empresa">
<p:column headerText="ID">
#{Arquivo.id}
</p:column>
<p:column headerText="Nome">
#{Arquivo.nomeMury}
</p:column>
<p:column headerText="Envio">
#{Arquivo.dataEnvio}
</p:column>
<p:column headerText="Produto" width="10px;">
<h:form id="formProduto">
<p:commandButton icon="ui-icon-circle-zoomout" value=""
action="#{arquivoBean.listarProdutoPorArquivo()}"
oncomplete="prodDialog.show()"
update=":form:dataTableProd"
onclick="listarProd([{name: 'ArquivoId', value:#{Arquivo.id}}]);">
<f:setPropertyActionListener value="#{Arquivo}" target="#{arquivoBean.arquivo}"/>
</p:commandButton>
</h:form>
</p:column>
</p:dataTable>
<p:dialog closeOnEscape="true"
widgetVar="prodDialog"
modal="true"
header="Lista de Produtos da NF-e"
style="width: 300; height: 500"
position="center">
<p:dataTable
id="dataTableProd"
var="XmlItens"
paginator="true"
paginatorPosition="bottom"
rowsPerPageTemplate="10"
rows="10"
value="#{arquivoBean.listaProd}">
<p:column headerText="ID">
#{XmlItens.id}
</p:column>
<p:column headerText="Nome">
#{XmlItens.descricaoProd}
</p:column>
<p:column headerText="Envio">
#{XmlItens.chaveNfe}
</p:column>
</p:dataTable>
<p:remoteCommand name="test" action="#{arquivoBean.inserirDataNota()}">
<f:setPropertyActionListener value="#{Arquivo}" target="#{arquivoBean.arquivo}"/>
</p:remoteCommand>
<p:remoteCommand name="listarProd" action="#{arquivoBean.listarProdutoPorArquivo()}" update=":form:dataTableProd">
<f:setPropertyActionListener value="#{Arquivo}" target="#{arquivoBean.arquivo}"/>
</p:remoteCommand>
</p:dialog>
</h:form>
</div>
</ui:define>
</ui:decorate>
</html>
I am using datatable of primefaces and using its feature of livescroll. But i am facing a strange issue. When i scroll down, data gets loaded on the screen in a perfect manner except dropdowns (using p:selectOneMMeny) for this. Is there some issue with drop down and live scroll. Please help. PFB my code.. for the same..
<p:dataTable id="searchTable" var="student" value="#{dataBean.students}"
scrollRows="10" scrollable="true" scrollHeight="200" liveScroll="true" >
<p:column styleClass="colum8" style="text-align: center; background-color:#dcdcdc; width: 150px;padding: 4px;">
<f:facet name="header">
<h:outputText value="#{msgs.mpromo_buscar_estatus}" />
</f:facet>
<p:selectOneMenu styleClass="DropDownBuscarStyle" id="promoEstatusDD" value="#{promo.estatusID}" valueChangeListener="#{buscarMB.estatusChangeListener}" disabled="#{sessionScope['UserDetails'].perfil ne 'MKT'}" onchange="setSpanValueOfDropDown(this);">
<f:selectItem itemLabel="#{msgs.mpromo_buscar_select}" itemValue="-1"></f:selectItem>
<f:selectItems value="#{buscarMB.estatusSelectList}" /> <p:ajax event="change" listener="#{buscarMB.changeStatus}" oncomplete="changeStatusComplete();" update="#this :buscarForm:isEstatusChangeDeniedId :buscarForm:divError editLinkId"> </p:ajax>
</p:selectOneMenu>
</p:column>
</p:datatable>
I am trying to user a form in 'panelGrid' to render values in a dataTable using <f:ajax>. However, when submitting using the <h:commandButton> the values sent are not displayed in the dataTable. I am not getting a stack or any console errors in the browsers.
This is the my xhtml (Simplified):
Product Catalog:
<p:tabView id="tabView" style="width: 65%" >
<p:tab id="books" title="Books">
<p:dataGrid var="book" value="#{saleBean.productList}" columns="3"
rows="9" paginator="true" paginatorTemplate="{CurrentPageReport}
{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="3,6,9">
<h:form id="product" >
<p:panel header="#{book.name}" style="text-align: center">
<h:panelGrid columns="1" style="width: 65%">
<!-- Add Book Images here -->
<h:outputText value="#{book.price}"/>
<h:outputLabel value="Dct (in dollars): " />
<h:inputText id="discount" value="#{saleBean.item.unit_discount}" style="width: 50%" />
<p:commandButton value="Add to Cart" update=":dataTableForm:sc"
action="#{saleBean.doAddItem}"/>
</h:panelGrid>
</p:panel>
</h:form>
</p:dataGrid>
</p:tab>
<p:tab id="arts" title="Art / Various">
<!-- Art Products to be added here -->
</p:tab>
<p:tab id="other" title="Other">
<!-- Various Products to be Added here -->
</p:tab>
</p:tabView>
<hr/>
<h1>Shopping Cart</h1>
<hr/>
<h:form id="dataTableForm">
<p:dataTable id="sc" value="#{saleBean.sd}" var="item" style="width: 60%">
<p:column>
<f:facet name="header">
<h:outputText value="Product"/>
</f:facet>
<h:outputText value="#{item.product_fk}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Quantity"/>
</f:facet>
<h:outputText value="#{item.quantity}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Unit Price"/>
</f:facet>
<h:outputText value="#{item.unit_Cost}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Unit Discount"/>
</f:facet>
<h:outputText value="#{item.unit_discount}"/>
</p:column>
</p:dataTable>
</h:form>
</h:body>
This the bean (Simplified):
public String doAddItem()
{
item.setUnit_Cost(product.getPrice());
item.setProduct_fk(product);
item.setQuantity(1);
sd.add(item);
return "productCatalog";
}
According to PrimeFaces documentation :
http://www.primefaces.org/docs/vdl/3.4/primefaces-p/commandButton.html
Your actionListener="#{saleBean.doAddItem}" must use a function corresponding to that :
public void doAddItem(ActionListener event)
{
// do your stuff
}
To use action here is an example :
action="#{saleBean.doAddItem}"
public String doAddItem(void)
{
item.setUnit_Cost(product.getPrice());
item.setProduct_fk(product);
item.setQuantity(1);
sd.add(item);
return "productCatalog";
}
Try to use only pf components when you can eg p:datatable. Replace the button with a p:commandButton and use process and update instead of f:ajax.
Also maybe it will by better to include the p:datatable in the form too.