2 Replies Latest reply on Nov 25, 2010 5:45 AM by vkmedi

How to detach a selected entity after selecting it from rich:suggestionbox?

vkmedi Nov 24, 2010 6:39 AM

Hi,

I am currently using rich:suggestionbox to populate entries and onselect I am binding that object. But as I said I am using suggestionbox, so once I select an entry it is displayed in a text box. I have a scenario where in, if I delete the text from the textbox I want to detach the object which is selected from the rich:suggestionbox.

Following is my code block.

<h:inputText style="margin:0px;" id="#{id}_input" value="" />

<rich:suggestionbox height="#{empty height ? '200' : height}"
                                    width="#{empty width ? '300' : width}" id="#{id}"
                                    suggestionAction="#{suggestionService[action]}" var="item"
                                    for="#{id}_input"
                                    minChars="#{empty minChars ? '1' : minChars}"
                                    zindex="#{finalZIndex}"
                                    rendered="#{editable}">
                                   status="#{id}status">
                                <h:outputText value="#{item[displayProperty]}"/>

     <a4j:support event="onselect" ajaxSingle="true" reRender="#{reRender}">
          <f:setPropertyActionListener value="#{item}" target="#{bindTo}"/>
     </a4j:support>
</rich:suggestionbox>

1. Re: How to detach a selected entity after selecting it from rich:suggestionbox?

ilya_shaikovsky Nov 24, 2010 7:34 AM (in response to vkmedi)

using onchange on input for storing the value should be used in common cases. But with suggestion box there is problem that change will be fired when suggestions called as input looses focus. So you should carefull read about workaround there
Actions
2. Re: How to detach a selected entity after selecting it from rich:suggestionbox?

vkmedi Nov 25, 2010 5:45 AM (in response to ilya_shaikovsky)

I went through the workaround but I was unable to solve my problem. I have used the code blocks which you have mentioned in your workaround for testing purpose. Following is the code block after my changes.

<a4j:queue requestDelay="300"/>
<script type="text/javascript">
var suggestionRequestFired=false;
function myFunc(){
if (suggestionRequestFired) {
callAjax();
}
suggestionRequestFired = true;
}
</script>

<a4j:outputPanel id="XXXXX">
<h:inputText style="margin:0px;" id="#{id}_input" value=""
onblur="setTimeout('myFunc()',300);"/>

<rich:suggestionbox height="#{empty height ? '200' : height}"
width="#{empty width ? '300' : width}" id="#{id}"
suggestionAction="#{suggestionService[action]}" var="item"
onselect="if (event.type!='keydown') suggestionRequestFired=false;"
for="#{id}_input"
minChars="#{empty minChars ? '1' : minChars}"
zindex="#{finalZIndex}"
rendered="#{editable}">

<h:outputText value="#{item[displayProperty]}"/>




</rich:suggestionbox>
</a4j:outputPanel>
<a4j:jsFunction name="callAjax" ajaxSingle="true" process="#{fieldId}" reRender="XXXXX"></a4j:jsFunction>

I have commented the <a4j:support event="onselect"...> and the entity is not getting binded at all? All I need is when I select something from the autosuggest the entity should be binded and when I clear the text from the textbox the entity corresponding to the text should be detached?

I am not sure if I am missing something. Please help.
function myFunc(){
if (suggestionRequestFired) {
callAjax();
}
suggestionRequestFired = true;
}
</script>
Actions

Go to original post