I am using JSF along with RichFaces and Spring Webflow. I am trying to select rows from the data table using and perform some operation on the server side on the selected row. How ever I am facing problem retrieving the data from the checkbox.
<rich:column id="compCheckBox" styleClass="center-aligned-text">
<f:facet name="header">
<h:selectBooleanCheckbox title="selectAll">
</h:selectBooleanCheckbox>
<h:outputText value="Select"/>
</f:facet>
<h:selectBooleanCheckbox id="selectComponent" title="selectAll" value="#{workspace.selectedComponentIds[componentInfo.id]}">
</h:selectBooleanCheckbox>
</rich:column>
And submitting the value using
However only the Ids are restored in the Map, and by default all the values of the ids in the map are shown as 'false'.
How do I get the selected checkboxes to get marked as true in the map.
I have referred link text for information.
How can I resolve this?
Thanks,
Abdul
You need to ensure that the same datamodel is preserved in the subsequent request. The value attribtue of the datatable must return exactly the same datamodel during form submit as it was during display. If the datamodel is not present or different, then chances are that the map of selected items won't be filled as you'd expect.
Update as per the comment: you also need to ensure that the table and the submit button are inside the same <h:form>.
Related
I've got the code below. I removed facets and similar tags, to make it more readable. I highly doubt they are the issue. I'm using Primefaces 6.1 for all tags, except the form tag is Omnifaces.
<h:form id="form">
<p:dataTable id="table" value="#{data.rows}" var="row" rowIndexVar="index">
<p:column id="ajaxColumn" rendered="#{true}">
<p:inputText id="ajaxValue" value="#{row.ajaxValue}">
<p:ajax event="blur" process="#this" update="#this form-table-#{index}-targetColumn" listener="#{bean.ajaxMethod(index)}"/>
</p:inputText>
<p:column>
<p:column id="targetColumn"rendered="#{true}">
<p:inputText id="targetValue" value="#{row.targetValue}"/>
</p:column>
</p:dataTable>
</h:form>
I want to update the 'targetValue' inputText with a new value, after the 'ajaxValue' inputText deselection caused a blur event. The ajax call should send the value inside 'ajaxValue' to the backend and set the 'targetValue' in the bean accordingly. After that the 'targetValue' should update with the new value.
My problem is that when I add "form-table-#{index}-targetColumn" to the update attribute of the ajax tag, the 'targetValue' remains empty from the start. It has no value on the frontend. If I add "form-table-0-targetColumn" instead, only the first 'targetValue' won't have a value.
Looking at the getter calls while debugging, their behavior is identical, whether I have the update attribute or not.
Any ideas?
EDIT: To clarify. The separators in the ID are meant to be '-', not ':', as they are usually, I believe.
In a datatable you cannot use the index to update in rows. If you want to update some element that is in the same row, You should just use update="targetColumn".
(There must be a duplicate of this somewhere, but I cannot find it and until I do, I'll leave this answer here
I have a table of users, click on a username and a table of the users data is displayed under the table of users. This works only issue is the h:commandLink submits the form and the entire page reloads, the proper data is shown but the page reloads.
The table of user data is on another page which is included from a ui:include. The page has a rendered condition based on the selected users dataset. Here is the button in question:
h:column>
<f:facet name="header">
<h:outputText value="Username " />
</f:facet>
<h:commandLink value="#{user.username}" immediate="true">
<f:param name="username" value="#{user.username}" />
<f:ajax
render="-welcomePageForm-grootPageSubView-adminUserPageSubview-testSubviewUserPage-entriesTable"></f:ajax>
</h:commandLink>
</h:column>
As you can see I am using the absolute path to the table on the included page, this however does not work and I do not know why.
Quick note, this h:column is obviously in a datatable, all of this is in a f:subview not that it should matter. All surrounding elements have an id, there are no nested forms. And I am out of ideas as to why this does not work.
If you could help I greatly appreciate it!
Nested naming container are referenced using the : prefix to the container ids, so render=" " should read something like:
render=":welcomePageForm:grootPageSubView:adminUserPageSubview:testSubviewUserPage:entriesTable"
my search for a solution did not provide anything helpful. So I'll ask my first question on stackoverflow.com - if I can do better in any way, please let me know.
The problem:
I need to update a column of a <h:dataTable> depending on the value in one of the <h:inputText> from another column in the same dataTable. The column is to be rendered when a valueChange is detected. After the column is rendered I want the focus to stay and not to reset and point to somewhere at the top of the page.
My solution(s) that are only half-working:
1.
<h:column>
<h:inputText value="#{myBean.value}">
<a4j:ajax event="valueChange"
listener="#{myBean.updateColumn}" execute="#this"
render="#form"></a4j:ajax>
</h:inputText>
</h:column>
This results in the expected behaviour as the whole form is rendered. But this way I lose my focus, which is not user-friendly at all.
2.
<h:column>
<h:inputText value="#{myBean.value}">
<a4j:ajax event="valueChange"
listener="#{myBean.updateColumn}" execute="#this"
render="IdOfMyColumn"></a4j:ajax>
</h:inputText>
</h:column>
This was my second attempt. I assigned an ID to my column, that is to the <h:panelGroup> in the column. Looking like this:
<h:column>
<h:panelGroup id="IdOfMyColumn">
<h:outputText value="#{myBean.updatedValue}">
</h:panelGroup>
</h:column>
This sadly results in only the row being updated. The exact row where I change a value. At least, the focus stays where it was.
So as you can see, my two solutions each solve one of my problems. Sadly I cannot figure out, how to combine them. I need a way to keep my focus using solution 1 with render="#form" or a way to update the whole column and not the single row.
Any help is appreciated! I'm using JSF 2.0 with Richfaces 4.3, deploying on IBM Portal Server (and cannot change this). Thanks!
Found a solution by myself! Writing down a problem helps solving it :) Not too nice, but working in the desired way.
Instead of one single dataTable with different columns I use one dataTable per column. This way I can render the dataTables (with the single columns).
If you have suggestions to improve my solution, feel free.
I'm making form with dropdowns, where user have to make first choice, than using ajax next choices appear. It works just fine. But I wanted to add bootstrap formatting for dropodwns, so I installed bootstrap-select. It work also just fine, but when ajax event renders data for next he renders it in a new dropdown, next to still empty bootstrap formated dropdown. Witch, how can you predict, isn't desired action. Here's code from jsf:
<h:selectOneMenu styleClass="bootstrap-select" id="marka" value="#{searchBean.markiID}">
<f:selectItems value="#{searchBean.listaMarek}" var="c" itemLabel="#{c.marka}"
itemValue="#{c.markaID}"/>
<f:ajax event="change" execute="marka" render="model"/>
</h:selectOneMenu>
<h:outputText value="#{msg.carModel}"></h:outputText>
<h:selectOneMenu styleClass="bootstrap-select" id="model" value="#{searchBean.modelID}">
<f:selectItems value="#{searchBean.listaModeli}" var="p" itemLabel="#{p.model}"
itemValue="#{p.modelID}"/>
<f:ajax event="change" execute="model" render="liczbaDrzwi"/>
</h:selectOneMenu>
In backingbean, when user choose smthging from first dropdown, Is generated list of items for second dropdown, and so on. And this is the result of making choice:
As you can see, ajax makes totally new dropdown, instead of filling already existing.
Thanks for any ideas:)
JSF Ajax works in this way... instead of filling the already existing dropdown... the jee server send a new HTML fragment to replace this dropdown code...
Maybe you could read this link to understand JSF lifecycle...jsf lifeclycle
Did you try using primefaces or richfaces instead of h:selectOneMenu component?
Here is a PrimeFaces example where you can see how to update one dropdown when you select a value on another dropdown... pf example
I have dataTable in my page. Initially I want it to be hidden, and show after fetching data by AJAX request. I know how to fetch data and put into table, but I don't know how to show table if it is hidden. Here is the code:
<h:commandButton value="aa">
<f:ajax execute="from to validTo" render="transportOffers"/>
</h:commandButton>
<p:dataTable id="transportOffers" value="${cargoOffer.transportsForCargo}" var="transport">
<p:column>
<h:outputText value="${transport.company}"/>
</p:column>
</p:dataTable>
Table is visible initially, even if it is empty. If I set rendered="false" it is invisible, and remains invisible also after AJAX request.
How can I make it hidden initially, and to show up after populating with data?
You could try having the dataTable to render conditionally based on the size of the list:
rendered = "#{cargoOffer.transportsForCargo.size() != 0}"
I think if rendered=false then the element isn't created, so the AJAX request can't find it.