Suggestion Box problem

[venuvanama]

Hi.

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

[nbelaevski]

Hello Venu,

This can be scripts conflict. Are you using any external script libraries, e.g. prototype.js? To detect prototype.js version you can type the following in the address bar when the page is loaded:

javascript:alert(Prototype.Version)

. What is RF version used?

[venuvanama]

Hi nbelaevski,

Thank you very much for your quick response, you are right we are using prototype.js and it did work if I remove reference to prototype.js. We are using prototype.js (version: 1.6.0.3) and rich faces 3.3.0.

Is there a different version of prototype.js I need so I can get this to work with rich faces 3.3.0.

Thanks again for your help.

Venu

[nbelaevski]

RichFaces already comes with bundled prototype.js of 1.6_03 version. You can add it page by using a4j:loadScript component; also it is added automatically when components that use it (such as rich:suggestionBox) are added to the page.

[venuvanama]

Hi nbelaevski,

Thanks a lot. It works great after removing explicit reference to prototype.js.

Venu

[rhancke]

FYI:

https://jira.jboss.org/jira/browse/RF-4476

[nbelaevski]

The problem described here is not caused by prototype script loading twice, but by different prototype versions being loaded.