From 7f35a647303c4ce46213292e8abb8132ab27f1c7 Mon Sep 17 00:00:00 2001 From: Samuel Williams Date: Sun, 21 Jul 2024 20:32:53 +0100 Subject: [PATCH 1/2] Fix JS elements regression in modal windows In #2407 we removed some seemingly-duplicate network requests for `bs4_modal.js` every time a modal window is loaded. This would have been fine if that file didn't not include any side-effects, but it did: it re-applied 'global styling' every time the JS file is loaded. The goal here was to process 'styling' for any dynamica/interactive elements, such as map widgets, and fields that use 'select2' or 'x-editable'. When we removed these 'extra' JS calls, the modal windows stopped getting these interactive elements enabled/setup. This patch restores that functionality, while still retaining the goal of PR #2407: to prevent duplicate network requests for a file. We load `bs_modal.js` on all pages that can display modals; this file now only sets up the event listener that is responsible for making sure a modal is cleared out/refreshed between multiple modal displays. The logic for applying styling to the window is now added inline to all of the relevant modal components. A further improvement on what we had before is that now, the call to add styling is scoped specifically to the modal. This prevents the issue described in #2351, where map elements may show up multiple times on the page because `applyGlobalStyles` is called multiple times. --- flask_admin/static/admin/js/bs2_modal.js | 13 +-- flask_admin/static/admin/js/bs3_modal.js | 13 +-- flask_admin/static/admin/js/bs4_modal.js | 5 -- .../templates/bootstrap2/admin/file/list.html | 1 + .../bootstrap2/admin/model/list.html | 1 + .../bootstrap2/admin/model/modals/create.html | 2 +- .../admin/model/modals/details.html | 80 +++++++++---------- .../bootstrap2/admin/model/modals/edit.html | 2 +- .../templates/bootstrap3/admin/file/list.html | 1 + .../bootstrap3/admin/model/list.html | 1 + .../bootstrap3/admin/model/modals/create.html | 2 +- .../admin/model/modals/details.html | 80 +++++++++---------- .../bootstrap3/admin/model/modals/edit.html | 2 +- .../bootstrap4/admin/model/modals/create.html | 4 + .../admin/model/modals/details.html | 3 +- .../bootstrap4/admin/model/modals/edit.html | 3 + 16 files changed, 105 insertions(+), 108 deletions(-) diff --git a/flask_admin/static/admin/js/bs2_modal.js b/flask_admin/static/admin/js/bs2_modal.js index 6a3b5f2bc..0174a8dc4 100755 --- a/flask_admin/static/admin/js/bs2_modal.js +++ b/flask_admin/static/admin/js/bs2_modal.js @@ -1,9 +1,4 @@ -// fixes "remote modal shows same content every time" -$('.modal').on('hidden', function() { - $(this).removeData('modal'); -}); - -$(function() { - // Apply flask-admin form styles after the modal is loaded - window.faForm.applyGlobalStyles(document); -}); +// fixes "remote modal shows same content every time" +$('.modal').on('hidden', function() { + $(this).removeData('modal'); +}); diff --git a/flask_admin/static/admin/js/bs3_modal.js b/flask_admin/static/admin/js/bs3_modal.js index ce67e1673..a93b2391c 100755 --- a/flask_admin/static/admin/js/bs3_modal.js +++ b/flask_admin/static/admin/js/bs3_modal.js @@ -1,9 +1,4 @@ -// fixes "remote modal shows same content every time", avoiding the flicker -$('body').on('hidden.bs.modal', '.modal', function () { - $(this).removeData('bs.modal').find(".modal-content").empty(); -}); - -$(function() { - // Apply flask-admin form styles after the modal is loaded - window.faForm.applyGlobalStyles(document); -}); +// fixes "remote modal shows same content every time", avoiding the flicker +$('body').on('hidden.bs.modal', '.modal', function () { + $(this).removeData('bs.modal').find(".modal-content").empty(); +}); diff --git a/flask_admin/static/admin/js/bs4_modal.js b/flask_admin/static/admin/js/bs4_modal.js index 99e1fc807..f84a03b76 100644 --- a/flask_admin/static/admin/js/bs4_modal.js +++ b/flask_admin/static/admin/js/bs4_modal.js @@ -2,8 +2,3 @@ $('body').on('click.modal.data-api', '[data-toggle="modal"]', function () { $($(this).data("target") + ' .modal-content').load($(this).attr('href')); }); - -$(function() { - // Apply flask-admin form styles after the modal is loaded - window.faForm.applyGlobalStyles(document); -}); diff --git a/flask_admin/templates/bootstrap2/admin/file/list.html b/flask_admin/templates/bootstrap2/admin/file/list.html index f3883c9c5..8817cca00 100644 --- a/flask_admin/templates/bootstrap2/admin/file/list.html +++ b/flask_admin/templates/bootstrap2/admin/file/list.html @@ -193,4 +193,5 @@ {{ actionslib.script(_gettext('Please select at least one file.'), actions, actions_confirmation) }} + {% endblock %} diff --git a/flask_admin/templates/bootstrap2/admin/model/list.html b/flask_admin/templates/bootstrap2/admin/model/list.html index c3b29593d..255dbcef6 100755 --- a/flask_admin/templates/bootstrap2/admin/model/list.html +++ b/flask_admin/templates/bootstrap2/admin/model/list.html @@ -189,6 +189,7 @@ {{ lib.form_js() }} + {{ actionlib.script(_gettext('Please select at least one record.'), actions, diff --git a/flask_admin/templates/bootstrap2/admin/model/modals/create.html b/flask_admin/templates/bootstrap2/admin/model/modals/create.html index 58b3f45ec..a6c410f19 100644 --- a/flask_admin/templates/bootstrap2/admin/model/modals/create.html +++ b/flask_admin/templates/bootstrap2/admin/model/modals/create.html @@ -14,7 +14,7 @@ {% endblock %} {% block tail %} - + - - - -{% endblock %} +{% import 'admin/static.html' as admin_static with context%} +{% import 'admin/lib.html' as lib with context %} + +{% block body %} + {% block details_search %} +
+
+ {{ _gettext('Filter') }} + +
+
+ {% endblock %} + + {% block details_table %} + + {% for c, name in details_columns %} + + + + + {% endfor %} +
+ {{ name }} + + {{ get_value(model, c) }} +
+ {% endblock %} +{% endblock %} + +{% block tail %} + + + + +{% endblock %} diff --git a/flask_admin/templates/bootstrap2/admin/model/modals/edit.html b/flask_admin/templates/bootstrap2/admin/model/modals/edit.html index 569aab992..91f5dfb58 100644 --- a/flask_admin/templates/bootstrap2/admin/model/modals/edit.html +++ b/flask_admin/templates/bootstrap2/admin/model/modals/edit.html @@ -14,7 +14,7 @@ {% endblock %} {% block tail %} - + {% endblock %} diff --git a/flask_admin/templates/bootstrap3/admin/model/list.html b/flask_admin/templates/bootstrap3/admin/model/list.html index 08c1d5743..11ef4332b 100755 --- a/flask_admin/templates/bootstrap3/admin/model/list.html +++ b/flask_admin/templates/bootstrap3/admin/model/list.html @@ -190,6 +190,7 @@ {{ lib.form_js() }} + {{ actionlib.script(_gettext('Please select at least one record.'), actions, diff --git a/flask_admin/templates/bootstrap3/admin/model/modals/create.html b/flask_admin/templates/bootstrap3/admin/model/modals/create.html index abc1cf58e..4638bfd0f 100644 --- a/flask_admin/templates/bootstrap3/admin/model/modals/create.html +++ b/flask_admin/templates/bootstrap3/admin/model/modals/create.html @@ -20,5 +20,5 @@ {% endblock %} {% block tail %} - + {% endblock %} diff --git a/flask_admin/templates/bootstrap3/admin/model/modals/details.html b/flask_admin/templates/bootstrap3/admin/model/modals/details.html index 9abb55d38..540e31ae1 100755 --- a/flask_admin/templates/bootstrap3/admin/model/modals/details.html +++ b/flask_admin/templates/bootstrap3/admin/model/modals/details.html @@ -1,40 +1,40 @@ -{% import 'admin/static.html' as admin_static with context%} -{% import 'admin/lib.html' as lib with context %} - -{% block body %} -
- - {% block header_text %} -

{{ _gettext('View Record') + ' #' + request.args.get('id') }}

- {% endblock %} -
- -
- {% block details_search %} -
- {{ _gettext('Filter') }} - -
- {% endblock %} - - {% block details_table %} - - {% for c, name in details_columns %} - - - - - {% endfor %} -
- {{ name }} - - {{ get_value(model, c) }} -
- {% endblock %} -
-{% endblock %} - -{% block tail %} - - -{% endblock %} +{% import 'admin/static.html' as admin_static with context%} +{% import 'admin/lib.html' as lib with context %} + +{% block body %} +
+ + {% block header_text %} +

{{ _gettext('View Record') + ' #' + request.args.get('id') }}

+ {% endblock %} +
+ +
+ {% block details_search %} +
+ {{ _gettext('Filter') }} + +
+ {% endblock %} + + {% block details_table %} + + {% for c, name in details_columns %} + + + + + {% endfor %} +
+ {{ name }} + + {{ get_value(model, c) }} +
+ {% endblock %} +
+{% endblock %} + +{% block tail %} + + +{% endblock %} diff --git a/flask_admin/templates/bootstrap3/admin/model/modals/edit.html b/flask_admin/templates/bootstrap3/admin/model/modals/edit.html index 8897810f4..ceaaca074 100644 --- a/flask_admin/templates/bootstrap3/admin/model/modals/edit.html +++ b/flask_admin/templates/bootstrap3/admin/model/modals/edit.html @@ -22,5 +22,5 @@

{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}

{% endblock %} {% block tail %} - + {% endblock %} diff --git a/flask_admin/templates/bootstrap4/admin/model/modals/create.html b/flask_admin/templates/bootstrap4/admin/model/modals/create.html index 8c5aee463..2338b042a 100644 --- a/flask_admin/templates/bootstrap4/admin/model/modals/create.html +++ b/flask_admin/templates/bootstrap4/admin/model/modals/create.html @@ -30,3 +30,7 @@ {% endblock %} + +{% block tail %} + +{% endblock %} diff --git a/flask_admin/templates/bootstrap4/admin/model/modals/details.html b/flask_admin/templates/bootstrap4/admin/model/modals/details.html index 0e8a52cdf..30e631347 100755 --- a/flask_admin/templates/bootstrap4/admin/model/modals/details.html +++ b/flask_admin/templates/bootstrap4/admin/model/modals/details.html @@ -36,4 +36,5 @@

{{ _gettext('View Record') + ' #' + request.args.get('id') }}

{% block tail %} -{% endblock %} \ No newline at end of file + +{% endblock %} diff --git a/flask_admin/templates/bootstrap4/admin/model/modals/edit.html b/flask_admin/templates/bootstrap4/admin/model/modals/edit.html index a39f7e8b2..4f69e26e4 100644 --- a/flask_admin/templates/bootstrap4/admin/model/modals/edit.html +++ b/flask_admin/templates/bootstrap4/admin/model/modals/edit.html @@ -23,5 +23,8 @@
{{ _gettext('Edit Record') + ' #' + request.args.get('id {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }} {% endcall %} +{% endblock %} +{% block tail %} + {% endblock %} From b38afd6c905f3709d5980220d8457e3acb63b7bc Mon Sep 17 00:00:00 2001 From: Samuel Williams Date: Sun, 21 Jul 2024 20:41:22 +0100 Subject: [PATCH 2/2] Update geoalchemy example with modal edit --- examples/geo_alchemy/app.py | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/examples/geo_alchemy/app.py b/examples/geo_alchemy/app.py index 97fc25a94..d7fc4937f 100644 --- a/examples/geo_alchemy/app.py +++ b/examples/geo_alchemy/app.py @@ -60,13 +60,17 @@ def index(): # Create admin admin = admin.Admin(app, name='Example: GeoAlchemy', theme=Bootstrap4Theme()) + +class ModalModelView(ModelView): + edit_modal = True + # Add views -admin.add_view(ModelView(Point, db.session, category='Points')) -admin.add_view(ModelView(MultiPoint, db.session, category='Points')) -admin.add_view(ModelView(Polygon, db.session, category='Polygons')) -admin.add_view(ModelView(MultiPolygon, db.session, category='Polygons')) -admin.add_view(ModelView(LineString, db.session, category='Lines')) -admin.add_view(ModelView(MultiLineString, db.session, category='Lines')) +admin.add_view(ModalModelView(Point, db.session, category='Points')) +admin.add_view(ModalModelView(MultiPoint, db.session, category='Points')) +admin.add_view(ModalModelView(Polygon, db.session, category='Polygons')) +admin.add_view(ModalModelView(MultiPolygon, db.session, category='Polygons')) +admin.add_view(ModalModelView(LineString, db.session, category='Lines')) +admin.add_view(ModalModelView(MultiLineString, db.session, category='Lines')) if __name__ == '__main__':