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

    suggestionbox problem in Internet Explorer

    poesys

      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>
      
        • 1. Re: suggestionbox problem in Internet Explorer
          nbelaevski

          Hi Bob,

           

          Please check the following:

           

          1) Are there JS errors?

          2) Are there any errors/warnings in a4j:log component?

          • 2. Re: suggestionbox problem in Internet Explorer
            poesys

            I turned on error display and debugging. The following error pops up immediately on display of the suggestionbox and repeats indefinitely:

             

            Line: 29
            Error: Object doesn't support this property or method
            

             

            This is outlined in yellow in the debugger in the file effects.js.faces line 29:

             

            effect.element.forceRerendering()
            

             

            Here's the error info in the error popup:

             

            Webpage error details
            
            User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
            Timestamp: Sat, 27 Mar 2010 14:27:56 UTC
            
            
            Message: Object doesn't support this property or method
            Line: 29
            Char: 1006
            Code: 0
            URI: http://liverpool/a4j/g/3_3_2.SR1org/richfaces/renderkit/html/scripts/scriptaculous/effects.js.faces
            

             

            In the logwindow for a4j:log:

             

            error[7:33:54,200]: Error to clear node content by innerHTML Unknown runtime error
            

             

            I'm attaching a file that contains the full line from the js file and the complete log from a4j:log.

            • 3. Re: suggestionbox problem in Internet Explorer
              poesys

              Are there any suggestions for working around this problem based on the Javascript errors? They don't mean anything to me, they seem to be internal to the component. Is this a bug, and should I try to produce a minimal reproducing example?

              • 4. Re: suggestionbox problem in Internet Explorer
                ilya_shaikovsky

                do you have any additional JS libraries used on the page where error occurs?

                • 5. Re: suggestionbox problem in Internet Explorer
                  poesys

                  We include a bunch of js files as part of our header and footer systems. I just removed all that by changing the Facelets template that includes them, and the Explorer problems go away.

                   

                  I will add everything back until I find the culprit, then see what can be done.

                   

                  Do you have any particular suggestions on how to avoid js conflicts with RichFaces, or a comment on why this would affect only Explorer (other than the obvious, that something is being included only for Explorer, which I should be able to figure out)?

                   

                  Thanks for your help! Good intuition.

                   

                    --Bob Muller

                  • 6. Re: suggestionbox problem in Internet Explorer
                    ilya_shaikovsky

                    It's just common problem. We had many questions like that in the past when the developers are including prototype or scriptaculous for example libraries and the versions of richfaces dependencies differs from included externally. Now it's gone to our wiki FAQ Or even worse situation when some other library depends on the same script library but with the other version (for example tomahawk depends on prototype and the latest versions of tomahawk in the past had rpototype of lower version than RF bundled so patching of one of them was required.)

                    • 7. Re: suggestionbox problem in Internet Explorer
                      poesys

                      The culprit does in fact turn out to be Prototype.js, version 1.6.0. I've removed that from my include file, as we don't use it in my Faces pages, only in our older JSPs; and if RichFaces includes it (with fixes) as the FAQ implies, we can use it directly if needed from your version.

                      • 8. Re: suggestionbox problem in Internet Explorer
                        ilya_shaikovsky

                        Nice to hear that solved. That's completelly what I meant.

                        • 9. Re: suggestionbox problem in Internet Explorer
                          shadowcreeper

                          I understand prototype.js breaking it if I add my own prototype script.

                           

                          But isn't it a bug that adding <a4j:loadScript src="resource://prototype.js"/> to your page breaks the rich:suggestionBox widgets in IE ??? (thanks to this thread, I removed that 1 line and it started working)

                          • 10. Re: suggestionbox problem in Internet Explorer
                            nbelaevski

                            Hi,

                             

                            Yes, it is known to cause prototype loaded twice: https://jira.jboss.org/browse/RF-4476 and it's definitely doesn't like to be loaded twice. Please use workaround described in the issue.