csjs onclick event refreshes my xpage

Question

On an xpage I have a dialog which I want to open from csjs.

In the DDE KC it is explained as followed: https://www.ibm.com/support/knowledgecenter/SSVRGU_9.0.0/com.ibm.designer.domino.ui.doc/extlib_controlref_dialog.html

So I added two buttons. One HTML and one Button control:

<button onclick="openDlgAction('1')">Open Dialog</button>
<xp:button value="Open Dialog" id="button4">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[XSP.openDialog("#{id:dlgAction}")]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

Here is how my dialog is rendered:

<span id="view:_id1:_id2:cbMain:dlgAction" style="display: none" title="Select Action"></span>

In order to generate the correct ID in my openDlgAction CSJS function I added it to the Xpage via a script block.

Here is how it is rendered in the browser:

<script type="text/javascript">
function openDlgAction(unid){
    XSP.openDialog("view:_id1:_id2:cbMain:dlgAction")
}
</script>

The function under the Button control is rendered as followed:

function view__id1__id2_cbMain__id319_clientSide_onclick(thisEvent) {
XSP.openDialog("view:_id1:_id2:cbMain:dlgAction")
}

What I do not understand is why the Button control works (dialog appears) and under the HTML button the page refreshes quickly.

Out of curiosity I added another HTML button with an onclick event which also refreshed the xpage:

<button onclick="alert('hi')">click me</button>

What am i overlooking?

Answer 1

The page reloads when you click the "html buttons" because the buttons do not specify a button type. It's therefore interpreted as a submit button.

So set the button type to 'button':

<button type='button' onclick="openDlgAction('1')">Open Dialog</button>