如何使ap：commandButton提交表单（未调用JavaScript提交操作）

Question

I am developping several GUIs using primefaces and I would like to warn the user before leaving the website. I found a perfectly working solution here: How to detect unsaved data in form when user leaves the page? Here's the JavaScript code I am using (found in the link)

$(function() {
    // Set the unload message whenever any input element get changed.
    $(':input').on('change', function() {
        setConfirmUnload(true);
    });

    // Turn off the unload message whenever a form get submitted properly.
    $('form').on('submit', function() {
        alert('I am here');
        setConfirmUnload(false);
    });
});

function setConfirmUnload(on) {
    var message = "You have unsaved data. Are you sure to leave the page?";
    window.onbeforeunload = (on) ? function() {
        return message;
    } : null;
}

My problem is that my primefaces save button is ajax and doesn't call the 'submit' action. And the user will be alerted that he is leaving the website also after saving the page. The code of the commandButton is the following:

<p:commandButton value="save" id="saveButton" validateClient="true" actionListener="#{myView.save}" update="description name" style="float:right">     </p:commandButton>

I tried to add an "execute form" in a ajax call:

<p:commandButton value="save" id="saveButton" validateClient="true" actionListener="#{myView.save}" update="description name" style="float:right">
<p:ajax execute="@form"> 
</p:commandButton>

but it also did not work. If the button is set as $ajax="false"$ everything works fine, but I would like to avoid it. Can anyone help? Thanks a lot!

Answer 1

add this function in your script.

function save(){
    alert('I am here');
    setConfirmUnload(true);
}

and insert onclick="save();" in your commandButton

Answer 2

Isn't it possible to give your button the additional attribute type="submit"? Don't know if that works in primefaces, works in other frameworks though :)