6 Replies Latest reply on May 4, 2009 9:41 AM by Nick Belaevski

    Suggestion Box problem

    venuvanama Newbie

      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