suggestionBox doesn't hide in IE7

[gamba]

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

[gamba]

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

[ilya_shaikovsky]

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.

[gamba]

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

[ilya_shaikovsky]

"classifyPropertiesPanel" which element has this id?

[gamba]

"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.

[gamba]

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

[gamba]

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

[gamba]

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 ...

[ilya_shaikovsky]

https://jira.jboss.org/jira/secure/IssueNavigator.jspa?reset=true&&pid=12310341&resolution=-1&component=12311601&sorter/field=priority&sorter/order=DESC
a few js errors in portals issues from this list - affects your case. watch them to get update on resolve.