9 Replies Latest reply on Nov 11, 2009 8:41 AM by Ilya Shaikovsky

    suggestionBox doesn't hide in IE7

    gamba Newbie

      Hi,

      my suggestion-box doesn't disappear after selecting an entry.
      I'm using RichFaces 3.3.2.SR1 with JBoss-Portal 2.7.2 ...

      First I render the inputfield with a graphic-image. It is surrounded by an own form, because I want to submit keyevents like known menus (e.g. 1,11, 21, ...)

      The second snippet declares the suggestion-box ...

      <a4j:form reRender="classifyForm" ajaxSubmit="true">
       <h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0">
       <h:inputText id="classifySuggestion" value="#{classifyBean.aktuelleKlasse}" tabindex="1" styleClass="hmgFontSmall pisComboBoxClass">
       </h:inputText>
       < h:graphicImage value="#{msg.imageCombobox}" onclick="#{rich:component('classifySuggestionBox')}.callSuggestion(true)">
       </h:panelGrid>
      </a4j:form>
      
      <a4j:form>
       <rich:suggestionbox id="classifySuggestionBox" for="classifySuggestion" focus="classifySuggestionBox"
       var="result" suggestionAction="#{classifyBean.autocomplete}" cellpadding="0" cellspacing="0"
       width="286" height="200" fetchValue="#{result}" minChars="3" popupClass="hmgFontSmall"
       nothingLabel="#{msg.keineKlasseGefunden}" frequency="0.02">
       <a4j:support event="onselect" reRender="classifyForm" immediate="true">
       <f:setPropertyActionListener value="#{result}" target="#{classifyBean.aktuelleKlasse}" />
       </a4j:support>
      
       <h:column>
       <h:outputText value="#{result}" styleClass="hmgFontSmall" />
       </h:column>
       </rich:suggestionbox>
      </a4j:form>
      
      After all I get an script-error, when selecting an item of the suggested-values. I'm using DebugBar, so I cannot see the scriptfile-name only the linenumber:
      
      Row: 30
      Character: 1495
      Code: 0
      Error: The obejct doesn't support the property.
      URL: http://localhost:8080/ ...
      
      Is this a known problem?
      
      Thx,
      DT


        • 1. Re: suggestionBox doesn't hide in IE7
          gamba Newbie

          Ok, with another JS-Tool I get a code hint ... it says that in effect.js.xhtml is an error in line 29. The object doesn't know the property ...

          This is the whol row ...

          this.options.restorecolor=this.element.getStyle('background-color');this._base=$R(0,2).map(function(i){return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16)}.bind(this));this._delta=$R(0,2).map(function(i){return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base}.bind(this));},update:function(position){this.element.setStyle({backgroundColor:$R(0,2).inject('#',function(m,v,i){return m+((this._base+(this._delta*position)).round().toColorPart());}.bind(this))});},finish:function(){this.element.setStyle(Object.extend(this.oldStyle,{backgroundColor:this.options.restorecolor}));}});Effect.ScrollTo=function(element){var options=arguments[1]||{},scrollOffsets=document.viewport.getScrollOffsets(),elementOffsets=$(element).cumulativeOffset();if(options.offset)elementOffsets[1]+=options.offset;return new Effect.Tween(null,scrollOffsets.top,elementOffsets[1],options,function(p){scrollTo(scrollOffsets.left,p.round());});};Effect.Fade=function(element){element=$(element);var oldOpacity=element.getInlineOpacity();var options=Object.extend({from:element.getOpacity()||1.0,to:0.0,afterFinishInternal:function(effect){if(effect.options.to!=0)return;effect.element.hide().setStyle({opacity:oldOpacity});}},arguments[1]||{});return new Effect.Opacity(element,options);};Effect.Appear=function(element){element=$(element);var options=Object.extend({from:(element.getStyle('display')=='none'?0.0:element.getOpacity()||0.0),to:1.0,afterFinishInternal:function(effect){effect.element.forceRerendering();},beforeSetup:function(effect){effect.element.setOpacity(effect.options.from).show();}},arguments[1]||{});return new Effect.Opacity(element,options);};Effect.Puff=function(element){element=$(element);var oldStyle={opacity:element.getInlineOpacity(),position:element.getStyle('position'),top:element.style.top,left:element.style.left,width:element.style.width,height:element.style.height};return new Effect.Parallel([new Effect.Scale(element,200,{sync:true,scaleFromCenter:true,scaleContent:true,restoreAfterFinish:true}),new Effect.Opacity(element,{sync:true,to:0.0})],Object.extend({duration:1.0,beforeSetupInternal:function(effect){Position.absolutize(effect.effects[0].element);},afterFinishInternal:function(effect){effect.effects[0].element.hide().setStyle(oldStyle);}},arguments[1]||{}));};Effect.BlindUp=function(element){element=$(element);element.makeClipping();return new Effect.Scale(element,0,Object.extend({scaleContent:false,scaleX:false,restoreAfterFinish:true,afterFinishInternal:function(effect){effect.element.hide().undoClipping();}},arguments[1]||{}));};Effect.BlindDown=function(element){element=$(element);var elementDimensions=element.getDimensions();return new Effect.Scale(element,100,Object.extend({scaleContent:false,scaleX:false,scaleFrom:0,scaleMode:{originalHeight:elementDimensions.height,originalWidth:elementDimensions.width},restoreAfterFinish:true,afterSetup:function(effect){effect.element.makeClipping().setStyle({height:'0px'}).show();},afterFinishInternal:function(effect){effect.element.undoClipping();}},arguments[1]||{}));};Effect.SwitchOff=function(element){element=$(element);var oldOpacity=element.getInlineOpacity();return new Effect.Appear(element,Object.extend({duration:0.4,from:0,transition:Effect.Transitions.flicker,afterFinishInternal:function(effect){new Effect.Scale(effect.element,1,{duration:0.3,scaleFromCenter:true,scaleX:false,scaleContent:false,restoreAfterFinish:true,beforeSetup:function(effect)
          


          Any hints ...

          Thx


          • 2. Re: suggestionBox doesn't hide in IE7
            Ilya Shaikovsky Master

            you reRendering input without suggestion. So suggestion component attached to DOM element - which replaced after ajax request. So attachment lost and js error tells you about that. And I can't get the idea why the suggestion is in the other form. to limit processing from suggestion/support request you could use just region or ajaxSingle.

            • 3. Re: suggestionBox doesn't hide in IE7
              gamba Newbie

              I used two forms because I wanted to use ajax-submit for the <h:input-component. I read in the helpguide not to use ajaxSubmit="true" in <a4j:form> with other ajax-submit-component. As I use <a4j:support ..> I tried to use two forms which works fine in FF.

              To sum it up I want to submit on myself the suggestionbox (ok, the input-field), when entering a menu-number like 1,11 ... after 3 chars the suggestion-box logic should used ... that is my use-case to implement.

              Nevertheless, after using only one form, the error still exists. I tried something with ajaxSingle or reRender, but no changes in IE7.

              Here is my current code ...

              <a4j:form reRender="classifyForm" ajaxSubmit="true">
               <h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0">
               <h:inputText id="classifySuggestion" value="#{classifyBean.aktuelleKlasse}" tabindex="1" styleClass="hmgFontSmall pisComboBoxClass">
               </h:inputText>
               <h:graphicImage id="classifyImage" value="#{msg.imageCombobox}" onclick="#{rich:component('classifySuggestionBox')}.callSuggestion(true)" />
               </h:panelGrid>
              
               <rich:suggestionbox id="classifySuggestionBox" for="classifySuggestion" focus="classifySuggestionBox" var="result" suggestionAction="#{classifyBean.autocomplete}"
               cellpadding="0" cellspacing="0" width="286" height="200" fetchValue="#{result}" minChars="3"
               popupClass="hmgFontSmall" nothingLabel="#{msg.keineKlasseGefunden}" frequency="0.02">
               <a4j:support event="onselect" reRender="classifyPropertiesPanel" immediate="true" limitToList="true">
               <f:setPropertyActionListener value="#{result}" target="#{classifyBean.aktuelleKlasse}" />
               </a4j:support>
              
               <h:column>
               <h:outputText value="#{result}" styleClass="hmgFontSmall" />
               </h:column>
               </rich:suggestionbox>
              </a4j:form>
              


              The same error occurs. "Object doesn't support the property or operation."
              (effects.js.xhtml (line 29))
              - suggestionbox.js.xhtml(line 12)
              - suggestionbox.js.xhtml(line 24)
              - rfResorg.ajax4jsf.javascript.PrototypeScript.xhtml (line 17)

              Any further hints?

              Thx,
              Gamba


              • 4. Re: suggestionBox doesn't hide in IE7
                Ilya Shaikovsky Master

                "classifyPropertiesPanel" which element has this id?

                • 5. Re: suggestionBox doesn't hide in IE7
                  gamba Newbie

                  "classifyPropertiesPanel" is an <a4j:outputPanel> below in an other form and another region.

                  But I just tried, I don't need this reRender in <a4j:support> because it is rendered by the <a4j:form reRender="classifyPropertiesPanel" or like the current posted code <a4j:form reRender="classifyForm" which points to the form inside the a4jPanel ...

                  You see I'm actual trying a lot of properties but damned IE doesn't close the suggestion-box.

                  • 6. Re: suggestionBox doesn't hide in IE7
                    gamba Newbie

                    ilya, any other hints ... the demo-example works in ie ...

                    • 7. Re: suggestionBox doesn't hide in IE7
                      gamba Newbie

                      I hav the suggestion bo, in its simplest form, without sending a request on selecting and only with autocomplete (this is the inly request to the server) ...

                      <a4j:region>
                      <a4j:outputPanel id="classifyInputPanel">
                      ...
                      <h:form>
                       <h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0" >
                       <h:inputText id="classifySuggestion" tabindex="1" styleClass="hmgFontSmall pisComboBoxClass" />
                       <h:graphicImage id="classifyImage" value="#{msg.imageCombobox}" onclick="#{rich:component('classifySuggestionBox')}.callSuggestion(true);" />
                       </h:panelGrid>
                      
                       <rich:suggestionbox id="classifySuggestionBox" for="classifySuggestion" focus="classifySuggestionBox" var="result" suggestionAction="#{classifyBean.autocomplete}"
                       cellpadding="0" cellspacing="0" width="286" height="200" fetchValue="#{result}" popupClass="hmgFontSmall"
                       nothingLabel="#{msg.keineKlasseGefunden}" frequency="0.02">
                      
                       <h:column>
                       <h:outputText value="#{result}" styleClass="hmgFontSmall" />
                       </h:column>
                       </rich:suggestionbox>
                      <h:form>
                      ...
                      </a4j:outputPanel>
                      </a4j:region>
                      


                      ... and still there the same errors in I and the box doesn't hide. With an additional request on selectin an element (a4j:support) all seems to be fine, but the box did not hide ......

                      Thx,
                      Gamba

                      • 8. Re: suggestionBox doesn't hide in IE7
                        gamba Newbie

                        Ok ... with sending a request on selecting a object ...

                        <a4j:support event="onselect" limitToList="true" reRender="classifyInputPanel,classifyPropertiesPanel">
                         <f:setPropertyActionListener value="#{result}" target="#{classifyBean.aktuelleKlasse}" />
                        </a4j:support>
                        


                        ... the box hides in IE too, but the JS-error still exists. I think it is a bug in the JS-Script ... don't know why, because I'm not a JS-expert ....

                        The only thing I changed was deleting the value-attribute in th input-field ...

                        <h:inputText id="classifySuggestion" tabindex="1" styleClass="hmgFontSmall pisComboBoxClass">
                         <!-- value="#{classifyBean.aktuelleKlasse}" -->
                        </h:inputText>
                        


                        Hm... ok, I'm able to use it now, but with existing javascript errors ...