10 Replies Latest reply on Jul 21, 2010 4:12 AM by Nick Belaevski

    suggestionbox problem in Internet Explorer

    Bob Muller Novice

      I'm having a problem with a suggestionbox component having problems in Internet Explorer but working fine in Firefox. I'd appreciate any suggestions for possible issues that might cause the problem before I dive in and try to get a minimally reproducing example.

       

      The problem: when the user starts typing, the suggestionBox appears, the user selects a row, the input text field fills in and the action happens (filling in other fields), then the suggestionBox doesn't disappear, it just hangs there and does nothing. I have other suggestion boxes in modal panels, if I bring them up they don't appear at all--the suggestionBox functionality doesn't work anymore.

       

      On Firefox, this works as expected, no problems at all. The box disappears and the rest of the form functions as usual.

       

      I did see another forum thread here where nested forms were the problem; that's not the issue here. There's a single form for the main page and each modalPanel has a separate form around a data table in the panel, and I've looked at the generated HTML and there's no nesting.

       

      Here's the segment of code for the main suggestionBox:

       

      <rich:suggestionbox
            suggestionAction="#{geneSubmission.suggestLoci}"
            var="l"
            for="locus"
            minChars="5"
            eventsQueue="locusQueue"
            ignoreDupResponses="true"
            fetchValue="#{l.name}"
            nothingLabel="No locus found"
            width="100"
            height="300">
            <h:column>
                  <h:outputText value="#{l.name}" />
            </h:column>
            <a4j:support
                 event="onselect"
                 action="#{geneSubmission.setLocusSymbol}"
                 reRender="symbol, fullName">
                 <f:setPropertyActionListener
                       value="#{gene}"
                       target="#{geneSubmission.selectedGene}" />
                 <f:setPropertyActionListener
                       value="#{l.name}"
                       target="#{gene.locus}" />
            </a4j:support>
      </rich:suggestionbox>
      

       

      Here's the complete code for the form (not including the code for the modal panels which are outside this form), which includes the above component as the for="locus" component attached to the locus input text  field:

       

      <h:form>
                                      <a4j:outputPanel id="submissionPanel">
                                          <h:panelGrid
                                              columns="2"
                                              columnClasses="field,field">
                                              <h:panelGrid columns="1">
                                                  <h:inputText
                                                      id="articleId"
                                                      required="true"
                                                      requiredMessage="Must enter article id"
                                                      value="#{geneSubmission.articleId}">
                                                      <a4j:support
                                                          event="onblur"
                                                          ajaxSingle="true"
                                                          reRender="articleMessage,submitButton">
                                                          <f:setPropertyActionListener
                                                              value="#{login.communityId}"
                                                              target="#{geneSubmission.communityId}" />
                                                      </a4j:support>
                                                      <h:outputLabel
                                                          for="articleId"
                                                          styleClass="fieldLabel">
                                                          <h:outputText value="*Article Id:" />
                                                      </h:outputLabel>
                                                      <rich:toolTip
                                                          mode="client"
                                                          value="Required: The DOI or PubMed id of the article from which you are annotating the genes."
                                                          styleClass="tooltip" />
                                                  </h:inputText>
                                                  <h:panelGroup id="articleMessage">
                                                      <h:message
                                                          for="articleId"
                                                          styleClass="errorMessage" />
                                                  </h:panelGroup>
                                              </h:panelGrid>
                                              <h:selectOneRadio
                                                  id="articleType"
                                                  value="#{geneSubmission.articleType}"
                                                  layout="pageDirection"
                                                  styleClass="radioLabel">
                                                  <f:selectItem
                                                      itemValue="doi"
                                                      itemLabel="Digital Object Identifier (DOI)" />
                                                  <f:selectItem
                                                      itemValue="pubmed"
                                                      itemLabel="Pubmed ID" />
                                              </h:selectOneRadio>
                                          </h:panelGrid>
                                          <rich:dataTable
                                              id="locusTable"
                                              rows="0"
                                              value="#{geneSubmission.genes}"
                                              var="gene">
                                              <rich:column>
                                                  <f:facet name="header">
                                                      <h:panelGrid
                                                          id="locusNameHeader"
                                                          rowClasses="headerLabel,exampleTableHeader,tooltip"
                                                          columns="1">
                                                          <h:outputText value="*Locus Name" />
                                                          <h:outputText value="AT2G23380" />
                                                          <rich:toolTip
                                                              mode="client"
                                                              value="Required: AGI locus name, the field will autocomplete the name after you type 5 characters" />
                                                      </h:panelGrid>
                                                  </f:facet>
                                                  <h:panelGrid
                                                      id="locusField"
                                                      columns="1"
                                                      rowClasses="field">
                                                      <h:inputText
                                                          id="locus"
                                                          value="#{gene.locus}"
                                                          required="true"
                                                          requiredMessage="Must enter locus name"
                                                          size="9">
                                                          <a4j:support
                                                              event="onblur"
                                                              ajaxSingle="true"
                                                              reRender="locusMessage,submitButton">
                                                              <f:setPropertyActionListener
                                                                  value="#{login.communityId}"
                                                                  target="#{geneSubmission.communityId}" />
                                                          </a4j:support>
                                                      </h:inputText>
                                                      <h:panelGroup id="locusMessage">
                                                          <h:message
                                                              for="locus"
                                                              styleClass="errorMessage" />
                                                      </h:panelGroup>
                                                      <rich:suggestionbox
                                                          suggestionAction="#{geneSubmission.suggestLoci}"
                                                          var="l"
                                                          for="locus"
                                                          minChars="5"
                                                          eventsQueue="locusQueue"
                                                          ignoreDupResponses="true"
                                                          fetchValue="#{l.name}"
                                                          nothingLabel="No locus found"
                                                          width="100"
                                                          height="300">
                                                          <h:column>
                                                              <h:outputText value="#{l.name}" />
                                                          </h:column>
                                                          <a4j:support
                                                              event="onselect"
                                                              action="#{geneSubmission.setLocusSymbol}"
                                                              reRender="symbol, fullName">
                                                              <f:setPropertyActionListener
                                                                  value="#{gene}"
                                                                  target="#{geneSubmission.selectedGene}" />
                                                              <f:setPropertyActionListener
                                                                  value="#{l.name}"
                                                                  target="#{gene.locus}" />
                                                          </a4j:support>
                                                      </rich:suggestionbox>
                                                  </h:panelGrid>
                                              </rich:column>
                                              <rich:column>
                                                  <f:facet name="header">
                                                      <h:panelGrid
                                                          id="symbolHeader"
                                                          rowClasses="headerLabel,exampleTableHeader,tooltip"
                                                          columns="1">
                                                          <h:outputText value="Symbol" />
                                                          <h:outputText value="CLF" />
                                                          <rich:toolTip
                                                              mode="client"
                                                              value="Primary symbol for locus; enter new symbol if needed" />
                                                      </h:panelGrid>
                                                  </f:facet>
                                                  <h:panelGrid
                                                      id="symbolField"
                                                      columns="1"
                                                      rowClasses="field">
                                                      <h:inputText
                                                          value="#{gene.symbol}"
                                                          id="symbol"
                                                          size="5">
                                                      </h:inputText>
                                                      <rich:suggestionbox
                                                          suggestionAction="#{geneSubmission.suggestSymbols}"
                                                          var="s"
                                                          for="symbol"
                                                          minChars="2"
                                                          eventsQueue="symbolQueue"
                                                          ignoreDupResponses="true"
                                                          fetchValue="#{s.symbol}"
                                                          nothingLabel="No symbols found"
                                                          width="350"
                                                          height="300">
                                                          <h:column>
                                                              <f:facet name="header">Symbol</f:facet>
                                                              <h:outputText value="#{s.symbol}" />
                                                          </h:column>
                                                          <h:column>
                                                              <f:facet name="header">Full Name</f:facet>
                                                              <h:outputText value="#{s.fullName}" />
                                                          </h:column>
                                                          <a4j:support
                                                              event="onselect"
                                                              reRender="symbol, fullName">
                                                              <f:setPropertyActionListener
                                                                  value="#{gene}"
                                                                  target="#{geneSubmission.selectedGene}" />
                                                              <f:setPropertyActionListener
                                                                  value="#{s.fullName}"
                                                                  target="#{gene.fullName}" />
                                                          </a4j:support>
                                                      </rich:suggestionbox>
                                                      <rich:message
                                                          for="symbol"
                                                          styleClass="errorMessage" />
                                                  </h:panelGrid>
                                              </rich:column>
                                              <rich:column>
                                                  <f:facet name="header">
                                                      <h:panelGrid
                                                          id="symbolFullNameHeader"
                                                          rowClasses="headerLabel,exampleTableHeader,tooltip"
                                                          columns="1">
                                                          <h:outputText value="Symbol Full Name" />
                                                          <h:outputText value="CURLY LEAF" />
                                                          <rich:toolTip
                                                              mode="client"
                                                              value="Full name of symbol; enter new full name if needed" />
                                                      </h:panelGrid>
                                                  </f:facet>
                                                  <h:panelGrid
                                                      id="fullNameField"
                                                      columns="1"
                                                      rowClasses="field">
                                                      <h:inputText
                                                          value="#{gene.fullName}"
                                                          id="fullName"
                                                          size="20"
                                                          maxlength="200">
                                                      </h:inputText>
                                                      <rich:message
                                                          for="fullName"
                                                          styleClass="errorMessage" />
                                                  </h:panelGrid>
                                              </rich:column>
                                              <rich:column>
                                                  <f:facet name="header">
                                                      <h:panelGrid
                                                          id="annotationsHeader"
                                                          rowClasses="headerLabel,exampleTableHeader,tooltip"
                                                          columns="1">
                                                          <h:outputText value="*Add Information" />
                                                          <h:outputText value="Click links below to add..." />
                                                          <rich:toolTip
                                                              mode="client"
                                                              value="Required: At least one annotation of this gene from the article" />
                                                      </h:panelGrid>
                                                  </f:facet>
                                                  <h:panelGrid
                                                      columns="1"
                                                      columnClasses="annotationLink">
                                                      <a4j:commandLink
                                                          value="Molecular Function#{gene.functionCount}"
                                                          id="functionLink"
                                                          onclick="#{rich:component('functionPanel')}.show()"
                                                          styleClass="annotationLink"
                                                          reRender="functionText, functionTable">
                                                          <f:setPropertyActionListener
                                                              value="#{gene}"
                                                              target="#{geneSubmission.selectedGene}" />
                                                      </a4j:commandLink>
                                                      <a4j:commandLink
                                                          value="Biological Process#{gene.processCount}"
                                                          id="processLink"
                                                          onclick="#{rich:component('processPanel')}.show()"
                                                          styleClass="annotationLink"
                                                          reRender="processText, processTable">
                                                          <f:setPropertyActionListener
                                                              value="#{gene}"
                                                              target="#{geneSubmission.selectedGene}" />
                                                      </a4j:commandLink>
                                                      <a4j:commandLink
                                                          value="Subcellular Localization#{gene.componentCount}"
                                                          id="componentLink"
                                                          onclick="#{rich:component('componentPanel')}.show()"
                                                          styleClass="annotationLink"
                                                          reRender="componentText, componentTable">
                                                          <f:setPropertyActionListener
                                                              value="#{gene}"
                                                              target="#{geneSubmission.selectedGene}" />
                                                      </a4j:commandLink>
                                                      <a4j:commandLink
                                                          value="Expression#{gene.expressionCount}"
                                                          id="expressionLink"
                                                          onclick="#{rich:component('expressionPanel')}.show()"
                                                          styleClass="annotationLink"
                                                          reRender="expressionText, expressionTable">
                                                          <f:setPropertyActionListener
                                                              value="#{gene}"
                                                              target="#{geneSubmission.selectedGene}" />
                                                      </a4j:commandLink>
                                                      <a4j:commandLink
                                                          value="Interacting Partner/s#{gene.locusCount}"
                                                          id="partnerLink"
                                                          onclick="#{rich:component('partnerPanel')}.show()"
                                                          styleClass="annotationLink"
                                                          reRender="partnerText, partnerTable">
                                                          <f:setPropertyActionListener
                                                              value="#{gene}"
                                                              target="#{geneSubmission.selectedGene}" />
                                                      </a4j:commandLink>
                                                      <a4j:commandLink
                                                          value="Other#{gene.otherCount}"
                                                          id="otherLink"
                                                          onclick="#{rich:component('otherPanel')}.show()"
                                                          styleClass="annotationLink"
                                                          reRender="otherText, otherTable">
                                                          <f:setPropertyActionListener
                                                              value="#{gene}"
                                                              target="#{geneSubmission.selectedGene}" />
                                                      </a4j:commandLink>
                                                  </h:panelGrid>
                                              </rich:column>
                                          </rich:dataTable>
                                          <h:panelGrid columns="3">
                                              <a4j:commandButton
                                                  id="submitButton"
                                                  value="Save to Database"
                                                  disabled="#{!geneSubmission.valid}"
                                                  reRender="submissionPanel"
                                                  oncomplete="#{rich:component('savedPanel')}.show()"
                                                  action="#{geneSubmission.submitAnnotations}">
                                                  <a4j:support event="onclick">
                                                      <f:setPropertyActionListener
                                                          value="#{login.communityId}"
                                                          target="#{geneSubmission.communityId}" />
                                                  </a4j:support>
                                              </a4j:commandButton>
                                              <a4j:commandButton
                                                  value="Clear Form"
                                                  immediate="true"
                                                  ajaxSingle="true"
                                                  reRender="articleId, articleType, locusTable, submitButton, functionPanel, processPanel, componentPanel, expressionPanel, partnerPanel, otherPanel"
                                                  action="#{geneSubmission.cancelAnnotations}" />
                                              <a4j:commandButton
                                                  value="Add Another Locus"
                                                  type="button"
                                                  immediate="true"
                                                  ajaxSingle="true"
                                                  action="#{geneSubmission.addLocus}"
                                                  reRender="locusTable,submitButton" />
                                          </h:panelGrid>
                                      </a4j:outputPanel>
                                  </h:form>