rich:suggestionbox being destroyed after a4j:support action

[james_hays]

In the following code, I have three input fields of interest. The first dropdown implements a4j:support and rerenders a second dropdrown in order to populate it with current values.

 <label>SBU:
 <h:selectOneMenu value="#{strategicUnit}">
 <s:selectItems value="#{strategicUnits}" var="strategicUnit"
 label="#{strategicUnit.title}" noSelectionLabel="-- None --"/>
 <ec:convertEntity />
 <a4j:support onsubmit="toggleStatusBar('Processing Strategic Unit Number')"
 oncomplete="toggleStatusBar('Task Complete', 2000)" event="onchange"
 ajaxSingle="true" reRender="idNumber"/>
 </h:selectOneMenu>
 </label>

 <label>Identification No.:
 <h:selectOneMenu id="idNumber" value="#{profileRecord.workAuthorization}"
 style="width:200px;">
 <s:selectItems value="#{newProfileRecord.workAuthorizations}" disabled="#{workAuthorization.activeFlag eq 'F'}"
 var="workAuthorization"
 label="#{workAuthorization.projId} - #{workAuthorization.projectName}"
 noSelectionLabel="-- None --"/>
 <ec:convertEntity/>
 <a4j:support onsubmit="toggleStatusBar('Processing WA Number')"
 oncomplete="toggleStatusBar('Task Complete', 2000)" event="onchange"
 ajaxSingle="true" limitToList="true" reRender="programName,projectManager,programManager"
 action="#{newProfileRecord.setProfileRecordManagers}"/>
 </h:selectOneMenu>
 </label>

This second dropdown will then call an action on my listener and update a few fields. It then rerenders three items on my web form, an output text and two textInputs, which also utilize the rich:suggestionbox

<label>Program Manager: </label>
 <h:inputText id="programManager" value="#{profileRecord.programManager.fullName}"/>
 <rich:suggestionbox for="programManager"
 suggestionAction="#{newProfileRecord.autoCompleteUsers}"
 var="user" width="200" height="200">
 <h:column>
 <h:outputText value="#{user.fullName}"/>
 </h:column>
 </rich:suggestionbox>

What I'm running into is that the suggestBox no longer works after the input has been updated by the second dropdown box. If I use the suggestbox before I make any value changes to the dropdown, it works fine. It only stops working after I first use the dropdowns and the input value has been recreated.

Am I missing something in terms of using a4j or richfaces?
Any help would be appreciated.

Thanks,

James

[james_hays]

After looking a bit more, here's what I'm finding in the HTML. When suggestionbox works, my html looks like this:

<td><label>Program Manager: </label><input id="_id24:programManager" name="_id24:programManager" type="text" value=""/>

<div id="_id24:_id46" class="dr-sb-common-container rich-sb-common-container"
 style="display:none;z-index:100;width:200px;height:200px;">
 <div class="dr-sb-ext-decor-1 rich-sb-ext-decor-1">
 <div class="dr-sb-ext-decor-2 rich-sb-ext-decor-2" style=";; border-width: null null null null ;">
 <table border="0" cellpadding="0" cellspacing="1" class="dr-sb-ext-decor-3 rich-sb-ext-decor-3">
 <tbody>
 <tr>
 <td>
 <div class="_suggestion_size_ dr-sb-overflow rich-sb-overflow"
 style="width:196px;height:196px;">
 <table border="0" id="_id24:_id46:suggest">
 <tbody></tbody>
 </table>
 </div>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <div class="dr-sb-shadow rich-sb-shadow" style="opacity:0.1; filter:alpha(opacity=10);top: 4; left: 4"></div>
 <script><!--
 new Exadel.Suggestion('_viewRoot', '_id24', '_id24:programManager', '_id24:_id46', {'eventsQueue':'_id24:_id46','entryClass':'richfaces_suggestionEntry','parameters':{'_id24:_id46':'_id24:_id46'},'rows':0,'width':'200','actionUrl':'/LCGM/newProfileRecord.seam','height':'200','popup':'_id24:_id46','frequency':4.9E-324,'param':'inputvalue','single':true});

 //--></script>
</div>
<iframe src="/LCGM/a4j.res/org/richfaces/renderkit/html/images/spacer.gif.seam" id="_id24:_id46_iframe"
 style="position:absolute;display:none;z-index:0;"></iframe>

