Xpages: Cannot get partial refresh working in dialog box

Question

Xpage contains a dialog box with two fields. I only want to display the second field for a certain value in the first field. I am trying to use a partial refresh, but I cannot get it to work.

I have tried changing the scope variables to different things, but this doesn't help.

It seems like this should be pretty easy.

Any help would be greatly appreciated.

<?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.beforePageLoad><![CDATA[#{javascript:applicationScope.status                   = ["1 Not Assigned","2 Assigned","3 Being Developed","4 Ready For User Test","5 Ready to Migrate to Production","6 Closed"];
applicationScope.assignedTo             = ["Not Assigned","Tanner Jessee","Vijay Somisetti"];    
applicationScope.assignedTo2            = ["Tanner Jessee","Vijay Somisetti"];
applicationScope.reason                 = ["User Training","System Availability","Configuration/Development Bug","Other"];   
sessionScope.newStatus = "None"
 }]]></xp:this.beforePageLoad>
    <xp:button id="button13" value="Promote"
        style="font-weight:bold;font-size:10pt">

            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:viewScope.status = "2 Assigned"
viewScope.action = "P";
var d = getComponent('dialogAction');
d.show();}]]></xp:this.action>
            </xp:eventHandler>
    </xp:button>    
    <xp:br/>
    <xp:br/>
    <xp:panel id="pnlTicket" style="width:600px"><xe:dialog style="width:600px" id="dialogAction" refreshOnShow="true">
        <xp:div align="center">
            <xp:table style="margin-left:0.0px;margin-right:0.0px;width:560px;margin-top:5.0px;margin-bottom:5.0px" cellpadding="0" cellspacing="10">
                <xp:tr id="tblPromote">
                    <xp:this.rendered><![CDATA[#{javascript:viewScope.action == "P"}]]></xp:this.rendered>
                    <xp:td style="width:100px;float:left" align="left">
                        <xp:label value="Promote to..." id="label4"/>

                    </xp:td>
                    <xp:td style="width:350px;float:right" align="right">
                        <xp:comboBox id="newStatusP" style="width:200px" value="#{sessionScope.newStatus}">
                            <xp:selectItems>
                                <xp:this.value><![CDATA[#{javascript:var curSts:String = viewScope.status
var tmpArr = [];

if (curSts != "6 Complete")

{var stsArr:Array = applicationScope.status;
var nmb = stsArr.indexOf(curSts) + 1;

for (i = nmb; i < 6; i++) { 
    tmpArr.push(stsArr[i])
}
}
tmpArr}]]></xp:this.value>
                            </xp:selectItems>
                            <xp:eventHandler event="onchange"
                                submit="true" refreshMode="partial" refreshId="pnlTicket"/>

                        </xp:comboBox>
                    </xp:td>
                </xp:tr>
                <xp:tr id="tblReasonClosed">
                    <xp:td style="width:100px;float:left" align="left">
                        <xp:label value="Reason Closed..." id="label9"/>                    
                    </xp:td>
                    <xp:td style="width:350px;float:right" align="right">
                        <xp:comboBox id="comboBox6" style="width:200px;float:right" value="#{viewScope.assign}">
                            <xp:this.rendered><![CDATA[#{javascript:viewScope.newStatus == "6 Closed"}]]></xp:this.rendered>
                            <xp:selectItems id="selectItems5">
                                <xp:this.value><![CDATA[#{javascript:applicationScope.reason}]]></xp:this.value>
                            </xp:selectItems>
                        </xp:comboBox>
                    </xp:td>
                </xp:tr>    
            </xp:table>
        </xp:div>
        <xe:dialogButtonBar>
            <xp:button value="OK" id="button21">
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="partial" refreshId="pnlTicket">
                    <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogAction}')]]></xp:this.script>
                    <xp:this.action><![CDATA[#{javascript://Do Stuff}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:button value="Cancel" id="button20">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogAction}')]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
            <xp:text escape="true" id="computedField9" value="#{sessionScope.newStatus}"/>          
        </xe:dialogButtonBar>
    </xe:dialog>
  </xp:panel>

Additions:

Thank, Mike, for your suggestions. I ran across a very interesting blog post by Mark Rodin. He explains the reason why this won't work out of the box, which is essentially that the dialog box is not in the DOM. He has a work around which I want to try soon, but I found a workaround for the current project. My underlying doc is in read mode when the dialog box is called, so I just changed the partial to a complete refresh. Complete overkill? Yes. But it works and I don't notice any speed issues.

I am going to try to get it to work correctly in the future.

Answer 1

You're onchange event is partially refreshing an area outside the dialog. If you refresh an area inside the dialog, you should be fine.