XPages form won't save field values if save button is within a xe:dialog

Question

I have a Xpage with two custom controls containing editable fields tied to the single data source on the Xpage. On the Xpage I use a xe:dialog that contains a button to save the data source document1 (using SSJS). No validation is occurring yet. I use a xe:dialogButtonBar to call the xe:dialog (using CSJS) which opens fine and then click the OK button containing Action Save Document data source.

diablogButtonBar onClick call to open dialog.

XSP.openDialog("#{id:dialogSaveAsDraft}");

With this configuration the document is saved but the editable fields are not created nor data saved. The Xpage has the following two properties set, computeWithForm: onsave, action:editDocument but have tried createDocument too.

Here is the twist: If I take the button in the xe:dialog and place it outside the xe:dialog, the button works and the Xpage and all editable fields save properly.

What am I missing? I have done almost exactly the same thing before but instead of using the xe:dialogButtonBar I used a string of buttons. I wanted to use the xe:dialogButton Bar to organize the UI.

Can some one explain why that would occur?

Answer 1

The problem is about the form submission. When you launch the dialog, editable fields on the other parts of the page are not submitted (dialog is launched upon partial refresh). Therefore the back-end component tree is not aware of the field updates of the client-side.

You can either open the dialog from the SSJS (so it submits the page) or create a "noupdate" submission with onComplete script to launch the dialog.

<xp:link
    escape="true"
    text="Open Dialog with SSJS"
    id="link1">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="norefresh"
        action="#{javascript:getComponent('dialogSaveAsDraft').show()}">
    </xp:eventHandler>
</xp:link>
<xp:link
    escape="true"
    text="Open Dialog with onComplete"
    id="link2">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="norefresh"
        onComplete="XSP.openDialog('#{id:dialogSaveAsDraft}');">
    </xp:eventHandler>
</xp:link>