After I've done some investigation on such issue online, I am still not able to find a proper solution.
The tech stack I have to use here is JSF 1.x, JBoss Seam 2.2.x and richfaces 3.3.x. So the scenario is:
UI
The page contains two main parts, the upper one is providing some criteria for users to search results, and the lower one is to display the results.
Here I am using richfaces.dataTable to populate the results. We also provide the link to load the details of a result item (h:commandLink). The dataTable of course is initially not shown up using rendered attribute of h:panelGroup.
It looks like:
<h:panelGroup rendered="#{results.size gt 0 and not showDetail}">
<rich:dataTable
id="results-table"
value="#{results}"
var="row"
rows="#{rowPerPage}"
styleClass="table"
rendered="#{not empty requests}">
......
<rich:column>
<f:facet name="header">
Action
</f:facet>
<h:commandLink value="DETAILS"
action="#{viewBean.showDetailContext(row)}"
styleClass="link">
</h:commandLink>
</rich:column>
......
</rich:dataTable>
</h:panelGroup>
ViewBean
Code:
#Scope(ScopeType.CONVERSATION)
#Name("result.view")
public class ResultView {
public void showDetailContext(T detailContext) throws Exception {
_detailContext = detailContext;
initListDetails();
setShowDetail(true);
}
protected void initListDetails() throws Exception {
//......
}
}
After doing some search, the UI will be like:
View with Results
So at this moment, users can click the "Details" link and navigate to the detail view like:
Details View
The problem now is when we click the browser back button, we go back to the previous "View with Results" and if users click the Details link of a different item, the Details View will still display the previous detail information as highlighted in the screenshot.
Any advice is highly appreciated.
Related
I have a <p:datable> to display some products items. One of the item is a <p:graphicImage>. I would like to make this image clickable and display image in bigger in a popup when the image is clicked. Note that the images are stored in a database.
I've tried something like that:
<h:commandLink id="imageBtn"
action="#{imageBean.showImg(_product.id)}">
<p:graphicImage id="product_thumbnail" styleClass="thumbnail"
cache="false"
value="#{imageBean.streamedImageById}">
<f:param name="productId" value="#{_product.id}" />
</p:graphicImage>
</h:commandLink>
...
<p:dialog id="imgDialog" header="Image in Bigger" widgetVar="imgDialog">
<p:graphicImage styleClass="thumbnail_large" cache="false"
value="#{imageBean.getImageById()}">
</p:graphicImage>
</p:dialog>
in my ImageBean:
public void showImg(Long id) {
this.currentProductId = id;
PrimeFaces.current().executeScript("PrimeFaces.widgets['imgDialog'].show();");
}
public StreamedContent getImageById() throws Exception {
if (currentProductId != null) {
..
}
}
The image is clickable and popup correctly displayed, but for some reasons the full data table is refreshed (including all the images) after clicking, which is not user-friendly. Do you have any idea about my problem?
If you are not using Ajax, your entire page will be rerendered if you click a command link. You might want to replace your h:commandLink with a p:commandLink which gives you Ajax out of the box. Then, you want to rerender the dialog when that button is clicked (in order to contain the correct image) and simply show the dialog from the client side using the oncomplete attribute:
<p:commandLink action="#{imageBean.setCurrentProductId(_product.id)}"
update="imgDialog"
oncomplete="PF('imgDialog').show()">
...
</p:commandLink>
Please note that it's important that you choose the right bean scope. Ajax will not work with #RequestScoped beans. You probably want to use #ViewScoped.
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'm using JSF 2.0, Primefaces 3.4.2, Spring 3.1.2.
I'm facing a similar problem of the guy of this link: h:commandButton works from the second click.
Like him I'm not using ajax in the <p:commandButton> but I'm using a <p:fileDownload /> inside the button tag.
I have two views: "list.xhtml" and "downloadView.xhtml". In myBean.java I send a DataModel from view "list.xhtml" to view "downloadView.xhtml" as a request attribute as shown in the code below:
FacesUtil.getServletContext().setAttribute("myDataModelFromRequest", this.myDataModel);
The bean is anotted with #Scope("view")
In view "downloadView.xhtml" I populated succesfully a dataTable with the DataModel sent from request. But the problem happens when I click in the button to download the file. It only works on second try.
I already tried to change the return of my method from null to "downloadView" but the problem was not solved.
In debug mode I noticed that only enter in the "downloadMethod()" on second click.
Anyone have an idea to solve it?
myBean.java
public String viewListMethod() {
//some work here...
FacesUtil.getServletContext().setAttribute("myDataModelFromRequest", this.myDataModel);
return "downloadView";
}
downloadView.xhtml
<h:form id="formId" prependId="false">
<p:dataTable
id="dataTableId" var="myVar" value="#{myDataModelFromRequest}"
selection="#{cargaProcessoControlador.myArray}"
paginator="true" rows="10" paginatorPosition="bottom" paginatorAlwaysVisible="false">
<f:facet name="header">
bla bla bla
</f:facet>
<p:column selectionMode="multiple" style="width:18px" />
//collumns here...
</p:dataTable>
<p:commandButton id="btDownload" ajax="false" value="Download" icon="ui-icon-document" >
<p:fileDownload value="#{myBean.downloadMethod()}" />
</p:commandButton>
</h:form>
The scope "view" on spring doesn´t exist... So you created your own, right? Just to check...
I had that kind of problem once, and I think it was something to do with validation... the
immediate=true attribute solved my problem.
This is something to do with the scope of the page. Your problem is due to partial rendering of page. Initially when you load the page it is not getting loaded fully and because of that the button is not part of that particular view when you try to click on the button for the first time. Try to make you view proper or explicitly render the page from the backing bean before displaying the page
Using a DataModel<MyObject>, I fill a data table according to this response
Now at the end of each line I have a delete button which calls a certain method of my bean. The data gets cleanly deleted. But as the data has been changed after the deletion, I'd like to reload the page in order to reflect the changes.
My attempt was to add a navigation rule in faces-config.xml:
overview
/overview.jsp
deletedsubscription
/overview.jsp
If I have <redirect /> or not, either way it's not reloading or doing anything else at all. The data is deleted, therefore the bean's method is actually called.
My button looks like this:
<h:dataTable border="1" value="#{overviewBean.overviewModel }" var="item" first="0">
<h:column id="column13">
<f:facet name="header">
<h:outputText value="#{messages.overviewDeleteItem }"></h:outputText>
</f:facet>
<h:commandButton action="#{overviewBean.deleteItem}" value="X"/>
</h:column>
</h:dataTable>
Setting the attribute type="submit" actually solves the problem. The pages gets reloaded.
My question now: is the submit really required? Doesn't JSF (Apache MyFaces) have some mechanism of using AJAX to eliminate the line just deleted?
Thanks for trying to help a JSF-newbie.
Just remove the item from the backing list of the datamodel. The changes will be reflected in the model.
Basically:
private List<MyObject> overviewList;
private DataModel overviewModel;
public OverviewBean() {
overviewList = overviewDAO.list();
overviewModel = new ListDataModel(overviewList);
}
public void deleteItem() {
MyObject myObject = (MyObject) overviewModel.getRowData();
overviewDAO.delete(myObject);
overviewList.remove(myObject); // See?
}
A redirect thereafter is not necessary. If the action method returns void (or null), it will go to the same page anyway.
Ajaxical capabilities have been introduced in JSF 2.0, but if I am not wrong, you're still on JSF 1.x. Your best bet is then adopting a 3rd party component library like Ajax4jsf (currently part of RichFaces), for the case that you consider this necessary.
I've got unexpected problems with richfaces (3.3.2) modal panel. When i try to open it, browser opens two panels instead of one: one is in the center, another is in the upper left corner. Besides, no fading happens. Also i have three modes: view, edit, new - and when i open my panel it should show either "Create new..." or "Edit..." in the header and actually it shows but not in the header as the latter isn't rendered at all though it should, because i set proper mode in action before opening this modal panel. Besides it works fine on all other pages i've made and there are tens of such pages in my application. I can't understand what's wrong here. The only way to fix it is to remove <a4j:keepAlive/> from the page that is very strange, imho.
I'm not sure if code will be usefull here as it works fine everywhere in my application but this only case. So if you put it on your page it will probably work without problems. My only question is: are there any hidden or rare problems in interaction of these two elements (<rich:modalPanel> and <a4j:keepAlive>)? Or shall i spent another two or three days searching for some wrong comma, parenthesis or whatever in my code? :)
For most curious. Panel itself:
<!-- there's no outer form -->
<rich:modalPanel id="panel" autosized="true" minWidth="300" minHeight="200">
<f:facet name="header">
<h:panelGroup id="panelHeader">
<h:outputText value="#{msg.new_smth}" rendered="#{MbSmth.newMode}"/>
<h:outputText value="#{msg.edit_smth}" rendered="#{MbSmth.editMode}"/>
</h:panelGroup>
</f:facet>
<h:panelGroup id="panelDiv">
<h:form >
<!-- fields and buttons -->
</h:form>
</h:panelGroup>
</rich:modalPanel>
One of the buttons that open panel:
<a4j:commandButton id="addBtn"
reRender="panelHeader, panelDiv"
value="#{form.add}"
oncomplete="#{rich:component('panel')}.show()"
action="#{MbSmth.add}"
image="create.gif"/>
Action invoked on button click:
public void add() {
curMode = NEW_MODE; // initial mode is VIEW_MODE
newSmth = new Smth();
}
Mode check:
public boolean isNewMode() {
return curMode == NEW_MODE;
}
public boolean isEditMode() {
return curMode == EDIT_MODE;
}
remember that the modalPanel is always there, but it's hidden. i think the keepAlive is showing this at all times.
Add domElementAttachment="parent" parameter to rich:modalPanel, and the editor will work fine.