Fix modal regression

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__':
 

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');
+});

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();
+});

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);
-});

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 %}

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,

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

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 %}

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

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 %}

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,

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 %}

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 %}

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 %}

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 %}

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 %}

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 %}