Problem updating form in ModalPanel
Hello,
I have a page which contains a form for an entity called Product. A product contains many items. Therefore my page contains the attributes of the product as well as a list of these items.
When I click on this item (in the list), it opens the Item in a Modal dialog. I want to then be able to modify these attributes and when I close the dialog, the product to be updated with its modified item.
So far I've been able to build the interface and the Item values do display in the Item ModalPanel but when I modify them and close them, they are not updated in the according bean. Therefore, if I close the dialog and reopen it, the values are the same as before.
I have checked with debug and see that they are not updated in the productFormAction.currentItem bean
Here is my .xhtml (I have simplified it as much as possible):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jstl/core">
<ui:composition template="/view/layout/general.xhtml">
<ui:define name="content">
<h1><h:outputText value="#{messages['org.mdarad.samples.totaltest.product.Product.edit.title']}"/></h1>
<div id="general-messages" class="messages">
<h:messages styleClass="message" infoClass="success" errorClass="error" warnClass="warning"/>
</div>
<a4j:form id="product-edit-form">
<ul id="product-control-panel" class="controlpanel">
<li>
<a4j:commandLink action="#{productFormAction.saveNavigation}" reRender="product-edit-form" styleClass="controlpanel-save" styleId="product-control-panel-save">
<img src="/totaltest/static/img/save.png" id="product-control-panel-save-img" alt="#{messages['org.mdarad.framework.resources.form.save']}" />
</a4j:commandLink>
</li>
</ul>
<rich:tabPanel switchType="ajax">
<rich:tab label="#{messages['org.mdarad.framework.resources.form.tabs.general']}" immediate="true">
<div class="tab" id="product-general-tab">
<table class="attributes">
<tbody class="attributes-tbody">
<tr class="attribute" id="product-name">
<td id="product-name-label-container" class="label-container">
<label class="label required" id="product-name-label">
<h:outputText value="#{messages['org.mdarad.samples.totaltest.product.Product.attributes.name']}"/>
</label>
</td>
<td id="product-name-edition-container" class="edition-container">
<div id="product-name-locale-container" class="locales-container">
<a4j:repeat var="localeContext" value="#{localizationContext.locales}">
<div class="attribute-en" id="product-name[#{localeContext.displayName}]">
<label class="label-locale" id="product-name[#{localeContext.displayName}]-label">#{localeContext.getDisplayName(locale)}</label>
<h:inputText value="#{productEntity.getCastedLocalization(localeContext).name}" id="product-name-value-#{localeContext.displayName}" styleClass="attribute-input" required="true" />
</div>
<rich:message for="product-name-value-#{localeContext.displayName}" styleClass="message" infoClass="success" errorClass="error" warnClass="warning" id="product-name-messages"/>
</a4j:repeat>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</rich:tab>
<rich:tab label="#{messages['org.mdarad.samples.totaltest.product.Product.items.list']}" immediate="true" action="#{productFormAction.fetchItemsSearchResults}">
<a4j:outputPanel ajaxRendered="true">
<div id="items-list">
<h:dataTable id="resultsTable" value="#{productFormAction.itemsSearchResults.results}" var="_entity" styleClass="list">
<h:column>
<f:facet id="selectionFacet" name="header" >
<h:outputText id="selectionText" value="" />
</f:facet>
<h:selectBooleanCheckbox id="selectionCheckbox" value="#{_entity.selected}"/>
</h:column>
<h:column>
<f:facet id="actionsFacet" name="header">
<h:outputText id="actionsText" value="#{messages['org.mdarad.framework.resources.list.actions']}" />
</f:facet>
<a4j:commandLink action="#{productFormAction.editItem(_entity)}" oncomplete="Richfaces.showModalPanel('items-panel-modal',{width:550, top:200});" reRender="product-edit-form">
<img class="controlpanel-new" src="/totaltest/static/img/edit.png"/>
</a4j:commandLink>
</h:column>
<h:column>
<f:facet id="itemNameFacet" name="header">
<h:outputText id="itemNameText" value="#{messages['org.mdarad.samples.totaltest.product.Item.attributes.itemName']}" />
</f:facet>
<h:outputText id="itemName" value="#{_entity.itemName}" />
</h:column>
</h:dataTable>
</div>
</a4j:outputPanel>
<rich:modalPanel id="items-panel-modal" minWidth="700" minHeight="300" autosized="true" style="text-align:left;" rendered="#{productFormAction.currentItem != null}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{messages['org.mdarad.samples.totaltest.product.Item.form.title']}" id="items-panel-header"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<a4j:commandLink action="#{productFormAction.fetchItemsSearchResults}" oncomplete="Richfaces.hideModalPanel('items-panel-modal');" reRender="product-edit-form">
<h:graphicImage url="/static/img/back.png" alt="#{messages['org.mdarad.framework.resources.form.saveClose']}"/>
</a4j:commandLink>
</h:panelGroup>
</f:facet>
<rich:tabPanel switchType="ajax">
<rich:tab label="#{messages['org.mdarad.framework.resources.form.tabs.general']}" immediate="true" >
<table class="attributes">
<tbody class="attributes-tbody">
<tr class="attribute" id="items-itemName">
<td id="items-itemName-label-container" class="label-container">
<label class="label" id="items-itemName-label">
<h:outputText value="#{messages['org.mdarad.samples.totaltest.product.Item.attributes.itemName']}"/>
</label>
</td>
<td id="items-itemName-edition-container" class="edition-container">
<div id="items-itemName-locale-container" class="locales-container">
<a4j:repeat var="localeContext" value="#{localizationContext.locales}">
<div class="attribute-en" id="items-itemName[#{localeContext.displayName}]">
<label class="label-locale required" id="items-itemName[#{localeContext.displayName}]-label">#{localeContext.getDisplayName(locale)}</label>
<h:inputText value="#{productFormAction.currentItem.getCastedLocalization(localeContext).itemName}" id="items-itemName-value-#{localeContext.displayName}" styleClass="attribute-input" required="true" />
</div>
<rich:message for="items-itemName-value-#{localeContext.displayName}" styleClass="message" infoClass="success" errorClass="error" warnClass="warning" id="items-itemName-messages"/>
</a4j:repeat>
</div>
</td>
</tr>
</tbody>
</table>
</rich:tab>
</rich:tabPanel>
</rich:modalPanel>
</rich:tab>
</rich:tabPanel>
</a4j:form>
</ui:define>
</ui:composition>
</html>Here is my productFormAction component:
@Name("productFormAction")
@Scope(ScopeType.PAGE)
@Transactional
public class ProductFormActionImpl<T extends Product> extends ApplicationWebFormActionImpl<T> implements ProductFormAction<T> {
...
@Override
protected GenericFacade<T> getFacade() {
return facadeLocator.getProductFacade();
}
@Out(value="productEntity", scope=ScopeType.PAGE)
private T entity;
public T getEntity() {
return entity;
}
public void setEntity(T entity) {
this.entity = entity;
}
/*
* ******************************************************
* Items
* ******************************************************
*/
private SearchResults<Item> itemsSearchResults;
public SearchResults<Item> getItemsSearchResults() {
return itemsSearchResults;
}
public void setItemsSearchResults(SearchResults<Item> itemsSearchResults) {
this.itemsSearchResults = itemsSearchResults;
}
public void fetchItemsSearchResults() {
try {
Integer limit = SearchParameters.PAGE_DEFAULT_LIMIT;
Integer pageOffset = 0;
if(getItemsSearchResults() != null) {
limit = getItemsSearchResults().getPageSize();
pageOffset = getItemsSearchResults().getPageOffset();
}
SearchResults searchResults = new SearchResults();
searchResults.setPageSize(limit);
searchResults.setPageOffset(pageOffset);
searchResults.setResults(new ArrayList<Item>());
//Add results to list
if(getEntity().getItems() != null) {
int lastPositionToFetch = (searchResults.getPageOffset() + searchResults.getPageSize());
if(getEntity().getItems().size() < lastPositionToFetch) {
lastPositionToFetch = getEntity().getItems().size();
}
for(int i = searchResults.getPageOffset(); i < lastPositionToFetch; i++) {
Item itemToAdd = getEntity().getItems().get(i);
LocalizationUtils.localize(itemToAdd, getLocalizationContext());
searchResults.getResults().add(itemToAdd);
}
}
searchResults.setSearchCount(getEntity().getItems().size());
setItemsSearchResults(searchResults);
//Reset current item
currentItem = null;
} catch (Exception e) {
getFacesMessages().add(Severity.ERROR, getMessage("global.system.exception"));
getLogger().error(e);
}
}
public void selectAllItems() {
for(Item item: itemsSearchResults.getResults()) {
item.setSelected(true);
}
}
public void unselectAllItems() {
for(Item item: itemsSearchResults.getResults()) {
item.setSelected(false);
}
}
public void removeSelectedItems() {
for(Item item: itemsSearchResults.getResults()) {
if(item.isSelected()) {
getEntity().getItems().remove(item);
}
}
fetchItemsSearchResults();
}
private Item currentItem;
public Item getCurrentItem() {
return currentItem;
}
public void setCurrentItem(Item currentItem) {
this.currentItem = currentItem;
}
public void editItem(Item item) {
this.currentItem = item;
}
public void removeItem(Item item) {
getEntity().getItems().remove(item);
fetchItemsSearchResults();
}
public void createItem() {
currentItem = new Item();
if(currentItem instanceof Localizable) {
LocalizationUtils.localize(currentItem, getLocalizationContext());
}
getEntity().addItems(currentItem);
}
...
}
Does anybody know why I am unable to update the values of the item modalPanel ?
Thank you,
