richfaces data-table error - ajax

I am new to richfaces.
I have a problem with rich:datatable filtering, the source code of my page is like the site example:
<h:form id="form">
<rich:dataTable keepSaved="true" id="richTable" var="record" value="#{citiesBean}" rows="20">
<rich:column >
<f:facet name="header">
<h:commandLink action="#{bean.toggleSort}">
#{bean.sortOrders['cityTitle']}
<a4j:ajax render="richTable" />
<f:setPropertyActionListener target="#{bean.sortProperty}" value="#{'cityTitle'}" />
</h:commandLink>
<br />
<h:inputText value="#{citiesBean.filterValues['cityTitle']}">
<a4j:ajax render="richTable#body scroller" event="keyup" />
</h:inputText>
</f:facet>
<h:outputText value="#{record['cityTitle']}" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:commandLink action="#{bean.toggleSort}">
#{bean.sortOrders['cityCode']}
<a4j:ajax render="richTable" />
<f:setPropertyActionListener target="#{bean.sortProperty}" value="#{'cityCode'}" />
</h:commandLink>
<br />
<h:inputText value="#{citiesBean.filterValues['cityCode']}">
<a4j:ajax render="richTable#body scroller" event="keyup" />
</h:inputText>
</f:facet>
<h:outputText value="#{record['cityCode']}" />
</rich:column>
<f:facet name="footer">
<rich:dataScroller id="scroller" />
</f:facet>
</rich:dataTable>
</h:form>
everything seems OK but it has some problems.
1- datascroller does not work without render attribute set to 'richTable' but it works on demo!!!
2-when i type something on filter input, the table does not get updated!, i have checked the request and response on firebug,
the response does not have a valid id, i mean it look like this:
<update id="form:richTable:tb"><tbody id="form:richTable:0:tb" ....
what is wrong with my codes?!
I am using, richfaces 4, Glassfish 3.1, Firefox 3.6
thanks in advance.

I think it was a kind of bug. Now it is fine with version 4.1 M1.

Related

Show text when hovering over an element in a dynamic search

I have this code snipped which executes a dynamic search.
<f:facet name="right" >
<p:autoComplete id="searchTree"
placeholder="Search"
autoHighlight="true"
minQueryLength="2"
scrollHeight="700"
value="#{treeSelectionView.configItemDtoSearchSelected}"
completeMethod="#{treeSelectionView.searchAllNodes}"
var="configItemDtoSearch"
itemValue="#{configItemDtoSearch}"
itemLabel="#{configItemDtoSearch.name}"
effect="fade"
converter="#{treeSearchConverter}">
<p:ajax event="itemSelect" listener="#{depedencyView.onNodeSearchSelect}"
update="configItemForm:configItemTree configItemForm:toolBar :centerContentPanel :dependencyPanel"
oncomplete="focusOnSelectedTree()" />
</p:autoComplete>
</f:facet>
I have another property configItemDtoSearch.fullPath. I want to show that property when hovering over an item (identified by configItemDtoSearch.name) in the search results. Is there a build in functionality in primefaces for this ? How can I do that ?
PS: There seem to be such functionality using tooltip, but I have no idea how to combine them. It can probably be done using JavaScript as well. The problem is getting the var="configItemDtoSearch".
Have you tried Itemtip example on primeFaces
<p:outputLabel value="Itemtip:" for="itemTip" />
<p:autoComplete id="itemTip" value="#{autoCompleteView.theme3}" completeMethod="#{autoCompleteView.completeTheme}"
var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="themeConverter" forceSelection="true">
<f:facet name="itemtip">
<h:panelGrid columns="2" cellpadding="5">
<f:facet name="header">
<h:outputText styleClass="ui-theme ui-theme-#{theme.name}" style="margin-left:50px" />
</f:facet>
<h:outputText value="Display:" />
<h:outputText value="#{theme.displayName}" />
<h:outputText value="Key" />
<h:outputText value="#{theme.name}" />
</h:panelGrid>
</f:facet>
</p:autoComplete>

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>

How do I display error message for each h:inputText inside h:dataTable?

