How to make a p:commandButton submit a form (JavaScript submit action not called)

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!

score 0 · Accepted Answer · answered May 31 '17 at 10:36

0

add this function in your script.

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

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

answered May 31 '17 at 10:36

cjslv

377
3
15

That's not really DRY. – Jasper de Vries May 31 '17 at 11:06
I am looking for a jsf/ primefaces solutions, if any exist. If don't your answer could be The Solution! – iuginga Jun 01 '17 at 08:10
@lug: One of the aspects of jsf and PrimeFaces is that they generate html. So effectively it **is** a jsf/PrimeFaces solution. – Kukeltje Jun 01 '17 at 08:42
@JasperDeVries: I was thinking about your 'DRY' remark, but for one reason or another all I could come up with was adding a specific class to a component and creating an eventlisterner based on that, but that is almost the same. Any ideas? – Kukeltje Jun 01 '17 at 08:42
@Kukeltje why not bind a click listener to all inputs of type submit? – Jasper de Vries Jun 01 '17 at 08:44
1

@JasperdeVries: Yes, but If you have multiple forms on a page that do different things, then the flag/semaphore might get cleared unrightfully. So explicitly adding it to a commandButton of which you know does the actual 'save' is more explicit. When you wrap all this in your own components, the 'dry' aspect is reduced – Kukeltje Jun 01 '17 at 09:01

score 0 · Answer 2 · answered Jun 01 '17 at 07:46

0

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 :)

answered Jun 01 '17 at 07:46

sofarsoghood

243
2
16

1

Not all of the 'other frameworks' call a 'submit' when using ajax to send values to the server. But you can (as with all html) use an 'onclick' javascript event handler or comparable. So easy to solve that way – Kukeltje Jun 01 '17 at 08:14
@lug another solution could be to use "standard" jsf like: ` ` – sofarsoghood Jun 01 '17 at 08:46

How to make a p:commandButton submit a form (JavaScript submit action not called)

2 Answers2