Fix dynamically insert content

Author: srenon

Block/Adminhtml/System/Config/Form/Field/MiscScript.php

@@ -91,7 +91,13 @@ public function getTemplateButtonList()
         $html = '';
 
         foreach ($this->helper->getTemplateVariableKey() as $key) {
-            $html .= '<button style="margin:3px;" data-mage-init=\\\'{"checkoutSuccessMiscScript":{"textareaId":"<%- _id %>_scripts"}}\\\' type="button">' . $key . '</button>';
+            $html .= sprintf(
+                '<%s style="%s" data-mage-init=\\\'%s\\\' type="button"> %s </button>',
+                'button',
+                'margin:3px;',
+                '{"checkoutSuccessMiscScript":{"textareaId":"<%- _id %>_scripts"}}',
+                $key
+            );
         }
 
         return $html;
@@ -146,9 +152,9 @@ public function renderCellTemplate($columnName)
 
         if ($column['type'] == 'text') {
             return '<input type="' . $column['type'] . '" id="' . $this->_getCellInputElementId(
-                    '<%- _id %>',
-                    $columnName
-                ) .
+                '<%- _id %>',
+                $columnName
+            ) .
                 '"' .
                 ' name="' .
                 $inputName .
@@ -166,9 +172,9 @@ public function renderCellTemplate($columnName)
                 ) ? ' style="' . $column['style'] . '"' : '') . '/>';
         } elseif ($column['type'] == 'checkbox') {
             return '<input type="' . $column['type'] . '" id="' . $this->_getCellInputElementId(
-                    '<%- _id %>',
-                    $columnName
-                ) .
+                '<%- _id %>',
+                $columnName
+            ) .
                 '"' .
                 ' name="' .
                 $inputName .
@@ -186,9 +192,9 @@ public function renderCellTemplate($columnName)
                 ) ? ' style="' . $column['style'] . '"' : '') . '/>';
         } else {
             return '<textarea  id="' . $this->_getCellInputElementId(
-                    '<%- _id %>',
-                    $columnName
-                ) .
+                '<%- _id %>',
+                $columnName
+            ) .
                 '"' .
                 ' name="' .
                 $inputName .

composer.json

@@ -21,7 +21,7 @@
         "magepal/magento2-preview-checkout-success-page":"Preview checkout success page from admin"
     },
     "type": "magento2-module",
-    "version": "1.1.6",
+    "version": "1.1.7",
     "license": [
         "proprietary"
     ],

view/adminhtml/templates/system/config/form/field/array.phtml

@@ -46,8 +46,9 @@ $_colspan = $block->isAddAfter() ? 2 : 1;
     <script>
         require([
             'mage/template',
+            'jquery',
             'prototype'
-        ], function (mageTemplate) {
+        ], function (mageTemplate, $j) {
         // create row creator
         window.arrayRow<?= /* @escapeNotVerified */ $_htmlId ?> = {
 
@@ -89,35 +90,37 @@ $_colspan = $block->isAddAfter() ? 2 : 1;
                 } else {
                     var d = new Date();
                     templateValues = {
-                <?php foreach ($block->getColumns() as $columnName => $column): ?>
-                    <?= /* @escapeNotVerified */ $columnName ?>: '',
-                        'option_extra_attrs': {},
-                    <?php endforeach; ?>
+                        <?php foreach ($block->getColumns() as $columnName => $column): ?>
+                            <?= /* @escapeNotVerified */ $columnName ?> : '',
+                            'option_extra_attrs': {},
+                        <?php endforeach; ?>
                         _id: '_' + d.getTime() + '_' + d.getMilliseconds()
-                };
-            }
+                    };
+                }
 
-            // Insert new row after specified row or at the bottom
-            if (insertAfterId) {
-                Element.insert($(insertAfterId), {after: this.template(templateValues)});
-            } else {
-                Element.insert($('addRow<?= /* @escapeNotVerified */ $_htmlId ?>'), {bottom: this.template(templateValues)});
-            }
+                // Insert new row after specified row or at the bottom
+                if (insertAfterId) {
+                    Element.insert($(insertAfterId), {after: this.template(templateValues)});
+                } else {
+                    Element.insert($('addRow<?= /* @escapeNotVerified */ $_htmlId ?>'), {bottom: this.template(templateValues)});
+                }
 
-            // Fill controls with data
-            if (rowData) {
-                var rowInputElementNames = Object.keys(rowData.column_values);
-                for (var i = 0; i < rowInputElementNames.length; i++) {
-                    if ($(rowInputElementNames[i])) {
-                        $(rowInputElementNames[i]).setValue(rowData.column_values[rowInputElementNames[i]]);
+                // Fill controls with data
+                if (rowData) {
+                    var rowInputElementNames = Object.keys(rowData.column_values);
+                    for (var i = 0; i < rowInputElementNames.length; i++) {
+                        if ($(rowInputElementNames[i])) {
+                            $(rowInputElementNames[i]).setValue(rowData.column_values[rowInputElementNames[i]]);
+                        }
                     }
                 }
-            }
 
-            // Add event for {addAfterBtn} button
-            <?php if ($block->isAddAfter()): ?>
-            Event.observe('addAfterBtn' + templateValues._id, 'click', this.add.bind(this, false, templateValues._id));
-                <?php endif; ?>
+                // Add event for {addAfterBtn} button
+                <?php if ($block->isAddAfter()): ?>
+                Event.observe('addAfterBtn' + templateValues._id, 'click', this.add.bind(this, false, templateValues._id));
+                 <?php endif; ?>
+
+                $j('#magepal_checkout_misc_script_scripts').trigger('contentUpdated');
             },
 
             del: function(rowId) {

view/adminhtml/web/js/checkout-success-misc-script.js

@@ -1,30 +1,26 @@
 define([
-    'jquery',
-    'Magento_Ui/js/modal/alert'
-], function ($, alert) {
+    'jquery'
+], function ($) {
 
     return{
         checkoutSuccessMiscScript: function (options, element) {
-
             $(element).on('click', this.processTemplateVar.bind(this, options.textareaId, element));
         },
-
-        processTemplateVar: function(textareaId, element){
+        processTemplateVar: function (textareaId, element) {
 
             var $textarea = $('#' + textareaId);
 
             var startCursorPos = $textarea.prop('selectionStart');
             var endCursorPos = $textarea.prop('selectionEnd');
             var v = $textarea.val();
 
-            if(endCursorPos > startCursorPos){
+            if (endCursorPos > startCursorPos) {
                 v = v.slice(0, startCursorPos) + v.slice(endCursorPos);
             }
 
-            var textBefore = v.substring(0,  startCursorPos );
-            var textAfter  = v.substring( startCursorPos, v.length );
-            $textarea.val( textBefore + $(element).text() + textAfter );
-
+            var textBefore = v.substring(0,  startCursorPos);
+            var textAfter = v.substring(startCursorPos, v.length);
+            $textarea.val(textBefore + $(element).text() + textAfter);
         }
     }