How to partial refresh multiple controls with select2 enabled listbox on xpage

1
votes

On my XPage I have a listbox control which is Select 2 enabled. When the selected value changes I want to update multiple other controls in my XPage:

<xp:listBox id="listType" value="#{employeeBean.employee.type}">
                    <xp:selectItem itemLabel="Native"></xp:selectItem>
                    <xp:selectItem itemLabel="Expat"></xp:selectItem>
                </xp:listBox>
<xp:scriptBlock id="update">
<xp:this.value><![CDATA[
$(document).ready(
    function(){
        x$("#{id:listType}").select2();
    }
)
$(document).ready(
    function(){
        x$("#{id:listType}").on("change", function(e) {
            XSP.partialRefreshPost("#{id:txtTime}");    
            XSP.partialRefreshPost("#{id:txtTest}");        
        })
    }
)]]></xp:this.value>
</xp:scriptBlock>

Here are the items:

<xp:text escape="true" id="txtTime" value="#{javascript:@Now();}">
                <xp:this.converter>
                    <xp:convertDateTime type="time"></xp:convertDateTime>
                </xp:this.converter>
            </xp:text>
<xp:text escape="true" id="txtTest" value="#{employeeBean.employee.type}">
</xp:text>

I only notice the first item being refreshed. What am I doing wrong?

1
javascriptxpages

1 Answers

4
votes

Use partial refreshes cascaded (start second when first finished): 

XSP.partialRefreshPost("#{id:txtTime}", {
    onComplete: function() {
        XSP.partialRefreshPost("#{id:txtTest}");
    }
});