tobias/the_works
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implemented a simple form data loss warning when the user leaves a page (except on pressing an OK button under the form)

Browse Source
This commit is contained in:
eclipse 2025-06-02 17:22:41 +02:00
parent f0b2eb8b0f
commit 6d40c1254a
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
the_works/static/js/datalosswarning.js Normal file
View File

@ -0,0 +1,10 @@
function initDatalosswarning() {
window.addEventListener("beforeunload", event => {
if ( event.explicitOriginalTarget.attributes && event.explicitOriginalTarget.attributes.type.value === "submit" ) {
return;
} else {
event.preventDefault();
event.returnValue = true;
}
});
}

8
the_works/templates/views/text_detail.html
View File

@ -84,7 +84,7 @@ Text bearbeiten
<button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('text.create') }}{% else %}{{ url_for('text.update', id=text['ID']) }}{% endif %}"> <button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('text.create') }}{% else %}{{ url_for('text.update', id=text['ID']) }}{% endif %}">
{% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %} {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
</button> </button>
<button type="reset" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button> <button type="reset" onclick="return confirm('Wirklich zurücksetzen? Alle geänderten Daten gehen dabei verloren.');" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
<a role="button" class="contrast" href="{{ url_for('text.all') }}">Abbrechen (nicht speichern)</a> <a role="button" class="contrast" href="{{ url_for('text.all') }}">Abbrechen (nicht speichern)</a>
</footer> </footer>
</form> </form>
@ -92,7 +92,11 @@ Text bearbeiten
{% block script %} {% block script %}
<script src="{{ url_for('static', filename='js/multiselect.js') }}"></script> <script src="{{ url_for('static', filename='js/multiselect.js') }}"></script>
<script src="{{ url_for('static', filename='js/datalosswarning.js') }}"></script>
<script> <script>
window.onload = () => initAllMultiselects(); window.onload = () => {
initAllMultiselects();
initDatalosswarning();
}
</script> </script>
{% endblock script %} {% endblock script %}

4
the_works/templates/views/werk_detail.html
View File

@ -183,7 +183,7 @@ Werk bearbeiten
<button id="form_submit" type="submit" onclick="return validate_date()" formmethod="post" formaction="{% if create_mode %}{{ url_for('werk.create') }}{% else %}{{ url_for('werk.update', id=werk['ID']) }}{% endif %}"> <button id="form_submit" type="submit" onclick="return validate_date()" formmethod="post" formaction="{% if create_mode %}{{ url_for('werk.create') }}{% else %}{{ url_for('werk.update', id=werk['ID']) }}{% endif %}">
{% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %} {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
</button> </button>
<button type="reset" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button> <button type="reset" onclick="return confirm('Wirklich zurücksetzen? Alle geänderten Daten gehen dabei verloren.');" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
<a role="button" class="contrast" href="{{ url_for('werk.all') }}">Abbrechen (nicht speichern)</a> <a role="button" class="contrast" href="{{ url_for('werk.all') }}">Abbrechen (nicht speichern)</a>
</footer> </footer>
</form> </form>
@ -205,11 +205,13 @@ Werk bearbeiten
<script src="{{ url_for('static', filename='js/imageselect.js') }}"></script> <script src="{{ url_for('static', filename='js/imageselect.js') }}"></script>
<script src="{{ url_for('static', filename='js/imagepreview.js') }}"></script> <script src="{{ url_for('static', filename='js/imagepreview.js') }}"></script>
<script src="{{ url_for('static', filename='js/validate_date.js') }}"></script> <script src="{{ url_for('static', filename='js/validate_date.js') }}"></script>
<script src="{{ url_for('static', filename='js/datalosswarning.js') }}"></script>
<script> <script>
window.onload = () => { window.onload = () => {
initAllMultiselects(); initAllMultiselects();
initImageselect("form_Titelbild_dropdown"); initImageselect("form_Titelbild_dropdown");
initImagepreview("imagepreview-modal"); initImagepreview("imagepreview-modal");
initDatalosswarning();
} }
</script> </script>
{% endblock script %} {% endblock script %}