Unable to update parent window from modalPanel

[sam-user]

Hello,

I have a page with couple of input fields. For one of the fields(say FLD1) I need to perform additional searches(lookup). If I find 1 match I need to populate some of the other fields (say FLD2 and FLD3) with the values returned from the search. If more than one matches are found I need to open a modal panel and allow the user to select an item. That triggers one more search and the result should update the same fields (FLD2 and FLD3) on the parent panel.

I was able to implement the searches and the modalPanel, but I cannot make the modalPanel update the parent with the results of the second search.

Here is a what I have :

My main page contains this

...
<a:region id="locRegion">
 <s:decorate id="alLocaField" template="layout/edit.xhtml">
 <ui:define name="label">Loca</ui:define>
 <h:inputText id="alLoca" value="#{alHome.instance.alLoca}" >
 <a:support event="onblur" reRender="alLoca" eventsQueue="locLookup"/>
 </h:inputText>

 <a:commandButton value="SRequest" image="img/search.GIF" ajaxSingle="true" eventsQueue="locLookup"
 id="searchImg" action="#{LocaSearch.search}" reRender="LocaPickList"
 oncomplete="alert('Search returns #{!LocaSearch.found}');
 if (#{!LocaSearch.found})
{
 Richfaces.showModalPanel('locaPickList');
}
else
{
 updLoc('#{LocaSearch.locCD.GU}','#{LocaSearch.locCD.MR}');
}" >
 <a:support event="onclick" reRender="alLoca" eventsQueue="locLookup"/>
 <a:actionparam name="alLoca" value="#{alHome.instance.alLoca}" assignTo="#{LocaSearch.locSearchString}" />
 </a:commandButton>
 <a:jsFunction name="updLoc" reRender="alDetailsPanel" >
 <a:actionparam name="param1" assignTo="#{alHome.instance.alGU}" />
 <a:actionparam name="param2" assignTo="#{alHome.instance.alMR}" />
 </a:jsFunction>
 </s:decorate>

 <s:decorate id="alGUField" template="layout/edit.xhtml">
 <ui:define name="label">GU</ui:define>
 <h:inputText id="alGU" value="#{alHome.instance.alGU}">
 <a:support event="onblur" reRender="alGUField" bypassUpdates="true" ajaxSingle="true"/>
 </h:inputText>
 </s:decorate>

 <s:decorate id="alMRField" template="layout/edit.xhtml">
 <ui:define name="label">MR</ui:define>
 <h:inputText id="alMR" value="#{alHome.instance.alMR}">
 <a:support event="onblur" reRender="alMRField" bypassUpdates="true" ajaxSingle="true"/>
 </h:inputText>
 </s:decorate>
</a:region>

....

<f:subview xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <a:outputPanel id="pickListPanel" layout="none">

 <rich:modalPanel id="locaPickList" >
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="Loca Search Result"/>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/>
 <rich:componentControl for="locaPickList" attachTo="hidelink" operation="hide" event="onclick"/>
 </h:panelGroup>
 </f:facet>
 <ui:include src="LocaSearchResult.xhtml" />
 </rich:modalPanel>
 </a:outputPanel>
</f:subview>

My LocaSearchResult.xhtml contains the following

<rich:panel >

<h:form>
<rich:dataTable id="pl" var="_pl" value="#{pickList}" >
 <h:column>
 <f:facet name="header">
 <h:outputText value="Criteria"/>
 </f:facet>
 <h:outputText value="#{_pl.criteria}"/><br/>
 </h:column>
 <h:column >
 <f:facet name="header">
 <h:outputText value="Description"/>
 </f:facet>
 <h:outputText value="#{_pl.description}"/><br/>
 </h:column>
 <h:column >
 <a:commandButton value="Select" action="#{locaSearch.search}"
 ajaxSingle="true" reRender="alDetailsPanel"
 oncomplete="if (#{locationSearch.found})
{
alert('Found:' +#{locationSearch.locCD.GU}');
updLocP('#{locationSearch.locCD.GU}','#{locationSearch.locCD.MR}');
}" >
 <a:actionparam name="alLocation" value="#{_pl.criteria}"
assignTo="#{alHome.instance.alLocation}" />
 </a:commandButton>
 <a:jsFunction name="updLocP" reRender="alDetailsPanel"
 oncomplete="alert('js:'+'#{locationSearch.locCD.GU}');
 alert('js1:' + param1);
 Richfaces.hideModalPanel('locationPickList');" >

<a:actionparam name="param1" assignTo="#{alHome.instance.alGU}" />
 <a:actionparam name="param2" assignTo="#{alHome.instance.alMR}" />
 </a:jsFunction>
 </h:column>
</rich:dataTable>

</h:form>

</div>
</rich:panel>

I put some alerts to check what values do I get and I got a strange result.
The first alert says: "Found xxxxx" and this is what I would expect.
The second alert says: "js:". So the value of locationSearch.locCD.GU is null and I don't understand why.
The third alert says: "js1:xxxxx". Again the result I would expect.

The two fields of the main form, though, remain blank.

Could someone please give me a hint what am I doing wrong. Why aren't the two fields updated appropriately?
Thanks in advance.

[ilya_shaikovsky]

... I completelly lost in your code. Seems you need seriously simplify it. At first you using a:support on onclick inside a:button. This rises two concurrent requests. Then you call jsFunction on complete and this causes the third request.. this is real overload which will works even slower than if you remove ajax at all :)

As the simple example of successfull update of the page you could chekc richfaces-demo dataTable page (Edit Table with Modal) sample.

[sam-user]

Thanks for the reply.
I agree that the a:support on click is unnecessary, I think I added it in an atempt to ensure that the reRender happens. I removed that but it didn't change the result.

My command button now look like this :

<a:commandButton value="SRequest" image="img/search.GIF" ajaxSingle="true" eventsQueue="locLookup"
 id="searchImg" action="#{LocaSearch.search}" reRender="LocaPickList"
 oncomplete="alert('Search returns #{!LocaSearch.found}');
 if (#{!LocaSearch.found})
{
 Richfaces.showModalPanel('locaPickList');
}
else
{
 updLoc('#{LocaSearch.locCD.GU}','#{LocaSearch.locCD.MR}');
}" >
 <a:support event="onclick" reRender="alLoca" eventsQueue="locLookup"/>
 <a:actionparam name="alLoca" value="#{alHome.instance.alLoca}" assignTo="#{LocaSearch.locSearchString}" />
 </a:commandButton>

I'll try to explain better what I am trying to do with the code below.
In my Loca field I type a text and I click the SRequest button. That uses the value of the typed text( alHome.instance.alLoca ) to perform a search. If the search finds a single match it calls the updLoc jsFunction that sets the values of fields alHome.instance.alGU and alHome.instance.alMR. The area containing these two fields is then rerendered.This part works fine.

If, however, the search finds more than one match a modalPanel is opened and all matches are shown( this code is in LocaSearchResult.xhtml).The user clicks on the Select button of the appropriate row. That fires another search which now returns only one match. Up until now everything works as I expect it.
Again I call a jsFunction (in this case updLocP) which should set alHome.instance.alGU and alHome.instance.alMR to the approapriate values. This is the part that does not work. The alert that has a prefix of js prints blank (which to me means that the property has not been changed) and the fields on the main window remain unchanged.

I had a look at the example with the dataTable, but I can't see any fundamental diference to what I am doing.

The problem to me is the jsFunction updLocP, but I can't work out why it doesn't work the way I expect it.

[sam-user]

I found a workaround to my problem, which is to set the values of the two properties directly in the action bean.
I still would like to know why the jsFunction updLocP didn't work, though.
Any explanation would be very welcome.
Thanks.

[ilya_shaikovsky]

I'm still wondering why you need to fire second request on oncomplete with jsFunction after commandButton request complete.