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.
Related
I'm using PrimeFaces and I have a line:
<p:ajax update="toUpdate">
the problem is, that this ID not always exists on the page.
( the page is dynamic and sometimes it contains a part that have this specific ID and sometimes not)
When it exists, it works great, but when the ID doesn't exist, the component crash - (probably it's some validation issue)
How can I fix it?
Is it a well known issue?
Thanks!
You need to provide an always rendered component to update, for example:
<p:ajax update="toUpdate">
<h:panelGroup id="toUpdate">
<p:dataTable id="tableID" rendered="#{bean.someCondition>"...
</h:panelGroup>
So, if you have a component that can be o or not visible, do not use it for update, because can be out of components tree. Instead, use a component (container) that your are sure that be rendered and present in the components tree.
Try this code
<f:ajax render="toUpdate">
<h:outputText id="toUpdate">
<!-- do something -->
</h:outputText>
I'm asking how I can achieve updating a specific element of a loop?
e.g.
<h:form>
<ui:repeat var="element" value="#{bean.elements}" varStatus="status">
<h:outputtext value="#{element.text}" id="#{element.id}" />
<p:commandLink update="#{element.id}" >
<h:outputtext value="UpdateTextField #{element.id}" />
</p:commandLink>
</ui:repeat>
</h:form>
I know that status.index doen't work since its view-rendered. Also the "dynamic" index-setting also doen't work since its view-rendered... But how can i achieve that when the button is clicked, it updates (ajax) the outputtext? Is this only possible with c:forEach?
its ViewScoped and the form must be outside of the loop. otherwise i would solve it with update="#form", but here its not possible
thanks for any help!
Since both ui:repeat and c:forEach generate different dynamic Component Ids for the elements you can't Guarantee the update an individual Item out of all generated items from outside.
I think best approach for this kind of problem would be placing a h:panelGroup around ui:repeat or c:forEach itself and update the h:panelGroupitself.
We are using Richfaces 4.1.0, and I am trying to use an extendedDataTable. I started (for simplicity's sake) with dataTable. The code below works fine, and shows my data in a table, as expected.
<rich:dataTable value="#{recipientBean.recipientList}" var="recipient" selectionMode="none" id="recipientTable">
<rich:column sortable="false" id="col_1" label="Name">
<f:facet name="header">
<h:outputText value="Name" id="name" />
</f:facet>
<h:outputText value="#{recipient.name}" id="rec_name" />
</rich:column>
<!-- More columns below, removed for post brevity -->
</rich:dataTable>
We are expecting a large number of records, so we would like the table to be scrollable. I thought that I could just change the dataTable to extendedDataTable, however, when I do that, no data shows up at all.
I just started to inspect the element in Chrome, and all of a sudden the data showed up. So when I inspect the element, I see the values in the html, but they don't display when the page loads.
Could this be a style issue? An attribute that is missing (something that is needed for extendedDataTable, but not needed for dataTable)?
What else am I missing?
EDIT: I do have this extendedDataTable inside a rich:tabPanel. When I remove the rich:tabPanel it displays correctly (but I really need the tabPanel). Is this a known issue?
EDIT2: It does display correctly if it is on the first tab of the rich:tabPanel.
I found a bug report on the joss site. The work around was to use the switch type of Ajax instead of client for the tab panel.
If it still doesn't work after switching to ajax switchType you may try to use redirect instead of forward, when you navigate to the page with rich:extendedDataTable. To achieve this you may e.g. add ?redirect-faces=true to the page URL.
I'm experiencing some problems when using the "rendered" attribute with ajax behavior. I'll paste the code so I think it will be a lot more clear:
<h:selectOneMenu value="#{registrarVentaController.esCobroChequeString}">
<f:selectItem itemLabel="Efectivo" itemValue="false"/>
<f:selectItem itemLabel="Cheque" itemValue="true"/>
<f:ajax execute="#this" render="#form"/>
</h:selectOneMenu>
<h:panelGroup id="panelMonto">
<span>Monto:</span>
<h:inputText value="#{registrarVentaController.monto}" rendered="#{registrarVentaController.banCobroCheque}"/>
<h:inputText value="#{registrarVentaController.monto}" rendered="#{not registrarVentaController.banCobroCheque}"/>
</h:panelGroup>
My "#{registrarVentaController}" is just a View Scoped JSF Managed Bean with appropiate setters/getters.
This way it works, I mean, when user selects option "Efectivo", panelGroup "panelMonto" will get updated and we'll see the first inputText, and conversely when user selects option "Cheque" user will see the second inputText.
For this approach I used "f:ajax" component where I updated the whole #form to get this behavior work and I just want to update panelGroup "panelMonto" (using render="panelMonto" It doesn't work at all (I even try with full scope resolution :formName:panelMonto with no result).
I just want to have rendered work with ajax="idComponent" or similar behavior to show certain parts according what user have selected.
Best Regards!
Note (One solution)
I managed to get a solution (taking as an input
JSF rendered is not working
and a bit of myself). I've just moved to a new form the part that I'm
interested in filtering according what user selected. This way I still
use #form ajax's render and it will just render this new form (not the
whole form as I was using!) Neverthless I'm still wondering if there
is a solution to not used #form and just the component/s ID.
what if you check with
render=":panelMonto"
not
render=":formName:panelMonto"
still not working?
this should work only with
render="panelMonto" //because is in the same form
Can you add more code?
Also can you check with your browser (in chrome: right click, inspect element, network) to see if there is any activity?? perhaps is rendering the same thing because of you...
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>.