N°4051 Make sure js dependencies are met before resuming ajax calls js code

js/extkeywidget.js

@@ -518,12 +518,14 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 			$('#label_'+me.id).addClass('ac_dlg_loading');
 		}
 		me.oWizardHelper.UpdateWizard();
+		var sPromiseId = 'ajax_promise_' + me.id;
 		var theMap = {
 			sTargetClass: me.sTargetClass,
 			iInputId: me.id,
 			sAttCode: me.sAttCode,
 			'json': me.oWizardHelper.ToJSON(),
-			operation: 'objectCreationForm'
+			operation: 'objectCreationForm',
+			ajax_promise_id: sPromiseId
 		};
 
 		// Make sure that we cancel any pending request before issuing another
@@ -534,20 +536,22 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 		me.ajax_request = $.post(AddAppContext(GetAbsoluteUrlAppRoot()+'pages/ajax.render.php'), theMap,
 			function (data) {
 				$('#ajax_'+me.id).html(data);
-				$('#ac_create_'+me.id).dialog('open');
-				$('#ac_create_'+me.id).dialog("option", "close", me.OnCloseCreateObject);
-				// Modify the action of the cancel button
-				$('#ac_create_'+me.id+' button.cancel').off('click').on('click', me.CloseCreateObject);
-				me.ajax_request = null;
-				// Adjust the dialog's size to fit into the screen
-				if ($('#ac_create_'+me.id).width() > ($(window).width()-40))
-				{
-					$('#ac_create_'+me.id).width($(window).width()-40);
-				}
-				if ($('#ac_create_'+me.id).height() > ($(window).height()-70))
-				{
-					$('#ac_create_'+me.id).height($(window).height()-70);
-				}
+				window[sPromiseId].then(function(){
+					$('#ac_create_'+me.id).dialog('open');
+					$('#ac_create_'+me.id).dialog("option", "close", me.OnCloseCreateObject);
+					// Modify the action of the cancel button
+					$('#ac_create_'+me.id+' button.cancel').off('click').on('click', me.CloseCreateObject);
+					me.ajax_request = null;
+					// Adjust the dialog's size to fit into the screen
+					if ($('#ac_create_'+me.id).width() > ($(window).width()-40))
+					{
+						$('#ac_create_'+me.id).width($(window).width()-40);
+					}
+					if ($('#ac_create_'+me.id).height() > ($(window).height()-70))
+					{
+						$('#ac_create_'+me.id).height($(window).height()-70);
+					}
+				});
 			},
 			'html'
 		);

sources/application/WebPage/AjaxPage.php

@@ -24,6 +24,8 @@ class AjaxPage extends WebPage implements iTabbedPage
 	protected $s_dict_scripts;
 
 	const DEFAULT_PAGE_TEMPLATE_REL_PATH = 'pages/backoffice/ajaxpage/layout';
