Suggestion Box problem
venuvanama Apr 29, 2009 3:51 PMHi.
I am new to rich faces and JSF. I am using suggestionBox for autocomplete. SuggestionBox works great on FireFox but on IE(version 6.0) I am getting a javascript error(Object doesn't support this property or method) as I am typing on the input text item to which suggestionBox is attached, error comes up when the suggestionBox is displayed.
Here is my code:
<f:subview 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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<rich:panel>
<f:facet name="header">
<h:outputText value="Advanced Device Search" />
</f:facet>
<rich:simpleTogglePanel switchType="client">
<f:facet name="header">
<h:outputText value="Asset"></h:outputText>
</f:facet>
<h:panelGrid columns="5" styleClass="detail" columnClasses="label">
<h:outputText value="Tag #" />
<h:inputText id="searchByTag" value="#{deviceMasterFormBean.criteria.example.tagNumber}" />
<rich:spacer width="30px" />
<h:outputText value="Asset Mgmt. System" />
<h:selectOneMenu id="mgmtSystems" value="#{deviceMasterFormBean.criteria.example.assetSourceSystem}">
<f:selectItem itemValue="" itemLabel="Click here to Select" />
<f:selectItems value="#{readOnlyDataBean.assetMgmtSystems}" />
</h:selectOneMenu>
<h:outputText value="Serial #" />
<h:inputText id="searchBySerialNumber"
value="#{deviceMasterFormBean.criteria.example.serialNumber}" />
<rich:spacer width="30px" />
<h:outputText value="DeviceType" />
<h:selectOneMenu id="deviceTypes" value="#{deviceMasterFormBean.criteria.example.deviceType}">
<f:selectItem itemValue="" itemLabel="Click here to Select" />
<f:selectItems value="#{readOnlyDataBean.deviceTypeNames}" />
</h:selectOneMenu>
<h:outputText value="CWA" />
<h:inputText id="searchByCwa" value="#{deviceMasterFormBean.criteria.example.cwa}" />
<rich:spacer width="30px" />
<h:outputText value="Contacts" />
<h:panelGroup>
<h:selectOneMenu id="deviceContacts" value="#{deviceMasterFormBean.criteria.deviceContact}">
<f:selectItems value="#{readOnlyDataBean.deviceContacts}" />
</h:selectOneMenu>
<a4j:commandButton id="findContact" value="Manage Contacts"
image="/images/contacts.gif" border="0"
alt="Click here to Manage Contacts"
ajaxSingle="true">
<a4j:actionparam name="contact" value="contact"
assignTo="#{contactBean.hiddenInput}" />
<rich:componentControl for="contactSearchPanel"
operation="show" event="onclick" />
</a4j:commandButton>
</h:panelGroup>
<h:outputText value="Manufacturer" />
<h:inputText id="manufInput" value="#{deviceMasterFormBean.criteria.example.manufacturer}">
<rich:suggestionbox for="manufInput" id="suggestManufInput"
suggestionAction="#{readOnlyDataBean.onManufacturerAutocomplete}" var="manuf">
<h:column id="manufInputColumn">
<h:outputText id="t_suggestManuf" value="#{manuf}" />
</h:column>
</rich:suggestionbox>
</h:inputText>
</h:panelGrid>
</rich:simpleTogglePanel>
<rich:simpleTogglePanel switchType="client">
<f:facet name="header">
<h:outputText value="Location"></h:outputText>
</f:facet>
<h:panelGrid columns="5" styleClass="detail" columnClasses="label">
<h:outputText value="Building" />
<h:inputText id="searchByBuilding" value="#{deviceMasterFormBean.criteria.example.building}" />
<rich:spacer width="30px" />
<h:outputText value="Floor" />
<h:inputText id="searchByFloor" value="#{deviceMasterFormBean.criteria.example.floor}" />
<h:outputText value="Col/Bay" />
<h:inputText id="searchByColBay" value="#{deviceMasterFormBean.criteria.example.colbay}" />
<rich:spacer width="30px" />
<h:outputText value="City" />
<h:inputText id="cityInput" value="#{deviceMasterFormBean.criteria.example.city}">
<rich:suggestionbox for="cityInput" id="suggestCityInput"
suggestionAction="#{readOnlyDataBean.onCityAutocomplete}" var="city">
<h:column id="cityInputColumn">
<h:outputText id="t_suggestCity" value="#{city}" />
</h:column>
</rich:suggestionbox>
</h:inputText>
<h:outputText value="State" />
<h:inputText id="stateInput" value="#{deviceMasterFormBean.criteria.example.state}">
<rich:suggestionbox for="stateInput" id="suggestStateInput"
suggestionAction="#{readOnlyDataBean.onStateAutocomplete}" var="state">
<h:column id="stateInputColumn">
<h:outputText id="t_suggestState" value="#{state}" />
</h:column>
</rich:suggestionbox>
</h:inputText>
<rich:spacer width="30px" />
<h:outputText value="Country" >
</h:outputText>
<h:inputText id="countryInput" value="#{deviceMasterFormBean.criteria.example.country}">
<rich:suggestionbox for="countryInput" id="suggestCountryInput"
suggestionAction="#{readOnlyDataBean.onCountryAutocomplete}" var="country">
<h:column id="countryInputColumn">
<h:outputText id="t_suggestCountry" value="#{country}" />
</h:column>
</rich:suggestionbox>
</h:inputText>
</h:panelGrid>
</rich:simpleTogglePanel>
<rich:simpleTogglePanel switchType="client">
<f:facet name="header">
<h:outputText value="Network"></h:outputText>
</f:facet>
<h:panelGrid columns="5" styleClass="detail" columnClasses="label">
<h:outputText value="Namespace" />
<h:selectOneMenu id="namespaces" value="#{deviceMasterFormBean.criteria.example.namespace}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{readOnlyDataBean.namespaceNames}" />
</h:selectOneMenu>
<rich:spacer width="30px" />
<h:outputText value="Address Block" />
<h:inputText id="searchByAddressBlock" />
<h:outputText value="IP Address" />
<h:inputText id="searchByIp" value="#{deviceMasterFormBean.criteria.example.ip}" />
<rich:spacer width="30px" />
<h:outputText value="IP Status" />
<h:selectOneMenu id="ipStatusList" value="#{deviceMasterFormBean.criteria.example.ipStatus}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{readOnlyDataBean.statusNames}" />
<!--
<f:selectItem itemLabel="Active" itemValue="A" />
<f:selectItem itemLabel="Inactive" itemValue="I" />
-->
</h:selectOneMenu>
<h:outputText value="Hostname" />
<h:inputText id="searchByHost" value="#{deviceMasterFormBean.criteria.example.name}" />
<rich:spacer width="30px" />
<h:outputText value="Hostname Status" />
<h:selectOneMenu id="hostnameStatusList"
value="#{deviceMasterFormBean.criteria.example.nameStatus}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{readOnlyDataBean.statusNames}" />
<!--
<f:selectItem itemLabel="Active" itemValue="A" />
<f:selectItem itemLabel="Inactive" itemValue="I" />
-->
</h:selectOneMenu>
<h:outputText value="MAC" />
<h:inputText id="searchByMac" value="#{deviceMasterFormBean.criteria.example.mac}" />
<rich:spacer width="30px" />
<h:outputText value="Host Contacts" />
<h:panelGroup>
<h:selectOneMenu id="fqdnContacts" value="#{deviceMasterFormBean.criteria.hostContact}">
<f:selectItems value="#{readOnlyDataBean.fqdnContacts}" />
</h:selectOneMenu>
<a4j:commandButton id="findFqdnContact" value="Manage Contacts"
image="/images/contacts.gif" border="0"
alt="Click here to Manage Contacts"
ajaxSingle="true">
<a4j:actionparam name="contact" value="fqdnContact"
assignTo="#{contactBean.hiddenInput}" />
<rich:componentControl for="contactSearchPanel"
operation="show" event="onclick" />
</a4j:commandButton>
</h:panelGroup> </h:panelGrid>
</rich:simpleTogglePanel>
<a4j:commandButton id="advancedSearchButton" value="Search"
actionListener="#{deviceMasterFormBean.onSearch}" event="onclick"
reRender="searchResultPanel,searchTogglePanel,backToSearchLink">
<a4j:actionparam name="searchType" value="1" assignTo="#{deviceMasterFormBean.searchType}" />
</a4j:commandButton>
<rich:spacer width="5px" />
<a4j:commandButton id="chooseFields" value="Choose Fields"
action="#{deviceMasterFormBean.onChooseFields}"
event="onclick" reRender="deviceTabs" />
<rich:spacer width="5px" />
<h:commandButton id="exportCSV" value="Export To CSV" actionListener="#{deviceMasterFormBean.onExportToCSV}" />
<rich:spacer width="5px" />
<a4j:commandLink value="Quick Search"
action="#{deviceMasterFormBean.backToQuickSearch}"
event="onclick" reRender="deviceTabs" >
<a4j:actionparam value="0" assignTo="#{deviceMasterFormBean.searchType}" />
</a4j:commandLink>
<h:message for="searchByTag" styleClass="errorMessage" />
</rich:panel>
</f:subview>
Here is the action method onStateAutoComplete:
public List onStateAutocomplete(final Object event)
{
final String search = (String) event + '%';
// do not search unless search is at least 2 chars long
if (StringUtils.isNotEmpty(search) && (search.length() > 2))
{
return this.deviceSearchManager.findUniqueStateNames(search);
}
return Collections.EMPTY_LIST;
}
Please let me know if anyone out there came across something similar and was able to resolve. I thank you in advance.
Venu