I have an extended dataTable in my application, and I would like to load information into my form, when a row is selected. So far this is what I have:
<rich:extendedDataTable value="#{myBean.list}" var="item" selection="#{myBean.selection}" selectionMode="single">
<a4j:ajax execute="#form" render="#from" event="selectionchange" listener="#{myBean.selectionListener}"/>
<h:column>
...
</h:column>
</rich:extendedDataTable>
The problem is that the form seems to be rendered before the selectionListener is called, so the data isn't loaded. How could I solve this issue?
Makhiel got it right, I misspelled "form". I feel silly now.
Related
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 2 years ago.
When I click addTagButton, everything works well. It updates all three components: tags, tagId and addTagButton.
<p:commandButton id="addTagButton" icon="ui-icon-plus"
action="#{searchBean.addTag}"
update="tags, tagId, addTagButton"
disabled="#{searchBean.tagChoices.size() == 0}">
</p:commandButton>
Here's the table component:
<h:dataTable id="tags" var="tag" value="#{searchBean.tags}">
<h:column>
<div style="text-align:right;">
<h:outputLabel value="#{tag.typeName}:"/>
</div>
</h:column>
<h:column>
<p:inputText id="tag" size="25" value="#{tag.typeValue}"
disabled="#{searchBean.searchForParent}"/>
</h:column>
<h:column>
<p:commandButton id="delTagButton" icon="pi pi-trash"
action="#{searchBean.deleteTag}"
update=":contentForm:tagId, :contentForm:addTagButton, tags">
<f:setPropertyActionListener
target="#{searchBean.tagId}"
value="#{tag.typeName}" />
</p:commandButton>
</h:column>
</h:dataTable>
When i click on delTagButton that is on each row in tags table, action works fine, :contentForm:tagId and :contentForm:addTagButton update fine. But tags table which is where clicked command button exist, does not update.
When a row is deleted, change must reflect in the tags table which does not work.
Now, If I change h:dataTable to p:dataTable or any other primefaces component, it works. I am trying to make it work with h:dataTable.
Primefaces 8.0, JSF 2.5
Look on this simple example:
<h:form id="form">
<h:panelGroup id="wrapper" layout="block">
<h:dataTable id="table" border="1" value="#{testBean.list}" var="person">
<h:column>#{person.name}</h:column>
<h:column>#{person.surname}</h:column>
<h:column>
<p:commandButton id="delTagButton" icon="pi pi-trash"
action="#{testBean.remove(person)}" update="table">
</p:commandButton>
</h:column>
</h:dataTable>
</h:panelGroup>
</h:form>
To really find out what is being updated look in browser console.
If you're trying to update="table" nothing happens (like in your code). If you try to update a parent of the table (which is often a case), you will get an error an error:
SEVERE: Error Rendering View[/example.xhtml]
org.primefaces.expression.ComponentNotFoundException: Cannot find component for expression "wrapper" referenced from "form:table:0:delTagButton".
at org.primefaces.expression.SearchExpressionFacade.cannotFindComponent(SearchExpressionFacade.java:677)
So we could try with "older" parent and realize that update="#form" works! OK, so we want to help to find id="table\wrapper" component. Let try clientId update="form:table". Like with update="table" nothing happens. And no error from PF (so the element can be found). This could mean that h:dataTable cannot be properly re-rendered from inside itself (but I don't want to throw stones:-)). This is often a case with e.g. popups in JSF 3rd party component libraries.
In this particular example I'd say, you have to update form:wrapper (adding form: works) or just #form to get it work. With your code it would be the same. Try to update some table parent or the whole form.
All of above is tested in JSF 2.2, with last RF, an old PF and OmniFaces. But I think the same would be the case with newer versions.
BTW. I didn't know there is JSF 2.5 :-)
I'm relatively new to JSF and Primefaces, but I've been tasked to try and reduce the amount of AJAX requests made in a legacy codebase. This question is from a particular example where we have a directory listing UI of files and folders.
<p:dataTable id="directoryTable" var="directoryObject" value="#{fileCabinet.folderContents}"
resizableColumns="true" scrollable="true"
rowKey="#{directoryObject}" selectionMode="single"
selection="#{fileCabinet.currentObject}" dblClickSelect="true"
sortMode="multiple" emptyMessage="This folder is empty"
sortFunction="#{dataTableUtil.sort}">
<c:if test="#{directoryObject.objectType eq 'DIRECTORY'}">
<p:ajax event="rowSelect" listener="#{fileCabinet.onRowSelect}"
update=":form:directoryTable :menu" />
</c:if>
I've excluded the rest of the datatable for brevity. With this code, the ajax event is never attached even though the 'test' expression evaluates perfectly fine in subsequent 'rendered' attributes of html elements later on. Unfortunately, p:ajax doesn't support 'rendered' conditionals.
I've also tried c:choose / c:when, to the same results.
This feels like something that should be really easy to do! I'm probably missing some simple syntax to make this work.
Thanks!
I fixed this by using the disabled attribute for <p:ajax> with my conditional as the value (negated of course).
<p:ajax event="rowSelect"
listener="#{fileCabinet.onRowSelect}"
update=":form:directoryTable :menu"
disabled="#{directoryObject.objectType ne 'DIRECTORY'}" />
Since 4.0 version, Primefaces datatable comes with a disabledSelection property.
<p:dataTable var="foo" value="#{bean.foos}" selection="#{bean.selectedFoo}" disabledSelection="#{foo.bar == 1}">
<p:column selectionMode="single" />
<p:column>
<h:outputText value="#{foo.bar}" />
</p:column>
<p:dataTable>
I'm currently using JSF 1.2, and Richfaces 3.3.3.
I get a quite strange bug with a combobox in a rich:datatable :
The first time I click and select a value, it's working, and via ajax:support, it updates the page as required. But then, if I try to change the value in the combobox, it seems "blocked"... field is not editable, and the arrow not "clickable". If I click on another field of the page, then come back, it usually works better (but not always).
Here is the code :
<rich:column style="border:none;" id="KitCol">
<f:facet name="header">
<h:outputText value="Kit"/>
</f:facet>
<rich:comboBox id="kit" value="#{deployItem.kit}"
directInputSuggestions="true" defaultLabel="Enter kit name >
<f:selectItems value="#{deployItem.kits}" />
<a4j:support event="onchange" action="#{deployItem.kitChanged}"
reRender="deployActions, deployTable">
<f:setPropertyActionListener value="true" target="#{deployController.atLeastOneItem}" />
</a4j:support>
</rich:comboBox>
</rich:column>
Would somebody have an idea about how to solve this issue ?
Thanks in advance.
This is not a duplicate post, i just done research but not helping.
First, this is my page... simplified for easy reading.
<h:form id="treeForm">
<f:event type="preRenderView" listener="#{taskTreeBean.update}" />
<rich:tree id="tree" nodeType="#{node.type}" var="node"
value="#{taskTreeBean.rootNodes}" toggleType="client"
selectionType="ajax"
render="#all"
selectionChangeListener="#{taskTreeBean.selectionChanged}">
<rich:treeNode>
...
</rich:treeNode>
</rich:tree>
</h:form>
<h:form id="taskListTableForm">
<rich:dataTable id="taskListTable" styleClass="tasklist" keepSaved="true" value="#{taskListModel}" var="task"
rowClasses="odd-row, even-row" rows="3">
<rich:column>
...
</rich:column>
<f:facet name="footer">
<rich:dataScroller id="scroller" for="taskListTable" />
</f:facet>
</rich:dataTable>
</h:form>
When i click some tree node, task list form will render, but the viewstate will disappear, which makes dataScroller requires two clicks to next/prev page since the first click is getting back the ViewState value.
I checked the JIRA here - http://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790.
Tried render="#all" or render="treeForm, taskListTableForm", both failed. I cannot wait mojarra to release 2.2. So is there any workaround here?
Thanks so much. The JIRA is just too difficult to understand.
Edited: There is another problem, the page go from 1 to 2 in the dataTable if i click the tree node. Why?
I am aware that you probably solved this problem, but for future reference, this should provide others with the solution.
I had the same problem and worked around it by replacing <f:ajax/> with <p:ajax/> from PrimeFaces 3.0. The page in question has no other PrimeFaces components. I don't know why it works, but hopefully it will in your case.
as Mentioned in primefaces showcase i am trying to create a global filter for datatable . there i am unable to understand what does carsTable means, in the code fragment
<h:form>
<p:dataTable var="car" value="#{tableBean.carsSmall}"
emptyMessage="No cars found with given criteria">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px"/>
</p:outputPanel>
</f:facet>
when i use my datatableId inplace of carsTable iam getting an javascript error as Undefined Id.
This looks like a typo in the showcase code display. Their is a missing attribute on the <p:dataTable> component called widgetVar. This attribute declares the unique Javascript identifier for this client side component. The code should show this:
<p:dataTable var="car" value="#{tableBean.carsSmall}"
widgetVar="carsTable" emptyMessage="No cars found with given criteria">
...
For some reason the client side function filter() is not declared in the PF Guide 2.2 under the Client DOM for dataTable, however I know it is there and I use it.