I am experiencing a problem with the use of primefaces selectOneMenu. I am having a menu getting its selectItems values from a backing bean. The container of the menu is updated by ajax. Useing primefaces menu, all the items are lost after the update, using standard JSF Menu, all the items look fine.
XHTML:
<p:outputPanel id="myContainer" widgetVar="myContainerVar">
<p:outputPanel rendered="#{somePresenter.renderBox}">
<h:selectOneMenu id="mySelectMenu"
converter="omnifaces.SelectItemsConverter"
value="#{somePresenter.someObject}">
<f:selectItems value="#{somePresenter.someObjectList}"
var="item" itemValue="#{item}" itemLabel="#{item}" />
</h:selectOneMenu>
<p:selectOneMenu id="mySelectMenuP"
converter="omnifaces.SelectItemsConverter"
value="#{somePresenter.someObject}">
<f:selectItems value="#{somePresenter.someObjectList}"
var="item" itemValue="#{item}" itemLabel="#{item}" />
</p:selectOneMenu>
</p:outputPanel>
</p:outputPanel>
<p:commandLink action="#{somePresenter.doIt()}" update="myContainer"
value="doIt!" />
Bean:
#Getter
#Setter
private SomeObject someObject;
#Getter
#Setter
private Boolean renderBox = true;
public List<SomeObject> getObjectList(){
return objectBoundary.getList();
}
public void doIt(){ this.renderBox = !this.renderBox; }
When the page is first displayed, both menus are filled with Items. However, as soon as I close and open the container (press command link twice), the h:selectOneMenu still looks fine while the p:selectOneMenu has lost all its Items.
I have taken a closer look using googles developer tools, both menus have the items as options. The p-menu just seems not to be correctly rendered.
I am experiencing exactly the same Problem when using Enums instead of the shown Objects. The presenter is #Named and #ViewScoped.
I would really appreciate any help since I am stucked with this for quite some time now. Thank you in advance!
--- edit ---
I am using Primefaces version 4.0 and JSF version 2.2
--- edit ---
Upgrading to PF 5.3 makes the menu look slightly different:
Slightly different menu after upgrade to PF 5.3
Related
I have searched in google and Stack Overflow, and have come to this to try and get it to work however it still doesn't work.
Xhtml:
<p:panel id="testRefresh" header="Basic">
<h:outputText value="#{sBean.headTest}" />
</p:panel>
<p:selectOneMenu valueChangeListener="#{sBean.handleChange}">
<f:selectItem itemLabel="" itemValue="#{null}" />
<f:selectItem itemLabel="Cream Latte" itemValue="Cream Latte" />
<f:selectItem itemLabel="Extreme Mocha" itemValue="Extreme Mocha" />
<f:selectItem itemLabel="Buena Vista" itemValue="Buena Vista" />
<p:ajax event="change" update=":testRefresh" process="#this" />
</p:selectOneMenu>
sBean.java
private String headTest;
//Getter and Setter for headTest and initialized in #PostSconstruct method
public void handleChange(ValueChangeEvent event) throws InterruptedException {
headTest = (String) event.getNewValue();
}
Also do you know any editor online to test JSF with xhtml and respective bean? Would be easier to test.
Thanks for help.
In your *.xhtml I added <h:form></h:form> and slightly changed your update statement:
<h:form>
<p:panel id="testRefresh" header="Basic">
<h:outputText value="#{sBean.headTest}"/>
</p:panel>
<p:selectOneMenu valueChangeListener="#{sBean.handleChange}">
<f:selectItem itemLabel="" itemValue="#{null}"/>
<f:selectItem itemLabel="Cream Latte" itemValue="Cream Latte"/>
<f:selectItem itemLabel="Extreme Mocha" itemValue="Extreme Mocha"/>
<f:selectItem itemLabel="Buena Vista" itemValue="Buena Vista"/>
<p:ajax event="change" update="testRefresh"/>
</p:selectOneMenu>
</h:form>
Also do you know any editor online to test JSF with xhtml and respective bean? Would be easier to test.
As far as I know there is no online tool, but you could create a "skeleton" Spring project and test there. A good start to that is the Spring Initializr.
The issue was the throws InterruptedException in the Bean method, messes xhtml access to it.
EDIT: 2017-04-28 The exact same problem (different circumstances/application) is described here: Process f:viewParam only on page load
Primefaces 6.1.RC2
JSF Mojarra 2.3.0
I already have a Java backing-bean based workaround (explained below) for the problem the following behaviour of p:dataTable causes, but I am not very happy with that workaround, and I would like to understand the behavior of p:dataTable row editing better and if possible I would like to find a purely XHTML-level solution to my problem. (BTW I am otherwise very experienced with p:dataTable, which I have used for some very complex applications for some years.)
It is not about an error or bug in p:dataTable, but the way it behaves during row editing causes me a problem in one situation.
The following code examples are completely simplified and adapted for this forum.
I have an entity Element, which has a relationship List<Link> getLinks(), where Link is also an entity.
Element has an editor edit.xhtml.
The aim is to have an composite component links_editor.xhtml that can be embedded in the edit.xhtml.
There is a CDI-compliant #ViewScoped #Named backing bean Manager.
The edit.xhtml relies on an f:viewParam to load an Element for editing:
<f:view>
<f:metadata>
<f:viewParam name="id" value="#{manager.id}"/>
</f:metadata>
</f:view>
Where in the backing bean Manager:
public void setId(Long id) {
if (id != null) {
//load an Element from database for editing by id
And in the links_editor.xhtml:
<cc:implementation>
<div id="#{cc.clientId}">
<p:growl id="testgrowl"/>
<p:dataTable
id="links_table"
editable="true"
var="link"
value="#{cc.attrs.element.links}"
>
<p:ajax
event="rowEdit"
listener="#{cc.attrs.manager.onLinkRowEdit}"
update="#{cc.clientId}:testgrowl"
/>
<p:column headerText="Link title">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{link.name}" />
</f:facet>
<f:facet name="input">
<p:inputText id="name" value="#{link.name}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Link URL">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{link.urlAsString}" />
</f:facet>
<f:facet name="input">
<p:inputText id="url" value="#{link.urlAsString}"/>
<p:message
for="url"
display="icon"
/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:rowEditor />
</p:column>
</p:dataTable>
The row edit listener:
public void onLinkRowEdit(RowEditEvent event) {
Link link = (Link) event.getObject();
try {
checkLink(link); //throws if URL string malformed
JsfUtil.addInfoMessage("DEBUG: Link: "+link);
} catch (LocalUpdateException ex) {
JsfUtil.addErrorMessage(ex.getMessage());
}
}
(where JsfUtil obviously just leverages FacesContext.getCurrentInstance().addMessage(...))
The issue/concern:
If I edit a Link row in the p:dataTable a first time and then use the "tick save" the onLinkRowEdit listener is invoked, but the diagnostics show that the value appear not to have changed. The reason is that this f:viewParam is invoked:
<f:viewParam name="id" value="#{manager.id}"/>
This (via routes not shown in detail) loads the Element entity again from database via setId(Long id), so that in the composite component edit_links.xthml this essentially resets #{cc.attrs.element.links}, so any changes are discarded.
The interesting thing is that if (without reloading the entire #ViewScoped page) one edits the same p:dataTable row a second time that f:viewParam is NOT invoked, and thereafter it works as desired.
A workaround (rather hacky) is to "block" any attempt to reload the Element by id within the view scope backing bean Manager:
public void setId(Long id) {
//HACK/WORKAROUND: prevent reload of Element by id
if (Objects.equals(id, this.id)) {
return;
}
if (id != null) {
//load an Element from database for editing by id
To be clear, I am aware of the usual strategies for using #PostConstruct and/or lazy database fetching in getters of frequently accessed info under JSF in backing beans. And I don't want to abandon here the f:viewParam approach entirely (and it works well for other situations the same Manager bean is also used for).
My interest is specifically about Primefaces p:dataTable:
Q1: Why does p:dataTable need to call the f:viewParam during the 1st row edit then "tick save", when the row information (in this cases element.links) is clearly already available ?
Q2: Why does p:dataTable NOT need to call the f:viewParam during the 2nd row edit then "tick save" ?
Q3: Is there a JSF XHTML-based way of preventing p:dataTable from calling the f:viewParam at all during a rowEdit then "tick save" (including the 1st go) ?
UPDATE: 2017-04-21: There is now a mini test web app for NetBeans 8.2 demonstrating the problem at:
https://github.com/webelcomau/Webel_PrimeFaces_test_p50445_dataTable_fviewParam
Please just download the master ZIP-archive, unzip it, and open it in NetBeans IDE 8.2. You don't need to Git-clone the project. Make sure you have Glassfish-4.1.1 set as the server for the project.
Both the README there and the web app test page itself give precise steps for reproducing the problem (or the behavior that concerns me).
I have invested some effort in analysing this because I use p:dataTable "embedded" in edit forms together with f:viewParam a lot, and I want to understand this matter better, even if it is not an actual problem with p:dataTable.
I will try to explain myself:
I'm working on a JSF project using java, JSF 2.0 and RichFaces 4.2.1.
When I access my jsf it just loads a search filter and a commandLink. The commandLink will launch a method in my backingBean to load data that it will be displayed in a dataTable.
<h:commandLink id="btnRecords">
<f:ajax render="myCompAjax" event="click" listener="#{myBean.loadRecords}" />
<h:graphicImage value="img/ico_new.gif" alt="#{bundle['button.search']}" />
</h:commandLink>
The datatable is not visible at first, but once you click on the commandLink a flag in the backingBean will change and the table displays with data I just loaded.
<a4j:outputPanel ajaxRendered="true" id="myCompAjax">
<h:dataTable id="recordsTable" value="#{myBean.records}"
var="item" rendered="#{myBean.flagShowTable}">
<h:column headerClass="thPijama" >
<f:facet name="header">
<table><tr class="thPijama"><td></td></tr></table>
</f:facet>
<h:commandLink action="#{myBean.goNextPage}">
<h:outputText value="Go Next Page" />
<h:inputHidden value="#{item}" />
</h:commandLink>
</h:column>
</h:dataTable>
</a4j:outputPanel>
Problem is the commandLink action inside of the dataTable isn't working at all. I just want to navigate to another jsf. In fact, what it does is hiding the dataTable and leaving the filter unchanged. The action method remains unreachable.
Of course, it works if I set the same commandLink outside the dataTable.
I cannot use Session Scope Beans because the people I work for don't approve it.
Can anyone help me?
Thanks for the hint.
I cannot use Session Scope Beans because the people I work for don't approve it.
Are you implying that placing the bean in the session scope instead of the request scope actually solved the problem? If so, then just put the bean in the view scope.
#ManagedBean
#ViewScoped
public class MyBean implements Serializable {
// ...
}
This way the bean will live as long as you're interacting with the same view by ajax requests. The bean is not been shared in other browser tabs/windows in the same session (which is among the architects indeed the major reason to forbid its use in case of simple views).
See also:
How to choose the right bean scope?
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 4 applies to you
I have a design which consists of images for links.
They must work like a select component, for example when i click one link, in the back side i control which one is selected.
After user want to commit his/her changes he/she click a submit button and save the selections.
So i need a h:blahblah component for get selection that does not reload page when user click it, and maybe click again to unselect maybe click again to select again.
I need h: component because i can change only their css easily.
I also will be glad if you share your advises on how can i achive this job too.
Thanks
SOLVED by my colleague
<h:outputLink value="javascript:void(0);"><p:ajax event="click"
listener="#{beanView.method()}"/>My Link</h:outputLink>
You could use <f:ajax> in combination with a #ViewScoped managed bean for this. Let the listener of <f:ajax> set the selected image value. You can just nest <f:ajax> inside <h:graphicImage>.
<h:form>
<h:graphicImage name="image1.png">
<f:ajax event="click" listener="#{bean.setSelectedImage('image1')}" />
</h:graphicImage>
<h:graphicImage name="image2.png">
<f:ajax event="click" listener="#{bean.setSelectedImage('image2')}" />
</h:graphicImage>
<h:graphicImage name="image3.png">
<f:ajax event="click" listener="#{bean.setSelectedImage('image3')}" />
</h:graphicImage>
<h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>
with
#ManagedBean
#ViewScoped
public class Bean {
private String selectedImage;
public void submit() {
System.out.println(selectedImage);
}
// ...
}
I am trying to listen to select event from autocomplete using attribute selectListener.
I am passing a remoteCommand as select listener. But the selectListener never calls this remoteCommand method.
My code follows:
<h:form>
<p:autoComplete autocomplete="true" completeMethod="#{search.fetchSuggestions}" value="#{search.selectedSuggestion}" selectListener="moveToSelectedPage()"/>
<p:remoteCommand name="moveToSelectedPage" action="firstPage.xhtml?faces-redirect=true" />
</h:form>
All I am trying to do is, navigating to a different page after the user selects a particular suggested item among suggestions made by autocomplete.
Looking at PrimeFaces version 3.5, it appears that the selectListener attribute is no longer available for the AutoComplete component. The link in BalusC's answer leads to the correct place, where it shows the new approach to be to include a <p:ajax> tag inside the <p:autocomplete>:
<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" completeMethod="#{autoCompleteBean.complete}">
<p:ajax event="itemSelect" listener="#{autoCompleteBean.handleSelect}" update="messages" />
</p:autoComplete>
The selectListener attribute should refer to a managed bean method taking SelectEvent and returning void, not to some arbitrary JavaScript function.
See also the PrimeFaces <p:autoComplete> showcase page.
<p:autoComplete selectListener="#{autoCompleteBean.handleSelect}" ... />
with
public void handleSelect(SelectEvent event) {
// ...
}