RichFaces rendering problem with Firefox
I have the following requirement.
In my application I have an Identifier(collectionId), it can be Type1 or Type2.
If the collectionId type is Type1,
I have to display OrderingList1
if collectionId type is Type2
I have to display orderingList2
I used rich faces OrderingList tag for the OrderingLists.
I have GUI page with one Textbox for collectionId, so when the user enters collectionId,
onblur() event, I am calling a method (using <a4j:support> tag) on my java class (MyBean.java) to figure out the Id type, and based on the type I am changing the flag values(to control the rendering of the orderingLists).
I am able to implement the above requiremnt in InternetExplorer, its working fine,
When the user enters Type1 collectionId, it displays the OrderingList1 and I was able to select the items from the OrderingList1.
In FireFox and NetScape it displays the correct OrderingList, but the problem is, its not letting me select the values from the list without page refresh.
I am using Rich Faces3.1.4 + Seam2.0.2
Here is the Code : collection.xhtml and MyBean.java
Any help or guidance would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
template="layout/template.xhtml">
<ui:define name="body">
<h:form id="collectionProcessing">
<rich:panel styleClass="richpanel">
<h:panelGrid style="text-align: left" border="1"
cellpadding="4" columns="2" id="panel" columnClasses="col14, col17">
<h:outputText value="Collection ID:" class="style2">
<a4j:status>
<f:facet name="start">
<h:graphicImage value="/img/spinner.gif"/>
</f:facet>
</a4j:status>
</h:outputText>
<h:inputText id="collectionID" value="#{myBean.collectionId}" class="textField">
<a4j:support event="onblur" actionListener="#{myBean.search}"
reRender=" FirstPanel, SecondPanel" />
</h:inputText>
</h:panelGrid>
<a4j:outputPanel id="FirstPanel" >
<h:panelGrid style="text-align: left" border="1" columnClasses="col14, col1"
cellpadding="4" columns="2" id="panel4" rendered="#{myBean.firstPanelFlag}">
<h:outputText value="OrderingList1" class="style2" />
<rich:orderingList value="#{myBean.tagList1}"
fastOrderControlsVisible="false" orderControlsVisible="false"
selection="#{myBean.listTags1}"
var="item" listWidth="200" rows="5">
<h:column>
<h:outputText value="#{item}"/>
</h:column>
</rich:orderingList>
</h:panelGrid>
</a4j:outputPanel>
<a4j:outputPanel id="SecondPanel">
<h:panelGrid style="text-align: left" border="1" columnClasses="col14, col1"
cellpadding="4" columns="2"
rendered="#{myBean.secondPanelFlag}">
<h:outputText value="OrderingList2" class="style2" />
<rich:orderingList value="#{myBean.tagList2}"
fastOrderControlsVisible="false" orderControlsVisible="false"
selection="#{myBean.listTags2}"
var="item" listWidth="200" rows="5" >
<h:column>
<h:outputText value="#{item}"/>
</h:column>
</rich:orderingList>
</h:panelGrid>
</a4j:outputPanel>
<h:panelGrid style="text-align: right" width="890" border="1"
cellpadding="0" cellspacing="4" columns="2"
columnClasses="col8, col9" id="panel6">
<h:commandButton value="Process"
action="#{myBean.process()}"></h:commandButton>
<h:commandButton value="Reset" action="#{myBean.destroy()}"></h:commandButton>
</h:panelGrid>
</rich:panel>
</h:form>
</ui:define>
</ui:composition>
MyBean
{
private boolean firstPanelFlag = false;
private boolean secondPanelFlag = false;
public void search()
{
if collectionId is Type1
firstPanelFlag = true;
else if collectionId is Type2
secondPanelFlag = true;
}
public void process()
{
}
}