popupPanel not show in rich:dataTable - google-app-engine

Question

Base on the sample from:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=dataTable&sample=dataTableEdit&skin=blueSky
I did a bit modify on the xhtml page and CarBean to include a button to display the result. Result display as expected but the popup panel not working (ie. no popup).
Software version I use:
richface 4.3.0 Final
GAE 1.7.2
Note: It work fine on my local notebook and problem mention above apply when deploy online.
Here the online url
http://cloudenterpriseapps.appspot.com/public/test/testPopup5.jsf
Any help?
[CarsBean.java]
package test.faces.bean;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.Iterator;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;
import org.richfaces.demo.common.data.RandomHelper;
import org.richfaces.demo.tables.model.cars.InventoryItem;
import org.richfaces.demo.tables.model.cars.InventoryVendorItem;
import org.richfaces.demo.tables.model.cars.InventoryVendorList;
#ManagedBean(name = "carsBean2")
#SessionScoped
public class CarsBean2 implements Serializable {
/**
*
*/
private static final long serialVersionUID = -3832235132261771583L;
private static final int DECIMALS = 1;
private static final int CLIENT_ROWS_IN_AJAX_MODE = 15;
private static final int ROUNDING_MODE = BigDecimal.ROUND_HALF_UP;
private List<InventoryItem> allInventoryItems = null;
private List<InventoryVendorList> inventoryVendorLists = null;
private int currentCarIndex;
private InventoryItem editedCar;
private int page = 1;
private int clientRows;
public void switchAjaxLoading(ValueChangeEvent event) {
this.clientRows = (Boolean) event.getNewValue() ? CLIENT_ROWS_IN_AJAX_MODE : 0;
}
public void remove() {
allInventoryItems.remove(allInventoryItems.get(currentCarIndex));
}
public void store() {
allInventoryItems.set(currentCarIndex, editedCar);
}
public List<SelectItem> getVendorOptions() {
List<SelectItem> result = new ArrayList<SelectItem>();
result.add(new SelectItem("", ""));
for (InventoryVendorList vendorList : getInventoryVendorLists()) {
result.add(new SelectItem(vendorList.getVendor()));
}
return result;
}
public List<String> getAllVendors() {
List<String> result = new ArrayList<String>();
for (InventoryVendorList vendorList : getInventoryVendorLists()) {
result.add(vendorList.getVendor());
}
return result;
}
public List<InventoryVendorList> getInventoryVendorLists() {
synchronized (this) {
if (inventoryVendorLists == null) {
inventoryVendorLists = new ArrayList<InventoryVendorList>();
List<InventoryItem> inventoryItems = getAllInventoryItems();
Collections.sort(inventoryItems, new Comparator<InventoryItem>() {
public int compare(InventoryItem o1, InventoryItem o2) {
return o1.getVendor().compareTo(o2.getVendor());
}
});
Iterator<InventoryItem> iterator = inventoryItems.iterator();
InventoryVendorList vendorList = new InventoryVendorList();
vendorList.setVendor(inventoryItems.get(0).getVendor());
while (iterator.hasNext()) {
InventoryItem item = iterator.next();
InventoryVendorItem newItem = new InventoryVendorItem();
itemToVendorItem(item, newItem);
if (!item.getVendor().equals(vendorList.getVendor())) {
inventoryVendorLists.add(vendorList);
vendorList = new InventoryVendorList();
vendorList.setVendor(item.getVendor());
}
vendorList.getVendorItems().add(newItem);
}
inventoryVendorLists.add(vendorList);
}
}
return inventoryVendorLists;
}
private void itemToVendorItem(InventoryItem item, InventoryVendorItem newItem) {
newItem.setActivity(item.getActivity());
newItem.setChangePrice(item.getChangePrice());
newItem.setChangeSearches(item.getChangeSearches());
newItem.setDaysLive(item.getDaysLive());
newItem.setExposure(item.getExposure());
newItem.setInquiries(item.getInquiries());
newItem.setMileage(item.getMileage());
newItem.setMileageMarket(item.getMileageMarket());
newItem.setModel(item.getModel());
newItem.setPrice(item.getPrice());
newItem.setPriceMarket(item.getPriceMarket());
newItem.setPrinted(item.getPrinted());
newItem.setStock(item.getStock());
newItem.setVin(item.getVin());
}
public String queryRec(){
String result = "";
synchronized (this) {
getAllInventoryItems();
}
return result;
}
public String initQuery(){
String result = "";
synchronized (this) {
allInventoryItems = null;
}
return result;
}
public List<InventoryItem> getInventoryItems() {
return allInventoryItems;
}
public List<InventoryItem> getAllInventoryItems() {
synchronized (this) {
if (allInventoryItems == null) {
allInventoryItems = new ArrayList<InventoryItem>();
for (int k = 0; k <= 5; k++) {
try {
switch (k) {
case 0:
allInventoryItems.addAll(createCar("Chevrolet", "Corvette", 5));
allInventoryItems.addAll(createCar("Chevrolet", "Malibu", 8));
allInventoryItems.addAll(createCar("Chevrolet", "Tahoe", 6));
break;
case 1:
allInventoryItems.addAll(createCar("Ford", "Taurus", 12));
allInventoryItems.addAll(createCar("Ford", "Explorer", 11));
break;
case 2:
allInventoryItems.addAll(createCar("Nissan", "Maxima", 9));
allInventoryItems.addAll(createCar("Nissan", "Frontier", 6));
break;
case 3:
allInventoryItems.addAll(createCar("Toyota", "4-Runner", 7));
allInventoryItems.addAll(createCar("Toyota", "Camry", 15));
allInventoryItems.addAll(createCar("Toyota", "Avalon", 13));
break;
case 4:
allInventoryItems.addAll(createCar("GMC", "Sierra", 8));
allInventoryItems.addAll(createCar("GMC", "Yukon", 10));
break;
case 5:
allInventoryItems.addAll(createCar("Infiniti", "G35", 6));
allInventoryItems.addAll(createCar("Infiniti", "EX35", 5));
break;
default:
break;
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
return allInventoryItems;
}
public List<InventoryItem> createCar(String vendor, String model, int count) {
ArrayList<InventoryItem> iiList = null;
try {
int arrayCount = count;
InventoryItem[] demoInventoryItemArrays = new InventoryItem[arrayCount];
for (int j = 0; j < demoInventoryItemArrays.length; j++) {
InventoryItem ii = new InventoryItem();
ii.setVendor(vendor);
ii.setModel(model);
ii.setStock(RandomHelper.randomstring(6, 7));
ii.setVin(RandomHelper.randomstring(17, 17));
ii.setMileage(new BigDecimal(RandomHelper.rand(5000, 80000)).setScale(DECIMALS, ROUNDING_MODE));
ii.setMileageMarket(new BigDecimal(RandomHelper.rand(25000, 45000)).setScale(DECIMALS, ROUNDING_MODE));
ii.setPrice(new Integer(RandomHelper.rand(15000, 55000)));
ii.setPriceMarket(new BigDecimal(RandomHelper.rand(15000, 55000)).setScale(DECIMALS, ROUNDING_MODE));
ii.setDaysLive(RandomHelper.rand(1, 90));
ii.setChangeSearches(new BigDecimal(RandomHelper.rand(0, 5)).setScale(DECIMALS, ROUNDING_MODE));
ii.setChangePrice(new BigDecimal(RandomHelper.rand(0, 5)).setScale(DECIMALS, ROUNDING_MODE));
ii.setExposure(new BigDecimal(RandomHelper.rand(0, 5)).setScale(DECIMALS, ROUNDING_MODE));
ii.setActivity(new BigDecimal(RandomHelper.rand(0, 5)).setScale(DECIMALS, ROUNDING_MODE));
ii.setPrinted(new BigDecimal(RandomHelper.rand(0, 5)).setScale(DECIMALS, ROUNDING_MODE));
ii.setInquiries(new BigDecimal(RandomHelper.rand(0, 5)).setScale(DECIMALS, ROUNDING_MODE));
demoInventoryItemArrays[j] = ii;
}
iiList = new ArrayList<InventoryItem>(Arrays.asList(demoInventoryItemArrays));
} catch (Exception e) {
e.printStackTrace();
}
return iiList;
}
public int getCurrentCarIndex() {
return currentCarIndex;
}
public void setCurrentCarIndex(int currentCarIndex) {
this.currentCarIndex = currentCarIndex;
}
public InventoryItem getEditedCar() {
return editedCar;
}
public void setEditedCar(InventoryItem editedCar) {
this.editedCar = editedCar;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getClientRows() {
return clientRows;
}
public void setClientRows(int clientRows) {
this.clientRows = clientRows;
}
}
[testPopup5.xhtml]
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition>
<h:head>
<title>RichFaces Showcase</title>
</h:head>
<h:body>
<h:outputStylesheet>
a.no-decor>img {
border: none;
}
</h:outputStylesheet>
<a4j:status onstart="#{rich:component('statPane')}.show()"
onstop="#{rich:component('statPane')}.hide()" />
<h:form>
<h:panelGrid columns="2">
<a4j:commandButton id="search" action="#{carsBean2.queryRec}"
value="Search" render="table" />
<a4j:commandButton id="reset" action="#{carsBean2.initQuery}"
value="Reset" type="reset" render="table" />
</h:panelGrid>
</h:form>
<h:form>
<rich:dataTable value="#{carsBean2.inventoryItems}" var="car"
id="table" rows="5">
<rich:column>
<f:facet name="header">Model</f:facet>
<h:outputText value="#{car.model}" />
</rich:column>
<rich:column>
<f:facet name="header">Price</f:facet>
<h:outputText value="#{car.price}" />
</rich:column>
<rich:column>
<a4j:commandLink styleClass="no-decor" render="editGrid"
execute="#this" oncomplete="#{rich:component('editPanel')}.show()">
<h:graphicImage value="/images/icons/common/edit.gif" alt="edit" />
<f:setPropertyActionListener target="#{carsBean2.editedCar}"
value="#{car}" />
</a4j:commandLink>
</rich:column>
</rich:dataTable>
<rich:popupPanel id="statPane" autosized="true" rendered="true">
<h:graphicImage value="/images/common/ai.gif" alt="ai" />
Please wait...
</rich:popupPanel>
<rich:popupPanel header="Edit Car Details" id="editPanel">
<h:panelGrid columns="3" id="editGrid">
<h:outputText value="Model" />
<h:outputText value="#{carsBean2.editedCar.model}" />
<h:panelGroup />
<h:outputText value="Price" />
<h:outputText value="#{carsBean2.editedCar.price}" />
<h:panelGroup />
</h:panelGrid>
<a4j:commandButton value="Cancel"
onclick="#{rich:component('editPanel')}.hide(); return false;" />
</rich:popupPanel>
</h:form>
</h:body>
</ui:composition>
</html>
Using firebug, I manage discover few diff between local and online GAE version.
1) editPanel # local change it style stage from 'visibility hidden' to 'display none' and then 'display block' when click on edit icon.
However editPanel # GAE still remain unchange with 'visibility hidden'
[Local]
<div id="j_idt9:editPanel" style="visibility: hidden;">
<div id="j_idt9:editPanel" style="display: none;">
<div id="j_idt9:editPanel" style="display: block;">
[GAE]
<div id="j_idt9:editPanel" style="visibility: hidden;">
2) under , local version contain value in table tag
3) Shown in firebug's script tab, when click on edit link, local version display as: and follow by table values.
However online version display it as and without any table values
p/s: Online: http://cloudenterpriseapps.appspot.com/public/test/testPopup5.jsf
By the way the GAE display below warning when page first load. Don't know is related to the problem or not.
[s~cloudenterpriseapps/0.365021621033424561].: SystemId Unknown; Line #57; Column #31; Failed calling setMethod method
[FireBug Script tab, Local. Click on edit link]
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="j_idt9:editGrid"><![CDATA[<table id="j_idt9:editGrid">
<tbody>
<tr>
<td>Model</td>
<td>Corvette</td>
<td></td>
</tr>
<tr>
<td>Price</td>
<td>47405</td>
<td></td>
</tr>
</tbody>
</table>
]]></update><update id="javax.faces.ViewState"><![CDATA[H4sIAAAAAAEUTEh...EUXAkFAAA]]></update></changes><extension id="org.richfaces.extension"><complete>RichFaces.$('j_idt9:editPanel').show();</complete><render>j_idt9:editGrid</render></extension></partial-response>
[FireBug Script tab, GAE. Click on edit link]
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="javax.faces.ViewState"><![CDATA[H4sIAAAAAAAAANVYbW....KBTUkFAAA]]></update></changes></partial-response>

Answer 1

Solved after upgrade JSF api and implementation jar from 2.0 to 2.1