OnChange event partial refresh on formRow

Question

Could not find anything helpful on the internet, so:

I've got an OnChange event in a number field which shall update two elements on my page:
- first, a computedField included in a panel for showing a different currency is updated - that's working fine.
- second, next formRow's label (computed dynamically) should be re-computed/updated to show an asterisk if the value in the number field is larger than some value x, asking for some information to explain this exceedance.

I tried to refresh the formRow by the ID I've given to it via the number's field OnChange's OnComplete event,

<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="panelOtherCurrency" disableValidators="true">
  <xp:this.onComplete>
    <![CDATA[XSP.partialRefreshGet("#{id:formRowExceedanceReason}", {});]]>
  </xp:this.onComplete>
</xp:eventHandler>

but I receive the error message "An error occurred while updating some of the page. No element to submit with id ... : formRowExceedanceReason".

So, I found that the formRow's id is not published/known to the HTML code.
As you cannot use panels around formRows in formTables (in my experience, they're simply ignored/not rendered at all), has anybody another way of refreshing this formRow or the formRow's label (inbuilt solution favored)?

Thx in advance!

Answer 1

Seems that the only way to achieve this is to put the formRow which needs to update it's label into another formTable and refresh this via the OnComplete event...

Answer 2

You may be right. I did have some of the same problems when I used formtable/formrows - although I had a repeat control for my rows (I ended up "hand-coding" the rows - and it worked fine).

One thing I would suggest, though, is to try use the id of the formrow as refreshId - just to make sure that the cause of the problem really is related to the id of the formrow. If that works then try to refresh the other field onComplete...

Obviously, another option may be to refresh an id at a "higher" level, e.g. the formtable. This may not be ideal for your application but could also be used as a means of finding out where the problem is.

By the way (just re-reading your question) - you are entirely sure that you have spelled the id correctly? Have you tried to use XSP.partialRefreshPost(...) instead? From what I understand it shouldn't really make a difference in this scenario - but the message just indicates something about "submit..." ;-)

/John

Answer 3

Creating another formTable just to partially update the row's label is not elegant enough. If the label is the only element you need to refresh during the onComplete event, you can omit the label property of the formRow tag and use the label facet instead. There you can assign an id to your label which will be rendered in output HTML markup.

Please consider trying the following:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
    xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xp:panel id="panelOtherCurrency">
        <xp:text value="You entered #{viewScope.field1Value} in numberField" 
            rendered="#{not empty viewScope.field1Value}" />
    </xp:panel>

    <xe:formTable id="formTable1">
        <xe:formRow id="numberRow" label="Number Row">
            <xp:inputText id="numberField" value="#{viewScope.field1Value}">
                <xp:eventHandler event="onchange" submit="true" 
                    refreshMode="partial" refreshId="panelOtherCurrency">
                    <xp:this.onComplete>
                        XSP.partialRefreshGet('#{id:labelExceedanceReason}');
                    </xp:this.onComplete>
                </xp:eventHandler>
            </xp:inputText>
        </xe:formRow>
        <xe:formRow id="formRowExceedanceReason">
            <xp:this.facets>
                <xp:text id="labelExceedanceReason" xp:key="label" 
                    styleClass="control-label" style="font-weight: 700">
                    <xp:this.value>
                        #{viewScope.field1Value gt 100 ? 
                            'You should explain this' : 
                            'It\'s ok, nevermind'
                         }
                    </xp:this.value>
                </xp:text>
            </xp:this.facets>
            <xp:inputText id="inputText2" />
        </xe:formRow>
    </xe:formTable>
</xp:view>