Xpages cannot get getComponent to work in Ext:Dialog

Question

I have an value picker in a dialog box. The user selects a value and that value is entered into an Edit Box, which is bound to a scope variable. So far so good.

I then have a button where I want to ask the access the value that is in the edit box.

I have tried using

var satLoc:String = viewScope.get("selLoc");
var satLoc:String = getComponent("selLoc").getValue();

neither of which works - I just get null.

My code is below. I would appreciate some help.

<?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:button id="button15" style="font-weight:bold;font-size:8pt" value="Load Satellite Dialog">                          
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dialogAddSat">
            <xp:this.action><![CDATA[#{javascript:var d = getComponent('dialogAddSat')d.show()}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>

    <xp:br></xp:br>

    <xe:dialog id="dialogAddSat" style="width:300px">
            <xe:this.title><![CDATA[#{javascript:"Make This Location A Hub"}]]></xe:this.title>
            <xe:dialogButtonBar>
                <xp:table id="tblCrd" style="width:99.0%">
                    <xp:tr>
                        <xp:td>
                            <xp:label id="label24" for="region" value="Hub Location Number" />
                        </xp:td>
                        <xp:td> 
                        <xe:djTextBox id="djTextBox2"
                            style="width:35px;text-align:right">
                            <xe:this.dojoAttributes>
                                <xp:dojoAttribute name="readOnly"
                                    value="true">
                                </xp:dojoAttribute>
                            </xe:this.dojoAttributes>
                            <xe:this.value><![CDATA[#{javascript:"0002"}]]></xe:this.value><xp:eventHandler event="onChange"
                                submit="true" refreshMode="partial" refreshId="tblCrd">
                            </xp:eventHandler>
                        </xe:djTextBox>
                        </xp:td>
                        <xp:td style="text-align:right">

                        <xp:button id="button13" value="Attach Satellite">
                            <xp:eventHandler event="onclick"
                                submit="true" refreshMode="complete" id="eventHandler7"
                                disableValidators="true">
                                <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogMakeHub}');]]></xp:this.script>
                                <xp:this.action>
                                    <xp:actionGroup>
                                        <xp:confirm>
                                    <xp:this.message><![CDATA[#{javascript:try {
    var satLoc:String = viewScope.get("selLoc");
    //var satLoc:String = getComponent("selLoc").getValue();
    var hubLoc = "0002";
    //var hubLoc:String = document1.getDocument().getItemValueString("locNum");
    return "Make Location " + satLoc + " a Satellite for Location Number " + hubLoc
} catch(e){
    return e;
}

}]]></xp:this.message>
                                        </xp:confirm>
                                        <xp:executeScript>
                                            <xp:this.script><![CDATA[#{javascript:print ("Here")}]]></xp:this.script>
                                        </xp:executeScript>
                                    </xp:actionGroup>
                                </xp:this.action>
                            </xp:eventHandler>
                        </xp:button></xp:td>
                    </xp:tr>
                    <xp:tr>
                        <xp:td>
                            <xp:label id="label25" for="region" value="Select Location..." />
                        </xp:td><xp:td>
    <xp:inputText id="selLoc" value="#{viewScope.selLoc}"></xp:inputText>
    <xe:valuePicker id="valuePicker77"
        dialogTitle="Choose A Location To Add As A Satellite"
        pickerIcon="/picker.png" for="selLoc">

        <xe:this.dataProvider>
            <xe:simpleValuePicker>
                <xe:this.valueList><![CDATA[#{javascript:import xpUtilities

var tmpLocView:NotesView = database.getView("(DbLocsOperActiveLOnly)");
var arr = new Array();
var tmpLocNum:String;
var hubLocNum:String;

//hubLocNum = padToFour(document1.getDocument().getItemValueString("locNum"));
hubLocNum = "0002;"
//arr[0] = hublocNum

var tmpLocDoc:NotesDocument = tmpLocView.getFirstDocument();
while (tmpLocDoc != null) {
    tmpLocNum = tmpLocDoc.getItemValueString("locNum");
    if (tmpLocNum != hubLocNum)
    {arr.push(tmpLocDoc.getItemValueString("locNum"));}
    var tmpdoc = tmpLocView.getNextDocument(tmpLocDoc);
    tmpLocDoc.recycle();
    tmpLocDoc = tmpdoc;
}

return arr
}]]></xe:this.valueList>
            </xe:simpleValuePicker>
        </xe:this.dataProvider>
    </xe:valuePicker></xp:td>
                        <xp:td style="text-align:right">

                        <xp:button value="Cancel" id="button10">
                            <xp:eventHandler event="onclick"
                                submit="true" refreshMode="complete" id="eventHandler4">
                                <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogAddSat}')]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:button></xp:td>
                    </xp:tr>
                    <xp:tr>
                        <xp:td>
                        </xp:td>
                        <xp:td>
                        </xp:td>
                        <xp:td style="text-align:right">
                        </xp:td>
                    </xp:tr>
                </xp:table>
            </xe:dialogButtonBar>
        </xe:dialog>
</xp:view>

I have found a solution. I had an action group with a Confirmation Action. I was trying to get the value in the confirmation action. For some reason, it doesn't work there. I just ignore it in the confirmation action and now it work.

Answer 1

The problem is about the timing. On the following code, you compute a confirmation text. But this is being computed at the server side, when it's being rendered. At the time of rendering, the viewScope variable is empty.

<xp:button 
    id="button13" 
    value="Attach Satellite">
    <xp:eventHandler 
        event="onclick"
        submit="true"
        refreshMode="complete"
        id="eventHandler7"
        disableValidators="true">
        <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogMakeHub}');]]></xp:this.script>
        <xp:this.action>
            <xp:actionGroup>
                <xp:confirm>
                    <xp:this.message><![CDATA[#{javascript:try {
var satLoc:String = viewScope.get("selLoc");
//var satLoc:String = getComponent("selLoc").getValue();
var hubLoc = "0002";
//var hubLoc:String = document1.getDocument().getItemValueString("locNum");
return "Make Location " + satLoc + " a Satellite for Location Number " + hubLoc
} catch(e){
return e;
}}]]>
                    </xp:this.message>
                </xp:confirm>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:print ("Here")}]]></xp:this.script>
                </xp:executeScript>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

If you refresh the button component when the input value changes, it will show the correct value. However, I'd prefer computing the value of the confirmation on the client side, in the script attribute. Closing dialog should be the final action (if the user does not confirm the value, it shouldn't be closed. Here is the modified version.

<xp:button
    id="button13"
    value="Attach Satellite">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="complete"
        id="eventHandler7"
        onComplete="XSP.closeDialog('#{id:dialogAddSat}');"
        disableValidators="true">
        <xp:this.action>
            <xp:actionGroup>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:print ("Here")}]]></xp:this.script>
                </xp:executeScript>
            </xp:actionGroup>
        </xp:this.action>
        <xp:this.script><![CDATA[return confirm("Location will be set "+dojo.byId('#{id:selLoc}').value+". Confirm?")]]></xp:this.script>
    </xp:eventHandler>
</xp:button>