+	/** @var string  */
+	private $sPromiseId;
 
 	/**
 	 * constructor for the web page
@@ -43,6 +45,7 @@ class AjaxPage extends WebPage implements iTabbedPage
 		$this->sContentType = 'text/html';
 		$this->sContentDisposition = 'inline';
 		$this->m_sMenu = "";
+		$this->sPromiseId = utils::ReadParam('ajax_promise_id', uniqid('ajax_', true));
 
 		utils::InitArchiveMode();
 	}
@@ -205,6 +208,7 @@ class AjaxPage extends WebPage implements iTabbedPage
 			'sSanitizedContent' => utils::FilterXSS($this->s_content),
 			'sDeferredContent' => utils::FilterXSS(addslashes(str_replace("\n", '', $this->s_deferred_content))),
 			'sCapturedOutput' => utils::FilterXSS($s_captured_output),
+			'sPromiseId' => $this->sPromiseId
 		];
 
 		$oTwigEnv = TwigHelper::GetTwigEnvironment(BlockRenderer::TWIG_BASE_PATH, BlockRenderer::TWIG_ADDITIONAL_PATHS);

templates/pages/backoffice/ajaxpage/layout.html.twig

@@ -21,119 +21,132 @@
 		{% endfor %}
 	{% endblock %}
 
+    {% set sPromiseId = aPage.sPromiseId %}
 	{% if aPage.aJsFiles is not empty %}
         {% set sId = oLayout.GetId() | sanitize(constant('utils::ENUM_SANITIZATION_FILTER_VARIABLE_NAME')) %}
         {% block iboPageJsFiles %}
             <script type="text/javascript">
-            var aFilesToLoad{{ sId }} = [];
-            {# manage Dictionary file if exist #}
-            var sUrlDictFile = '';
-            {% if aPage.sDictScript is not empty %}
-            if ($.inArray('{{ aPage.sDictScript|raw }}', aListJsFiles) == -1)
-            {
-                sUrlDictFile = "{{ aPage.sDictScript|raw }}";
-                aListJsFiles.push(sUrlDictFile);
-            }
-            {% endif %}
-            {# manage the other Js File #}
-            {% for sJsFile in aPage.aJsFiles %}
-            if ($.inArray('{{ sJsFile|raw }}', aListJsFiles) == -1)
-            {
-                aFilesToLoad{{ sId }}.push('{{ sJsFile|raw|add_itop_version }}');
-                aListJsFiles.push("{{ sJsFile|raw }}");
-            }
-            {% endfor %}
-            var iCurrentIdx{{ sId }} = 0;
-            var iFilesToLoadCount{{ sId }} = aFilesToLoad{{ sId }}.length;
-            if (iFilesToLoadCount{{ sId }}> 0)
-            {
-                var fLoadScript{{ sId }} = function () {
-                    $.when(
-                            $.ajax({
-                                url: aFilesToLoad{{ sId }}[iCurrentIdx{{ sId }}],
-                                dataType: 'script',
-                                cache: true
-                            })
-                            )
-                            .then(function () {
-                                iCurrentIdx{{ sId }}++;
-                                if (iCurrentIdx{{ sId }} !== iFilesToLoadCount{{ sId }})
-                                {
-                                    fLoadScript{{ sId }}();
-                                }
-                                else
-                                {
-                                    {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
-                                    {{ sJsInlineOnDomReady|raw }}
-                                    {% endfor %}
-                                }
-                            });
-                };
-                {# first load Dictionary if exist #}
-                if (sUrlDictFile != '')
-                {
-                    $.ajax({
-                        url: '{{ aPage.sDictScript|raw }}',
-                        dataType: 'script',
-                        cache: true
-                    }).done(function (data) {
-                        if (Dict != undefined && data.startsWith("var aDictEntries = {\""))
-                        {
-                            eval(data);
-                            $.extend(Dict._entries, aDictEntries);
-                        }
-                    }).then(function () {
-                        fLoadScript{{ sId }}();
-                    });
-                }
-                else
-                {
-                    fLoadScript{{ sId }}();
-                }
-            }
-            else
-            {
-                {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
-                {{ sJsInlineOnDomReady|raw }}
-                {% endfor %}
-            }
-            </script>
-        {% endblock %}
-    {% else %}
-        {% block iboPageJsInlineOnDomReady %}
-            {# first load Dictionnary if exist #}
-            {% if aPage.sDictScript is not empty %}
-                <script type="text/javascript">
+            window['{{ sPromiseId }}'] = new Promise(function(resolve, reject){
+                var aFilesToLoad{{ sId }} = [];
+                {# manage Dictionary file if exist #}
+                var sUrlDictFile = '';
+                {% if aPage.sDictScript is not empty %}
                 if ($.inArray('{{ aPage.sDictScript|raw }}', aListJsFiles) == -1)
                 {
-                    aListJsFiles.push("{{ aPage.sDictScript|raw }}");
-                    $.ajax({
-                        url: '{{ aPage.sDictScript|raw }}',
-                        dataType: 'script',
-                        cache: true
-                    }).done(function (data) {
-                        if (Dict != undefined && data.startsWith("var aDictEntries = {\""))
-                        {
-                            eval(data);
-                            $.extend(Dict._entries, aDictEntries);
-                        }
-                    }).then(function () {
-                        {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
-                        {{ sJsInlineOnDomReady|raw }}
-                        {% endfor %}
-                    });
+                    sUrlDictFile = "{{ aPage.sDictScript|raw }}";
+                    aListJsFiles.push(sUrlDictFile);
+                }
+                {% endif %}
+                {# manage the other Js File #}
+                {% for sJsFile in aPage.aJsFiles %}
+                if ($.inArray('{{ sJsFile|raw }}', aListJsFiles) == -1)
+                {
+                    aFilesToLoad{{ sId }}.push('{{ sJsFile|raw|add_itop_version }}');
+                    aListJsFiles.push("{{ sJsFile|raw }}");
+                }
+                {% endfor %}
+                var iCurrentIdx{{ sId }} = 0;
+                var iFilesToLoadCount{{ sId }} = aFilesToLoad{{ sId }}.length;
+                if (iFilesToLoadCount{{ sId }}> 0)
+                {
+                    var fLoadScript{{ sId }} = function () {
+                        $.when(
+                                $.ajax({
+                                    url: aFilesToLoad{{ sId }}[iCurrentIdx{{ sId }}],
+                                    dataType: 'script',
+                                    cache: true
+                                })
+                                )
+                                .then(function () {
+                                    iCurrentIdx{{ sId }}++;
+                                    if (iCurrentIdx{{ sId }} !== iFilesToLoadCount{{ sId }})
+                                    {
+                                        fLoadScript{{ sId }}();
+                                    }
+                                    else
+                                    {
+                                        {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
+                                        {{ sJsInlineOnDomReady|raw }}
+                                        {% endfor %}
+                                        resolve();
+                                    }
+                                });
+                    };
+                    {# first load Dictionary if exist #}
+                    if (sUrlDictFile != '')
+                    {
+                        $.ajax({
+                            url: '{{ aPage.sDictScript|raw }}',
+                            dataType: 'script',
+                            cache: true
+                        }).done(function (data) {
+                            if (Dict != undefined && data.startsWith("var aDictEntries = {\""))
+                            {
+                                eval(data);
+                                $.extend(Dict._entries, aDictEntries);
+                            }
+                        }).then(function () {
+                            fLoadScript{{ sId }}();
+                        });
+                    }
+                    else
+                    {
+                        fLoadScript{{ sId }}();
+                    }
                 }
                 else
                 {
                     {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
                     {{ sJsInlineOnDomReady|raw }}
                     {% endfor %}
+                    resolve();
                 }
+            });
+            </script>
+        {% endblock %}
+    {% else %}
+        {% block iboPageJsInlineOnDomReady %}
+
+            {# first load Dictionnary if exist #}
+            {% if aPage.sDictScript is not empty %}
+                <script type="text/javascript">
+                window['{{ sPromiseId }}'] = new Promise(function(resolve, reject){
+                    if ($.inArray('{{ aPage.sDictScript|raw }}', aListJsFiles) == -1)
+                    {
+                        aListJsFiles.push("{{ aPage.sDictScript|raw }}");
+                        $.ajax({
+                            url: '{{ aPage.sDictScript|raw }}',
+                            dataType: 'script',
+                            cache: true
+                        }).done(function (data) {
+                            if (Dict != undefined && data.startsWith("var aDictEntries = {\""))
+                            {
+                                eval(data);
+                                $.extend(Dict._entries, aDictEntries);
+                            }
+                        }).then(function () {
+                            {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
+                            {{ sJsInlineOnDomReady|raw }}
+                            {% endfor %}
+                            resolve();
+                        });
+                    }
+                    else
+                    {
+                        {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
+                        {{ sJsInlineOnDomReady|raw }}
+                        {% endfor %}
+                        resolve();
+                    }
+                });
                 </script>
             {% else %}
                 {% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
                     <script type="text/javascript">
-                    {{ sJsInlineOnDomReady|raw }}
+                        window['{{ sPromiseId }}'] = new Promise(function(resolve, reject){
+                            {{ sJsInlineOnDomReady|raw }}
+                            resolve();
+                        });
                     </script>
                 {% endfor %}
             {% endif %}