Fix JS elements regression in modal windows

In #2406 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 #2406: to prevent duplicate network requests for a file. We load `bs<x>_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.
pallets-eco · Jul 21, 2024 · 36b3ef4 · 36b3ef4
1 parent 685e566
commit 36b3ef4
Show file tree

Hide file tree

Showing 16 changed files with 105 additions and 108 deletions.
diff --git 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
@@ -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
@@ -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
@@ -193,4 +193,5 @@
     {{ actionslib.script(_gettext('Please select at least one file.'),
                          actions,
                          actions_confirmation) }}
+    <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
 {% endblock %}
diff --git 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() }}
     <script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
 
     {{ 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
@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal'))</script>
 
   <script>
   // fill the header of modal dynamically

diff --git a/flask_admin/templates/bootstrap2/admin/model/modals/details.html b/flask_admin/templates/bootstrap2/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 details_search %}
-    <div class="row-fluid">
-      <div class="input-prepend fa_filter_container">
-        <span class="add-on">{{ _gettext('Filter') }}</span>
-        <input id="fa_filter" id="prependedInput" type="text">
-      </div>
-    </div>
-  {% endblock %}
-
-  {% block details_table %}
-    <table class="table table-hover table-bordered searchable">
-    {% for c, name in details_columns %}
-      <tr>
-        <td>
-          <b>{{ name }}</b>
-        </td>
-        <td>
-        {{ get_value(model, c) }}
-        </td>
-      </tr>
-    {% endfor %}
-    </table>
-  {% endblock %}
-{% endblock %}
-
-{% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
-  <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
-
-  <script>
-  // fill the header of modal dynamically
-  $('.modal-header h3').html('{% block header_text -%}
-    {{ _gettext('View Record') + ' #' + request.args.get('id') }}
-  {%- endblock %}');
-  </script>
-{% endblock %}
+{% import 'admin/static.html' as admin_static with context%}
+{% import 'admin/lib.html' as lib with context %}
+
+{% block body %}
+  {% block details_search %}
+    <div class="row-fluid">
+      <div class="input-prepend fa_filter_container">
+        <span class="add-on">{{ _gettext('Filter') }}</span>
+        <input id="fa_filter" id="prependedInput" type="text">
+      </div>
+    </div>
+  {% endblock %}
+
+  {% block details_table %}
+    <table class="table table-hover table-bordered searchable">
+    {% for c, name in details_columns %}
+      <tr>
+        <td>
+          <b>{{ name }}</b>
+        </td>
+        <td>
+        {{ get_value(model, c) }}
+        </td>
+      </tr>
+    {% endfor %}
+    </table>
+  {% endblock %}
+{% endblock %}
+
+{% block tail %}
+  <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal'))</script>
+
+  <script>
+  // fill the header of modal dynamically
+  $('.modal-header h3').html('{% block header_text -%}
+    {{ _gettext('View Record') + ' #' + request.args.get('id') }}
+  {%- endblock %}');
+  </script>
+{% endblock %}
diff --git 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 %}
-  <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal'))</script>
 
   <script>
   // fill the header of modal dynamically

diff --git a/flask_admin/templates/bootstrap3/admin/file/list.html b/flask_admin/templates/bootstrap3/admin/file/list.html
@@ -193,4 +193,5 @@
     {{ actionslib.script(_gettext('Please select at least one file.'),
                          actions,
                          actions_confirmation) }}
+    <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
 {% endblock %}
diff --git 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() }}
     <script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
 
     {{ 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
@@ -20,5 +20,5 @@
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal-content'));</script>
 {% endblock %}
diff --git 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 %}
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    {% block header_text %}
-      <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
-    {% endblock %}
-  </div>
-
-  <div class="modal-body">
-  {% block details_search %}
-    <div class="input-group fa_filter_container col-lg-6">
-      <span class="input-group-addon">{{ _gettext('Filter') }}</span>
-      <input id="fa_filter" type="text" class="form-control">
-    </div>
-  {% endblock %}
-
-  {% block details_table %}
-    <table class="table table-hover table-bordered searchable">
-    {% for c, name in details_columns %}
-      <tr>
-        <td>
-          <b>{{ name }}</b>
-        </td>
-        <td>
-        {{ get_value(model, c) }}
-        </td>
-      </tr>
-    {% endfor %}
-    </table>
-  {% endblock %}
-  </div>
-{% endblock %}
-
-{% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
-{% endblock %}
+{% import 'admin/static.html' as admin_static with context%}
+{% import 'admin/lib.html' as lib with context %}
+
+{% block body %}
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    {% block header_text %}
+      <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
+    {% endblock %}
+  </div>
+
+  <div class="modal-body">
+  {% block details_search %}
+    <div class="input-group fa_filter_container col-lg-6">
+      <span class="input-group-addon">{{ _gettext('Filter') }}</span>
+      <input id="fa_filter" type="text" class="form-control">
+    </div>
+  {% endblock %}
+
+  {% block details_table %}
+    <table class="table table-hover table-bordered searchable">
+    {% for c, name in details_columns %}
+      <tr>
+        <td>
+          <b>{{ name }}</b>
+        </td>
+        <td>
+        {{ get_value(model, c) }}
+        </td>
+      </tr>
+    {% endfor %}
+    </table>
+  {% endblock %}
+  </div>
+{% endblock %}
+
+{% block tail %}
+  <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal-content'));</script>
+{% endblock %}
diff --git a/flask_admin/templates/bootstrap3/admin/model/modals/edit.html b/flask_admin/templates/bootstrap3/admin/model/modals/edit.html
@@ -22,5 +22,5 @@ <h3>{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}</h3>
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal-content'));</script>
 {% endblock %}
diff --git 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 %}
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal-content'));</script>
+{% endblock %}
diff --git a/flask_admin/templates/bootstrap4/admin/model/modals/details.html b/flask_admin/templates/bootstrap4/admin/model/modals/details.html
@@ -36,4 +36,5 @@ <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
 
 {% block tail %}
   <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
-{% endblock %}
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal-content'));</script>
+{% endblock %}
diff --git a/flask_admin/templates/bootstrap4/admin/model/modals/edit.html b/flask_admin/templates/bootstrap4/admin/model/modals/edit.html
@@ -23,5 +23,8 @@ <h5 class="modal-title">{{ _gettext('Edit Record') + ' #' + request.args.get('id
         {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
   </div>
   {% endcall %}
+{% endblock %}
 
+{% block tail %}
+  <script>window.faForm.applyGlobalStyles(document.getElementsByClassName('modal-content'));</script>
 {% endblock %}