Prevent leaving the new and edit report page without saving. close #319

Code inspired by http://stackoverflow.com/a/21061009/1572236

I think this functionality might be interesting for other forms. Maybe we could abstract them in a twig template to reuse the code (with an 'include' declaration) or add this to all form automatically, by customizing the form_start or form_end function ?
This commit is contained in:
Julien Fastré 2014-11-21 10:58:20 +01:00
parent 2eb2214921
commit c169269876
2 changed files with 37 additions and 0 deletions

View File

@ -29,4 +29,23 @@
<button class="sc-button red" type="reset"><i class="fa fa-eraser"></i> {{ 'Reset report'|trans }}</button>
</div>
{{ form_end(edit_form) }}
<script type="text/javascript">
var form = $("form[name='{{ edit_form.vars.form.vars.name }}']").data('serialize',$("form[name='{{ edit_form.vars.form.vars.name }}']").serialize());
// On load save form current state
var submittedOk{{ edit_form.vars.form.vars.name }} = false;
form.bind('submit', function(e) {
submittedOk{{ edit_form.vars.form.vars.name }} = true;
});
$(window).bind('beforeunload', function(e){
if($("form[name='{{ edit_form.vars.form.vars.name }}']").serialize()!=$("form[name='{{ edit_form.vars.form.vars.name }}']").data('serialize')){
if (submittedOk{{ edit_form.vars.form.vars.name }} == false) {
return "{{ 'You are going to leave a page with unsubmitted data. Are you sure you want to leave ?'|trans }}";
}
}
e=null;
// i.e; if form state change show box not.
});
</script>
{% endblock %}

View File

@ -29,4 +29,22 @@
<button class="sc-button red" type="reset"><i class="fa fa-eraser"></i> {{ 'Reset report'|trans }}</button>
</div>
{{ form_end(form) }}
<script type="text/javascript">
var form = $("form[name='{{ form.vars.form.vars.name }}']").data('serialize',$("form[name='{{ form.vars.form.vars.name }}']").serialize());
// On load save form current state
var submittedOk{{ form.vars.form.vars.name }} = false;
form.bind('submit', function(e) {
submittedOk{{ form.vars.form.vars.name }} = true;
});
$(window).bind('beforeunload', function(e){
if($("form[name='{{ form.vars.form.vars.name }}']").serialize()!=$("form[name='{{ form.vars.form.vars.name }}']").data('serialize')){
if (submittedOk{{ form.vars.form.vars.name }} == false) {
return "{{ 'You are going to leave a page with unsubmitted data. Are you sure you want to leave ?'|trans }}";
}
}
e=null;
// i.e; if form state change show box not.
});
</script>
{% endblock %}