Search code examples
jquerydialogxpages

Change component value when dialog is cancel on a xpage


I have a radio group which has two values "OK"(default) and "Log". When the value "Log" is checked this opens a extlib dialog. What I want is a method to set the radio group value back to "Ok" if the dialog box is cancel. The radio group is in Custom control which is inside a repeat which is where the difficulty comes in. The dialog is used to save a separate document from the calling xpage. This concept works when mock-up with a single radio group using jquery to set the value back to "Ok", but I cannot get the correct component id from with the repeat.

Thanks

<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:this.data>
        <xp:dominoDocument
            var="document1"
            formName="frRegion">
        </xp:dominoDocument>
    </xp:this.data>
    <xp:this.resources>
        <xp:script
            src="js/jquery-3.1.1.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="/dynFields.css"></xp:styleSheet>
    </xp:this.resources>
    &#160;
    <xp:br>
    <p>TEST This</p></xp:br>
    <xp:inputText id="inputText1" value="#{document1.fRegion}"></xp:inputText>
    <xp:br></xp:br>
    <xp:repeat
        var="rownum"
        indexVar="rowIndex">
        <xp:this.value><![CDATA[#{javascript:[1,2]}]]></xp:this.value>
        <xc:ccDynRadioGroup
            dialogEnable="true"
            dataSource="#{javascript:document1}"
            defaultValue="Ok">
            <xc:this.selectItems><![CDATA[#{javascript:"Ok|Ok,Log|Log"}]]></xc:this.selectItems>
            <xc:this.fieldName><![CDATA[#{javascript:"C_"+rownum

}]]></xc:this.fieldName>
        </xc:ccDynRadioGroup>
    </xp:repeat>    
    <xp:br></xp:br>


    <xe:dialog id="dialog1">
        <xe:this.dojoAttributes>
            <xp:dojoAttribute
                name="disableCloseButton"
                value="false">
            </xp:dojoAttribute>
        </xe:this.dojoAttributes>
        <xp:panel>
            <xp:table>
                <xp:tr>
                    <xp:td>
                        <xp:label
                            value="TEST"
                            id="label1">
                        </xp:label>
                    </xp:td>
                    <xp:td></xp:td>
                </xp:tr>
                <xp:tr>
                    <xp:td>
                        <xp:button
                            value="DummySave"
                            id="button1">
                            <xp:eventHandler
                                event="onclick"
                                submit="true"
                                refreshMode="complete">
                                <xp:this.action><![CDATA[#{javascript:var  c = getComponent("dialog1");
c.hide();}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:button>
                    </xp:td>
                    <xp:td>
                        <xp:button
                            value="Cancel"
                            id="button2">
                            <xp:eventHandler
                                event="onclick"
                                submit="false">
                                <xp:this.script><![CDATA[var v =  "dialog1"
if(v == "dialog1"){
    XSP.closeDialog("#{id:dialog1}");
    $(xId("#{id:rg_Insp}")+".RadioGroupD"+" [value=Ok]").prop("checked",true);  
}

function x$(idTag, param){ //Updated 18 Feb 2012
   idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
   return($("#"+idTag));
}

function xId(id){
 id = id.replace(/:/gi, "\\:");
 return "#"+id;
}]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:button>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:panel>
        <xp:eventHandler
            event="onClose"
            submit="false">
            <xe:this.script><![CDATA[//$(xId("#{id:rg_Insp}")+".RadioGroupD"+" [value=Ok]").prop("checked",true);]]></xe:this.script>
        </xp:eventHandler>
    </xe:dialog>

    </xp:view>

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:radioGroup
        id="rg_Insp"
        value="#{compositeData.dataSource[compositeData.fieldName]}"
        styleClass="RadioGroupD" defaultValue="#{javascript:compositeData.defaultValue}">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{javascript:@Explode(compositeData.selectItems,",")}]]></xp:this.value>
        </xp:selectItems>
        <xp:eventHandler
            event="onchange"
            submit="true"
            refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript:if(compositeData.dialogEnable){
    var v:string = getComponent("rg_Insp").getValue();
    if(v.equalsIgnoreCase("Log")){
        var d = getComponent("dialog1");
        d.show();
    }
}}]]></xp:this.action>
        </xp:eventHandler>
    </xp:radioGroup>
</xp:view>

Solution

  • Try putting the dialog within the repeat so the when you compute the id the dialog will be in the same 'naming container'

    You might think 'I don't want to create a thousand dialogs' but don't worry, as long as you don't set repeatControls="true" in your repeat, there is still only one dialog but is now aware of the current iteration of the repeat so should choose the correct id of the current radio group