Improved: Lookup don't work on area just updated (OFBIZ-13332)

Fix to avoid bindObserver events duplication when calling updateArea

Thanks to Leila Mekika and Florian Motteau to fix this issue with a better solution
---------

Co-authored-by: Leila <leila.mekika@nereide.fr>

Author: MkLeila

themes/common-theme/webapp/common-theme/js/util/OfbizUtil.js

@@ -40,6 +40,8 @@ $(document).ready(function () {
     });
     //initializing UI combobox dropdown by overriding its methods.
     ajaxAutoCompleteDropDown();
+    //initializing events listener
+    initializeEvents();
     // bindObservers will add observer on passed html section when DOM is ready.
     bindObservers("body");
 
@@ -92,22 +94,81 @@ $(document).ready(function () {
     }
 });
 
-/* bindObservers function contains the code of adding observers and it can be called for specific section as well
-   when we need to add observer on section which is updated by Ajax.
-   Example: bindObservers("sectionSelector");
-   sectionSelector can be Id, Class and Element name.
-*/
-function bindObservers(bind_element) {
+/* initializeEvents function contains the code of adding events at the loading of the page */
+function initializeEvents() {
 
     // Adding observer for checkboxes for select all action.
-    jQuery(bind_element).on("click", "[type=checkbox]", function () {
+    $("body").on("click", "[type=checkbox]", function () {
         var action_checkbox = jQuery(this),
             parent_action = action_checkbox.is(".selectAll") ? action_checkbox : action_checkbox.getForm().getFormFields().filter(".selectAll");
         if (parent_action.length !== 0) {
             addSelectAllObserver(action_checkbox);
         }
     });
 
+    $("body").on("click", "[data-dialog-url]", function () {
+        var element = jQuery(this);
+        var url = element.data("dialog-url");
+        var title = element.data("dialog-title");
+        var width = element.data("dialog-width");
+        var height = element.data("dialog-height");
+        var params = element.data("dialog-params");
+        var dialogContainer = jQuery('<div/>');
+        dialogContainer.dialog({
+            autoOpen: false,
+            title: title,
+            height: height,
+            width: width,
+            modal: true,
+            closeOnEscape: true,
+            close: function () {
+                dialogContainer.dialog('destroy');
+            },
+            open: function () {
+                jQuery.ajax({
+                    url: url,
+                    type: "POST",
+                    data: params,
+                    success: function (data) {
+                        dialogContainer.html(data);
+                        bindObservers(dialogContainer);
+                    },
+                    error: (xhr) => {
+                        // unauthorized user, reload page with the link id so we can reopen the modal
+                        if (xhr.status === 401) {
+                            const url = new URL(window.location.href);
+                            url.searchParams.append(SP_CLICK_ON, element.attr('id'));
+                            window.location.replace(url.toString());
+                        } else {
+                            // display some feedback in the modal body
+                            dialogContainer.text(`An unexpected server error occurred (status : ${ xhr.status }).`);
+                        }
+                    }
+                });
+            }
+        });
+        dialogContainer.dialog("open");
+        dialogContainer.on("closeCurrentModalAfterAjaxSubmitFormUpdateAreasInSuccess", function () {
+            dialogContainer.dialog("destroy");
+        });
+    });
+
+    $("body").on("click", "[data-confirm-message]", function (e) {
+        var element = jQuery(this);
+        var confirmMessage = element.data("confirm-message");
+        if (!confirm(confirmMessage)) {
+            e.preventDefault();
+        }
+    });
+}
+
+/* bindObservers function contains the code of adding observers and it can be called for specific section as well
+   when we need to add observer on section which is updated by Ajax.
+   Example: bindObservers("sectionSelector");
+   sectionSelector can be Id, Class and Element name.
+*/
+function bindObservers(bind_element) {
+
     // If parent checkbox is already checked on DOM ready then check its child checkboxes also.
     if (jQuery(".selectAll").is(":checked")) {
         jQuery(".selectAll").removeAttr("checked").trigger("click");
@@ -181,59 +242,7 @@ function bindObservers(bind_element) {
         var params = element.data("inplace-editor-params");
         ajaxInPlaceEditDisplayField(id, url, (new Function("return " + params + ";")()));
     });
-    jQuery(bind_element).on("click", "[data-dialog-url]", function () {
-        var element = jQuery(this);
-        var url = element.data("dialog-url");
-        var title = element.data("dialog-title");
-        var width = element.data("dialog-width");
-        var height = element.data("dialog-height");
-        var params = element.data("dialog-params");
-        var dialogContainer = jQuery('<div/>');
-        dialogContainer.dialog({
-            autoOpen: false,
-            title: title,
-            height: height,
-            width: width,
-            modal: true,
-            closeOnEscape: true,
-            close: function () {
-                dialogContainer.dialog('destroy');
-            },
-            open: function () {
-                jQuery.ajax({
-                    url: url,
-                    type: "POST",
-                    data: params,
-                    success: function (data) {
-                        dialogContainer.html(data);
-                        bindObservers(dialogContainer);
-                    },
-                    error: (xhr) => {
-                        // unauthorized user, reload page with the link id so we can reopen the modal
-                        if (xhr.status === 401) {
-                            const url = new URL(window.location.href);
-                            url.searchParams.append(SP_CLICK_ON, element.attr('id'));
-                            window.location.replace(url.toString());
-                        } else {
-                            // display some feedback in the modal body
-                            dialogContainer.text(`An unexpected server error occurred (status : ${ xhr.status }).`);
-                        }
-                    }
-                });
-            }
-        });
-        dialogContainer.dialog("open");
-        dialogContainer.on("closeCurrentModalAfterAjaxSubmitFormUpdateAreasInSuccess", function () {
-            dialogContainer.dialog("destroy");
-        });
-    });
-    jQuery(bind_element).on("click", "[data-confirm-message]", function (e) {
-        var element = jQuery(this);
-        var confirmMessage = element.data("confirm-message");
-        if (!confirm(confirmMessage)) {
-            e.preventDefault();
-        }
-    });
+
     jQuery(bind_element).find("[data-lookup-presentation]").each(function () {
         var element = jQuery(this);
         var form = element._form();
@@ -670,15 +679,11 @@ function ajaxUpdateArea(areaId, target, targetParams) {
 
 function updateArea(areaId, data) {
     // If the area is indicate as embedded why replace the area instead inject into
-    var bindObserversArea = "#" + areaId
     if (/^embedded/.test(areaId)) {
         jQuery("#" + areaId).replaceWith(data);
-        const newContentId = $(data).filter('.embeddedScreen').attr('id');
-        bindObserversArea = "#" + newContentId;
     } else {
         jQuery("#" + areaId).html(data);
     }
-    bindObservers(bindObserversArea);
 }
 
 /** Update multiple areas (HTML container elements).
@@ -851,6 +856,12 @@ function ajaxSubmitFormUpdateAreas(formName, areaCsvString, close) {
                 areaId = $form[0].target
             }
             updateArea(areaId, data)
+            var bindObserversArea = "#" + areaId
+            if (/^embedded/.test(areaId)) {
+                const newContentId = $(data).filter('.embeddedScreen').attr('id');
+                bindObserversArea = "#" + newContentId;
+            }
+            bindObservers(bindObserversArea);
         } else {
             if (containsErrorMessages(data)) {
                 displayErrorMessages(data)