Orbeon xforms window.onbeforeunload handler

Question

When somebody clicks out of an xform I want to achieve the apperance of a custom alert dialog.(Not the one that the browser uses) that alerts the user and gives him the opportunity to choose if he wants to stay or leave the xforms (cancel/ok buttons) Here is my trick:

<xf:action ev:event="xforms-ready">
<xxf:script>

window.onbeforeunload = function() {
return  ORBEON.xforms.Document.dispatchEvent('fr-form-model','clickout') 
                    } 
</xxf:script>
</xf:action>

here is my model and event handler:

<xf:model id="fr-form-model" xxf:expose-xpath-types="true" xxf:external-events="clickout">

<xf:action ev:event="clickout">
<xf:dispatch target="cancel_dialog" name="fr-show"/>
</xf:action>

The dialog appears correctly but it doesn't stay there to give the user the oportunity to choose what to do. After 1-2 seconds the Xform is closed,and the user cannot choose leave or stay.Any idea what's the problem?

............................. UPDATE...................................

Thnx for the answer, at least is there a possibility to use a custom message to the default dialog? (I want the message to be in german language)

Based on this, http://wiki.orbeon.com/forms/how-to/logic/alert-users-leaving-a-form-without-saving

I made this trick:

<xxf:script ev:event="xforms-ready">
                window.onbeforeunload = function() {
                    if (ORBEON.xforms.Document.getValue('datastatus') == 'dirty')
                    return "Sie haben nicht gespeicherte Änderungen.";
                    }
            </xxf:script>

Above in the model...:

1)

<xf:bind id="data-bind" ref="xxf:instance('fr-persistence-instance')/data-status" name="data"  />

2)

xf:action ev:event="xforms-model-construct-done" >
                <xf:setvalue ref="xxf:instance('fr-persistence-instance')/data-status">clean</xf:setvalue>
            </xf:action>

In the view:

 <xf:setvalue ev:event="xforms-value-changed" ref="xxf:instance('fr-persistence-instance')/data-status">dirty</xf:setvalue>

.................................

<xf:output bind="data-bind" id="datastatus" />      

In the Ui i can see that the value of the output "datastatus",changes correctly from clean to dirty,but window.onbeforeunload doesn't work.(The popup doesn't appear if I exit the form).Any ideas?Thnx in advance.

.................................LAST UPDATE................................. There is one cancel button,(that exits the form) and the customer wants this button to trigger the same dialog as the windows.onbeforenull default handler triggers (if there are unsaved changes) and I mean the one that the browser shows.

I tried to to something like this:

<xf:trigger id="cancel-control" bind="cancel-bind">
                                <xf:label ref="$form-resources/cancel/label" />
                                <xf:action ev:event="DOMActivate"  >

                                    <xxf:script if="($calculationsDisabled eq false()) and ((xxf:instance('fr-persistence-instance')/data-status = 'dirty'))">
                                        function() {return "You may lose some unsaved changes.";}
                                    </xxf:script>

                                <xxf:script if="($calculationsDisabled eq true()) or ((xxf:instance('fr-persistence-instance')/data-status = 'clean'))">
                                window.parent.closeIframe();
                                </xxf:script>

                                </xf:action>

                            </xf:trigger>

but it doesn't work too.Please notice that the custom dialog method below:

<xf:trigger id="cancel-control" bind="cancel-bind">
                                    <xf:label ref="$form-resources/cancel/label" />
                                    <xf:action ev:event="DOMActivate">
                                        <xf:dispatch target="cancel_dialog" name="fr-show"
                                            if="($calculationsDisabled eq false()) and ((xxf:instance('fr-persistence-instance')/data-status = 'dirty'))" />
                                    </xf:action>

                                    <xf:action ev:event="DOMActivate" if="($calculationsDisabled eq true()) or ((xxf:instance('fr-persistence-instance')/data-status = 'clean'))"  >
                                        <xxf:script>window.parent.closeIframe();</xxf:script>
                                    </xf:action>
                                </xf:trigger>

works well but the customer doesn't want to have 2 different dialog windows(The alert dialog by the browser and the custom "cancel-dialog").Thnx in advance again.

Answer 1

In this case, you can't use your own dialog. This is because the browser will only stop another page from being loaded, or the tab/window from being closed if your onbeforeunload returns anything other than null or undefined, and when that happens it will show users its own dialog.