Combobox partial refresh issue

Question

after some down time I'm back again doing some xpages and I already seem to have forgotton to many things. I have the following code:

A datasource:

<xe:objectData var="league" ignoreRequestParams="true" scope="request">
    <xe:this.saveObject><![CDATA[#{javascript:leagueService.set(league)}]]></xe:this.saveObject>
    <xe:this.createObject><![CDATA[#{javascript:return leagueService.get(viewScope.currentKey);}]]></xe:this.createObject>
</xe:objectData>

and a couple of comboboxes

    <xp:comboBox id="idLeagueList" value="#{viewScope.currentKey}">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{javascript: return eu.jeroensomhorst.cms.util.JSFUtil.asSelectItem(leagueService.getAll(season),true);}]]></xp:this.value>
        </xp:selectItems>   
        <xp:eventHandler event="onchange" submit="true" refreshMode="complete"></xp:eventHandler>
    </xp:comboBox>

    <xp:listBox id="lstAvailableTeams">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{javascript:eu.jeroensomhorst.cms.util.JSFUtil.asSelectItem(teamService.getAll());}]]></xp:this.value>
        </xp:selectItems>
    </xp:listBox>

and a button which adds selected teams in the lstAvailableTeams to the selected leage object

    <xp:button value="&#62;" id="addTeam" >
                <xp:eventHandler event="onclick" submit="true" refreshMode="complete" disableValidators="true">
                    <xp:this.action>
                        <xp:actionGroup>
                            <xp:executeScript>
                                <xp:this.script><![CDATA[#{javascript:var teamList = getComponent("lstAvailableTeams");
    var strTeamKey = teamList.getValue();
    eu.jeroensomhorst.cms.util.LeagueUtil.addTeam(league.getKey(),strTeamKey);}]]></xp:this.script>
                            </xp:executeScript>
                        </xp:actionGroup>
                    </xp:this.action></xp:eventHandler></xp:button>

    <xp:listBox id="leagueTeams">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:return eu.jeroensomhorst.cms.util.JSFUtil.asSelectItem(league.getTeams());}]]></xp:this.value>
            </xp:selectItems>
    </xp:listBox>

the code of the leagueutil looks like this:

public static void addTeam(String leagueKey,String key){
    LeagueService lService = (LeagueService) DominoUtil.getVariableValue("leagueService");

    League l = (League) lService.get(leagueKey);
    TeamService service = (TeamService) DominoUtil.getVariableValue("teamService");
    Team t = service.get(key);
    Vector<Team> teams = l.getTeams();
    if(teams == null){
        teams = new Vector();
        teams.add(t);
    }else{
        if(!teams.contains(t)){
            teams.add(t);
        }
    }

    l.setTeams(teams);
    // save into database.. this works.
    lService.set(l);

}

as you can see nothing to fancy. But the problem is as followes. Whenever I do a change of the idLeagueList combobox values and execute the changelistener (it updates the viewscope ). It always retrieves the previous values which are displayed in the leagueteams combobox. It is a really basic question but I'm totally out of options..

Answer 1

createObject of objectData gets executed too early: before the restore view phase is completed. This way objectData gets the old value from viewScope.currentKey.

createObject:           viewScope.currentKey = old value
afterRestoreView:       viewScope.currentKey = old value
beforeRenderResponse:   viewScope.currentKey = new value

A possible way to solve your issue is to use a view scope variable for league object instead. You can set it in beforePageLoad and beforeRenderResponse events.

viewScope.league = leagueService.get(viewScope.currentKey)

and use it in listBox

... eu.jeroensomhorst.cms.util.JSFUtil.asSelectItem(viewScope.league.getTeams())

and button code

... eu.jeroensomhorst.cms.util.LeagueUtil.addTeam(viewScope.league.getKey(),strTeamKey)

Here is a short version of your code for test purposes. It shows the current value of viewScope.currentKey at several JSF phases with print statements:

<?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:this.afterRestoreView><![CDATA[#{javascript:print ("afterRestoreView: " + viewScope.currentKey)}]]></xp:this.afterRestoreView>
    <xp:this.beforeRenderResponse><![CDATA[#{javascript:print ("beforeRenderResponse: " + viewScope.currentKey)}]]></xp:this.beforeRenderResponse>
    <xp:this.afterRenderResponse><![CDATA[#{javascript:print ("afterRenderResponse: " + viewScope.currentKey)}]]></xp:this.afterRenderResponse>
    <xp:this.data>
        <xe:objectData
            var="league"
            ignoreRequestParams="true"
            scope="request">
            <xe:this.createObject><![CDATA[#{javascript:
                if (viewScope.currentKey == null) viewScope.currentKey = "aaa"; 
                print("createObject: " + viewScope.currentKey); 
                viewScope.currentKey}]]>
            </xe:this.createObject>
        </xe:objectData>
    </xp:this.data>
    <xp:comboBox
        id="idLeagueList"
        value="#{viewScope.currentKey}">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{javascript: return ["aaa","bbb"];}]]></xp:this.value>
        </xp:selectItems>
        <xp:eventHandler
            event="onchange"
            submit="true"
            refreshMode="complete">
        </xp:eventHandler>
    </xp:comboBox>
    <xp:listBox
        id="leagueTeams">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{javascript:
                print("listBox: league = " + league + " viewScope.currentKey=" + viewScope.currentKey); 
                if (league === "aaa") return ["aaa1","aaa2"]; else return ["bbb1","bbb2"]}]]>
            </xp:this.value>
        </xp:selectItems>
    </xp:listBox>
</xp:view>