Cannot close xe:dialog on XPages with client side validation

Question

I have an xe:dialog which includes Dojo Form controls to input several values and create a new document when saved. All values are required and I an using a combination of xe:djValidationTextBox, xe:djTimeTextBox, xe:djComboBox and others to input the values and perform the client-side validation.

Here is an example of one of the input controls:

                    <xe:djValidationTextBox
                        id="djValidationTextBox2" value="#{document3.ChemTo}"
                        required="true" invalidMessage="Must enter the To change number"
                        promptMessage="Enter the To change number">
                        <xe:this.converter>
                            <xp:convertNumber type="number"></xp:convertNumber>
                        </xe:this.converter>
                    </xe:djValidationTextBox>

The save button works great to create the new document after all validation passes.

<xp:button value="Save" id="button7">
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action>
                        <xp:actionGroup>
                            <xp:saveDocument var="document3">
                            </xp:saveDocument>
                            <xp:executeScript>
                                <xp:this.script><![CDATA[#{javascript:var c =  `enter code here`getComponent("dialog1");
 c.hide("panelChemLog");}]]></xp:this.script>
                            </xp:executeScript>
                        </xp:actionGroup>
                    </xp:this.action>
                </xp:eventHandler>
            </xp:button>

The problem is with the Cancel button. I still get the client-side validation messages for all required Dojo input controls without a value when I click the Cancel button. I can successfully cancel the dialog by clicking the big "X" in the top right corner of the dialog, but can't close with the server-side or client-side code for the two cancel buttons below.

   <xp:button value="Cancel CS" id="cancelButton">
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.script><![CDATA[XSP.closeDialog("#{id:dialog1 }" );]]>
          </xp:this.script>
                </xp:eventHandler>
    </xp:button>

            <xp:button value="Cancel SS" id="cancel2Button">
                <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>

How do I code a button to close a dialog and by-pass the client side validation ?

My advice: make a custom code for close button, that sets specific flag (hidden edit, JS variable) used in CS validator to skip validation... — Frantisek Kossuth

Serdar Basegmez Serdar Basegmez · Accepted Answer · 2014-07-23T15:46:48

For the second button (server side), you can disable validation by immediate="true" attribute.

<xp:button
    value="Cancel SS"
    id="cancel2Button">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="complete" immediate="true">
    <xp:this.action><![CDATA[#{javascript:
  var c = getComponent("dialog1");
  c.hide();}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

For client-side, it's interesting. If you hide the dialog by dojo-way, it closes normally. I think it's because of the XSP.closeDialog() method. This function uses setTimeout() for partial-refresh related issues and dojo component cancels the submissions at that time.

So, just use dijit.byId("#{id:dialog1}").hide(); instead of XSP function on the client-side.

Cannot close xe:dialog on XPages with client side validation

2 Answers