Fixed #433. Reworked client-side form logic

flask_admin/static/admin/css/admin.css

@@ -27,13 +27,13 @@ form.search-form {
     margin: 4px 0 0 0;
 }
 
-form.search-form a.clear i {
+form.search-form .clear i {
     margin: 2px 0 0 0;
 }
 
 /* Filters */
 table.filters {
-    border-collapse: none;
+    border-collapse: collapse;
     border-spacing: 4px;
 }
 
@@ -70,14 +70,20 @@ table.filters {
 }
 
 /* Inline forms */
-.fa-inline-field {
+.inline-field {
     padding-bottom: 0.5em;
 }
 
-.fa-inline-field-control {
+.inline-field-control {
     float: right;
 }
 
+.inline-field .inline-form-field {
+    border-left: 1px solid #eeeeee;
+    padding-left: 8px;
+    margin-bottom: 4px;
+}
+
 /* Image thumbnails */
 .image-thumbnail img {
     max-width: 100px;
@@ -95,13 +101,6 @@ table.filters {
     margin-left: 110px;
 }
 
-/* Inline forms */
-.inline-field .inline-form {
-    border-left: 1px solid #eeeeee;
-    padding-left: 8px;
-    margin-bottom: 4px;
-}
-
 /* Patch Select2 */
 .select2-results li {
     min-height: 24px !important;

flask_admin/static/admin/js/form.js

@@ -127,24 +127,34 @@
       * Add inline form field
       *
       * @method addInlineField
-      * @param {String} id Form ID
-      * @param {Node} el Form element
-      * @param {String} template Form template
+      * @param {Node} el Button DOM node
+      * @param {String} elID Form ID
       */
-      this.addInlineField = function(id, el, template) {
-        var $el = $(el);
-        var $template = $($(template).text());
-
+      this.addInlineField = function(el, elID) {
+        // Get current inline field
+        var $el = $(el).closest('.inline-field');
         // Figure out new field ID
-        var lastField = $el.children('.fa-inline-field').last();
+        var id = elID;
+
+        var $parentForm = $el.parent().closest('.inline-field');
+
+        if ($parentForm.length > 0) {
+          id = $parentForm.attr('id') + '-' + elID;
+        }
+
+        var $fieldList = $el.find('> .inline-field-list');
+        var $lastField = $fieldList.children('.inline-field').last();
 
         var prefix = id + '-0';
-        if (lastField.length > 0) {
-            var parts = $(lastField[0]).attr('id').split('-');
+        if ($lastField.length > 0) {
+            var parts = $lastField.attr('id').split('-');
             idx = parseInt(parts[parts.length - 1], 10) + 1;
             prefix = id + '-' + idx;
         }
 
+        // Get tempalate
+        var $template = $($el.find('> .inline-field-template').text());
+
         // Set form ID
         $template.attr('id', prefix);
 
@@ -162,7 +172,7 @@
             me.attr('name', name);
         });
 
-        $template.appendTo($el);
+        $template.appendTo($fieldList);
 
         // Select first field
         $('input:first', $template).focus();
@@ -198,10 +208,10 @@
     };
 
     // Add on event handler
-    $('body').on('click', '.fa-remove-field' , function(e) {
+    $('body').on('click', '.inline-remove-field' , function(e) {
         e.preventDefault();
 
-        var form = $(this).closest('.fa-inline-field');
+        var form = $(this).closest('.inline-field');
         form.remove();
     });
 

flask_admin/templates/admin/model/inline_form.html

 {% import 'admin/lib.html' as lib with context %}
-<div class="fa-inline-field">
+<div class="inline-form-field">
   {{ lib.render_form_fields(field.form, form_opts=form_opts) }}
 </div>

flask_admin/templates/admin/model/inline_list_base.html

 {% macro render_inline_fields(field, template, render, check=None) %}
 <div class="inline-field">
-    <div id="{{ field.id }}-fields">
+    <div class="inline-field-list">
         {% for subfield in field %}
-        <div id="{{ subfield.id }}" class="fa-inline-field">
+        <div id="{{ subfield.id }}" class="inline-field">
             {%- if not check or check(subfield) %}
                 {% if subfield.get_pk and subfield.get_pk() %}
-                <div class="fa-inline-field-control">
+                <div class="inline-field-control">
                     <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
                     <label for="del-{{ subfield.id }}" style="display: inline">{{ _gettext('Delete?') }}</label>
                 </div>
                 {% else %}
-                <div class="fa-inline-field-control">
-                    <a href="javascript:void(0)" class="fa-remove-field"><i class="icon-remove"></i></a>
+                <div class="inline-field-control">
+                    <a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
                 </div>
                 {% endif %}
             {%- endif -%}
@@ -20,16 +20,16 @@
         </div>
         {% endfor %}
     </div>
-    <div id="{{ field.id }}-template" class="hide">
+    <div class="inline-field-template hide">
         {% filter forceescape %}
-        <div class="fa-inline-field">
-            <div class="fa-inline-field-control">
-                <a href="javascript:void(0)" class="fa-remove-field"><i class="icon-remove"></i></a>
+        <div class="inline-field">
+            <div class="inline-field-control">
+                <a href="javascript:void(0)" class="inline-remove-field"><i class="icon-remove"></i></a>
             </div>
             {{ render(template) }}
         </div>
         {% endfilter %}
     </div>
-    <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn" onclick="faForm.addInlineField('{{ field.id }}', '#{{ field.id }}-fields', '#{{ field.id }}-template');">{{ _gettext('Add') }} {{ field.label.text }}</a>
+    <a id="{{ field.id }}-button" href="javascript:void(0)" class="btn" onclick="faForm.addInlineField(this, '{{ field.id }}');">{{ _gettext('Add') }} {{ field.label.text }}</a>
 </div>
 {% endmacro %}