[BUGFIX] JS: Init SelectTreeElement after document.ready 77/54177/3
authorAnke Altintop <anke.altintop@bytebetrieb.com>
Tue, 19 Sep 2017 15:56:27 +0000 (17:56 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sat, 7 Oct 2017 10:06:44 +0000 (12:06 +0200)
Add document.ready, so SelectTree is initialized even
with slow internet connection.

Resolves: #81891
Releases: master, 8.7
Change-Id: I5489d37821107310f99fbccffc00fd183e2e3786
Reviewed-on: https://review.typo3.org/54177
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/SelectTreeElement.js

index 9f2cd18..267fced 100644 (file)
 define(['jquery', 'TYPO3/CMS/Backend/FormEngine/Element/SelectTree'], function ($, SelectTree) {
     'use strict';
 
-    var SelectTreeElement = {
-    };
-    SelectTreeElement.initialize = function () {
-        $('.typo3-tceforms-tree .treeRecord').each(function (i, element) {
-
-            /**
-             * Hidden input field storing selected elements.
-             * Tree is initialized based on values stored in it's data attributes
-             *
-             * @type {*|jQuery|HTMLElement}
-             */
-            var treeInput = $(element);
-            var dataParams = {
-                tableName: treeInput.data('tablename'),
-                fieldName: treeInput.data('fieldname'),
-                uid: treeInput.data('uid'),
-                recordTypeValue: treeInput.data('recordtypevalue'),
-                dataStructureIdentifier: treeInput.data('datastructureidentifier'),
-                flexFormSheetName: treeInput.data('flexformsheetname'),
-                flexFormFieldName: treeInput.data('flexformfieldname'),
-                flexFormContainerName: treeInput.data('flexformcontainername'),
-                flexFormContainerIdentifier: treeInput.data('flexformcontaineridentifier'),
-                flexFormContainerFieldName: treeInput.data('flexformcontainerfieldname'),
-                flexFormSectionContainerIsNew: treeInput.data('flexformsectioncontainerisnew'),
-                command: treeInput.data('command')
-            };
-            var $wrapper = treeInput.parent().siblings('.svg-tree-wrapper');
-            var dataUrl = TYPO3.settings.ajaxUrls['record_tree_data'] + '&' + $.param(dataParams);
-            var tree = new SelectTree();
-            var initialized = tree.initialize($wrapper, {
-                'dataUrl': dataUrl,
-                'showIcons': true,
-                'showCheckboxes': true,
-                'readOnlyMode': treeInput.data('read-only'),
-                'input': treeInput,
-                'exclusiveNodesIdentifiers': treeInput.data('tree-exclusive-keys'),
-                'validation': treeInput.data('formengine-validation-rules')[0],
-                'expandUpToLevel': treeInput.data('tree-expand-up-to-level')
-            });
-            if (!initialized) {
-                return;
-            }
-            tree.dispatch.on('nodeSelectedAfter.requestUpdate', window[$wrapper.attr('id')]);
+    var SelectTreeElement = {};
 
-            if (treeInput.data('tree-show-toolbar')) {
-                require(['TYPO3/CMS/Backend/FormEngine/Element/TreeToolbar'], function (TreeToolbar) {
-                    var selectTreeToolbar = new TreeToolbar();
-                    selectTreeToolbar.initialize($wrapper);
+    SelectTreeElement.initialize = function () {
+        $(document).ready(function() {
+            $('.typo3-tceforms-tree .treeRecord').each(function (i, element) {
+    
+                /**
+                 * Hidden input field storing selected elements.
+                 * Tree is initialized based on values stored in it's data attributes
+                 *
+                 * @type {*|jQuery|HTMLElement}
+                 */
+                var treeInput = $(element);
+                var dataParams = {
+                    tableName: treeInput.data('tablename'),
+                    fieldName: treeInput.data('fieldname'),
+                    uid: treeInput.data('uid'),
+                    recordTypeValue: treeInput.data('recordtypevalue'),
+                    dataStructureIdentifier: treeInput.data('datastructureidentifier'),
+                    flexFormSheetName: treeInput.data('flexformsheetname'),
+                    flexFormFieldName: treeInput.data('flexformfieldname'),
+                    flexFormContainerName: treeInput.data('flexformcontainername'),
+                    flexFormContainerIdentifier: treeInput.data('flexformcontaineridentifier'),
+                    flexFormContainerFieldName: treeInput.data('flexformcontainerfieldname'),
+                    flexFormSectionContainerIsNew: treeInput.data('flexformsectioncontainerisnew'),
+                    command: treeInput.data('command')
+                };
+                var $wrapper = treeInput.parent().siblings('.svg-tree-wrapper');
+                var dataUrl = TYPO3.settings.ajaxUrls['record_tree_data'] + '&' + $.param(dataParams);
+                var tree = new SelectTree();
+                var initialized = tree.initialize($wrapper, {
+                    'dataUrl': dataUrl,
+                    'showIcons': true,
+                    'showCheckboxes': true,
+                    'readOnlyMode': treeInput.data('read-only'),
+                    'input': treeInput,
+                    'exclusiveNodesIdentifiers': treeInput.data('tree-exclusive-keys'),
+                    'validation': treeInput.data('formengine-validation-rules')[0],
+                    'expandUpToLevel': treeInput.data('tree-expand-up-to-level')
                 });
-            }
+                if (!initialized) {
+                    return;
+                }
+                tree.dispatch.on('nodeSelectedAfter.requestUpdate', window[$wrapper.attr('id')]);
+    
+                if (treeInput.data('tree-show-toolbar')) {
+                    require(['TYPO3/CMS/Backend/FormEngine/Element/TreeToolbar'], function (TreeToolbar) {
+                        var selectTreeToolbar = new TreeToolbar();
+                        selectTreeToolbar.initialize($wrapper);
+                    });
+                }
+            });
         });
     };
     return SelectTreeElement;