I need to display error messages after validation has failed for each h:inputText inside h:dataTable. Here is the code:
<h:dataTable value="#{myBean.dataList}" var="dataItem">
<h:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:inputText id="name" value="#{dataItem.name}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Value" />
</f:facet>
<h:inputText id="value" value="#{dataItem.value}" />
</h:column>
</h:dataTable>
When I tried to put:
<h:inputText id="name" value="#{dataItem.name}" />
<h:message for="name"/>
It returns:
Caused by: java.lang.NullPointerException
at com.sun.faces.renderkit.html_basic.HtmlBasicRenderer.augmentIdReference(HtmlBasicRenderer.java:196)
Try the following.
<h:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:inputText id="name" value="#{dataItem.name}" required="true" requiredMessage="Mandatory"/>
<h:message for="name" id="msg"/>
</h:column>
You haven't bound your <h:message></h:message> to your <h:inputText></h:inputText>. I have simply made the <h:inputText></h:inputText> to be a mandatory field. You may need to use some validators as and when required to suit your requirements.
You seem to be using a Mojarra 1.2 version older than 1.2_14. This is known as issue 941 which is been fixed in 1.2_14. The currently latest Mojarra 1.2 is 1.2_15. You can download it here. Replace both the jsf-api.jar and jsf-impl.jar and you should be all set. Your code is fine, by the way.

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.

How to re-render <ui:repeat> using <f:ajax render>

I have implemented a list created by a repeater:
<ui:repeat value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
and a Button that filters my list:
<h:commandLink action="#{overviewController.filterNew}">
<h:outputText value="Filter List" />
</h:commandLink>
So, is there an easy way to render only my repeater after clicking the command link (with AJAX) :-)
I tried following:
<f:ajax render="repeater">
ui:repeat id="repeater" value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
<f:ajax />
<h:commandLink action="#{overviewController.filterNew}">
<h:outputText value="Filter List" />
<f:ajax event="click" render="repeater"/>
</h:commandLink>
but that did not work..
Update
<h:form>
ui:repeat id="repeater" value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
<h:commandLink action="#{overviewController.filterNew}">
<h:outputText value="Filter List" />
<f:ajax event="click" render="repeater"/>
</h:commandLink>
</h:form>
doesn't work either... Maybe I hav to put the action method (overviewController.filterNew) into the ajax tag?
Update 2
<f:ajax event="click" render="repeater">
<h:commandLink action="#{overviewController.filterEBus}">
<h:outputText value="EBusiness" />
</h:commandLink>
</f:ajax>
Doesn't work either!
Maybe it's not possible to rerender a repeater ? is there another element like a div tag or something that can be rerendered???
...
Thank you for your help
The <ui:repeat> itself does not generate any HTML to the output. The <f:ajax render> expects an ID which is present in the HTML DOM tree. Put it in a <h:panelGroup> with an id and reference it instead.
<h:form>
<h:panelGroup id="projects">
<ui:repeat value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
</h:panelGroup>
<h:commandLink action="#{overviewController.filterNew}">
<h:outputText value="Filter List" />
<f:ajax execute="#form" render="projects" />
</h:commandLink>
</h:form>
Yes:
using Richfaces <a4j:commandButton reRender="targetId" />
using JSF 2.0 <f:ajax event="click" render="targetId">
using Primefaces <p:ajax>
<f:ajax render="repeater">
ui:repeat id="repeater" value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
<f:ajax />
why did you wrap it with f:ajax? It's redundant in this case.
Make sure that your components are surrounded by <h:form> tag
<h:form>
<ui:repeat id="repeater" value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
<h:commandLink action="#{overviewController.filterNew}">
<h:outputText value="Filter List" />
<f:ajax event="click" render="repeater"/>
</h:commandLink>
</h:form>
How about this:
<ui:repeat id="repeater" value="#{projectData.paginator.list}" var="project">
<h:outputText value="#{project.title}" />
</ui:repeat>
<h:commandLink>
<h:outputText value="Filter List" />
<f:ajax render="repeater" listener="#{overviewController.filterNew}" />
</h:commandLink>

Resources