</td>

After I use the second dropdown box, which populates my textinput via ajax, the entire outer div tag is gone, but the iFrame remains.

Apparently, it is being lost when the response from ajax returns and rerenders that input field. Is there a way to fix this? Am I simply missing a concept of a4j?

Thanks,

[sergeysmirnov]

When you say the suggestionBox does not work, do you mean the Ajax request is not sent when you type OR the #{newProfileRecord.autoCompleteUsers} is not invoked OR the box does not appear when the Ajax response return back. I just want to understand where is a starting point of "no longer works"

[james_hays]

"SergeySmirnov" wrote:
When you say the suggestionBox does not work, do you mean the Ajax request is not sent when you type OR the #{newProfileRecord.autoCompleteUsers} is not invoked OR the box does not appear when the Ajax response return back. I just want to understand where is a starting point of "no longer works"

All of the above. It acts like a normal text input field.

Thanks.

[sergeysmirnov]

Ok. Let's start from another question. Do you use FireFox with FireBugs extention?

[james_hays]

I do use FireFox, but have not used FireBugs. I'll pull it down and start working with it. It looks like a nice tool. Let me know what you would like to see, and I'll try to provide it.

Thanks,

James

[sergeysmirnov]

Open Console tab there. When you load the page and change value in the dropdown box, the console should show the ajax POST. Check the value in the second box and then start typing in the field with suggestionBox. You say that it does not work in this moment. So, my question: does the POST appear in the Console or not?

[james_hays]

"SergeySmirnov" wrote:
Open Console tab there. When you load the page and change value in the dropdown box, the console should show the ajax POST. Check the value in the second box and then start typing in the field with suggestionBox. You say that it does not work in this moment. So, my question: does the POST appear in the Console or not?

When I change the value in the dropdown and then type in the suggestionbox, there is no post.

It appears as though when the dropdown selection change fires off the ajax post and the suggestionbox/inputTextField is rerendered, it looses it's notion of being a suggestionbox.

BTW, Firebug is awesome.

[james_hays]

After looking some more, I cannot verify that the div tag is no longer present.

I'm working in Firefox and when I view source it is always there. When I look in the dom inspector, it appears gone.

[sergeysmirnov]

Ok. Now, I see the source of the problem.
the suggestionBox binds to the input element in the DOM. However, selecting the value in the second dropdown box you re-Render this input. On the DOM level, it means that the previous element is removed, but new one is inserted.
As soon as you did not re-render the suggestionBox itself, it still points to the non-existing element.

So, add the id for suggestionBox and add this id in the reRender where you have the inputText component id.
As an alternative, you can wrap up the input and the suggestion box with some other component and point to this wrapper component id.
In any case, the pair should be rendered synchronously.

[james_hays]

Ok. Your first suggestion of adding an id to the suggestionbox and the rerender list worked create. See Code Below:

<label>Program Manager: </label>
 <h:inputText id="programManager" value="#{profileRecord.programManager.fullName}"/>
 <rich:suggestionbox id="s_programManager" for="programManager"
 suggestionAction="#{newProfileRecord.autoCompleteUsers}"
 var="user" width="200" height="200">
 <h:column>
 <h:outputText value="#{user.fullName}"/>
 </h:column>
 </rich:suggestionbox>

But, your second suggestion, which I think is cleaner, did not work. I've attached that code below as well.

<span id="programManager">
 <label>Program Manager: </label>
 <h:inputText id="i_programManager" value="#{profileRecord.programManager.fullName}"/>
 <rich:suggestionbox for="i_programManager"
 suggestionAction="#{newProfileRecord.autoCompleteUsers}"
 var="user" width="200" height="200">
 <h:column>
 <h:outputText value="#{user.fullName}"/>
 </h:column>
 </rich:suggestionbox>
 </span>

So, with this wrapper, the suggestionBox always works, but the dropdown will not rerender the entire span tag, which includes the inputText and suggestionbox.

Did I misunderstand your use of the wrapping these two items in another component?

[sergeysmirnov]

oh, no. You cannot point to the pure html tag id. It should be only the JSF component id. I.e. for example,
<h:panelGroup id="foo"> for SPAN
or
<h:panelGroup id="foo" style="layout:block"> for DIV

[james_hays]

Oops.

changing my span tag to a <h:panelGroup works great!

Thanks.