Improved handling of 'Add' button disabling/enabling.

javascript/src/FieldTemplate.js

@@ -18,8 +18,8 @@ var QfqNS = QfqNS || {};
      * @deprecated use appendTemplate().
      *
      */
-    n.addFields = function (templateSelector, targetSelector, maxLines, button) {
-        n.appendTemplate(templateSelector, targetSelector, maxLines, button);
+    n.addFields = function (templateSelector, targetSelector, maxLines) {
+        n.appendTemplate(templateSelector, targetSelector, maxLines);
     };
 
     /**
@@ -36,7 +36,8 @@ var QfqNS = QfqNS || {};
      * @param {number} maxChildren do not allow more than `maxChildren` of children in target.
      *
      */
-    n.appendTemplate = function (templateSelector, targetSelector, maxChildren, button) {
+    n.appendTemplate = function (templateSelector, targetSelector, maxChildren) {
+        var responsibleButton;
         var escapedTemplateSelector = n.escapeJqueryIdSelector(templateSelector);
         var escapedTargetSelector = n.escapeJqueryIdSelector(targetSelector);
 
@@ -54,17 +55,35 @@ var QfqNS = QfqNS || {};
         n.expandRetainedPlaceholders(deserializedTemplate, lines);
 
         // Store the button object, so we can easily access it when this `line` is removed by the user
-        deserializedTemplate.data('field.template.addButton', button);
+        responsibleButton = n.getResponsibleButtonFromTarget($target);
+        if (responsibleButton) {
+            deserializedTemplate.data('field.template.addButton', responsibleButton);
+        }
 
         $target.append(deserializedTemplate);
         n.informFormOfChange($target);
 
         lines = n.countLines(escapedTargetSelector);
-        if (lines >= maxChildren && button) {
-            n.disableButton(button);
+        if (lines >= maxChildren && responsibleButton) {
+            n.disableButton(responsibleButton);
         }
     };
 
+    n.getResponsibleButtonFromTarget = function ($target) {
+        var $button;
+        var buttonSelector = $target.data('qfq-line-add-button');
+        if (!buttonSelector) {
+            return null;
+        }
+
+        $button = $(buttonSelector);
+        if ($button.length === 0) {
+            return null;
+        }
+
+        return $button[0];
+    };
+
     n.disableButton = function (button) {
         $(button).attr('disabled', 'disabled');
     };
@@ -102,6 +121,7 @@ var QfqNS = QfqNS || {};
      * selecting the template
      */
     n.initializeTemplateTarget = function (element, templateSelectorData) {
+        var responsibleButton;
         var $element = $(element);
         var templateSelector, escapedTemplateSelector, $template, deserializedTemplate;
 
@@ -189,6 +209,7 @@ var QfqNS = QfqNS || {};
      * @param element container element
      */
     n.setPlaceholderRetainers = function (template, element) {
+        var responsibleButton;
         var $deserializedTemplate = $(template);
 
         var $flatTemplate = $deserializedTemplate.find('*');
@@ -197,10 +218,16 @@ var QfqNS = QfqNS || {};
 
         var $childrenOfElement = $element.children();
 
+        responsibleButton = n.getResponsibleButtonFromTarget($element);
+
         $childrenOfElement.each(function () {
+            var $this = $(this);
+
+            // Add button reference
+            $this.data('field.template.addButton', responsibleButton);
 
             // We use .find() to increase chances of $flatTemplate and $childrenOfChild having the same ordering.
-            var $childrenOfChild = $(this).find('*');
+            var $childrenOfChild = $this.find('*');
             $childrenOfChild.each(function (childIndex) {
                 var correspondingTemplateElement, $correspondingTemplateElement, $child;
 

mockup/fieldtemplates.html

@@ -52,8 +52,7 @@
                 <b class="control-label">Fotowand</b>
             </div>
             <div class="col-md-6 qfq-fields" id="target"
-                 data-qfq-line-template="#template">
-
+                 data-qfq-line-template="#template" data-qfq-line-add-button="#addbutton1">
                 <div class="form-inline qfq-line">
                     <div class="form-group">
                         <label for="id1_1" class="control-label">Zeile (A-K) 1</label>
@@ -99,7 +98,8 @@
         </div>
         <div class="form-group">
             <div class="col-md-1">
-                <button type="button" onclick="QfqNS.appendTemplate('#template', '#target', 10, this)">Add</button>
+                <button type="button" id="addbutton1" onclick="QfqNS.appendTemplate('#template', '#target', 10)">Add
+                </button>
             </div>
         </div>
     </form>