[ofbiz-framework] branch trunk updated: Fixed: Date picker not initialised in ajax-called form (OFBIZ-12097)

[James Yong-2]

This is an automated email from the ASF dual-hosted git repository.

jamesyong pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ofbiz-framework.git


The following commit(s) were added to refs/heads/trunk by this push:
     new 483e77e  Fixed: Date picker not initialised in ajax-called form (OFBIZ-12097)
483e77e is described below

commit 483e77ea838d544772d5fe1592910bc3dbc9e177
Author: James Yong <[hidden email]>
AuthorDate: Sun Dec 20 08:46:52 2020 +0800

    Fixed: Date picker not initialised in ajax-called form (OFBIZ-12097)
   
    Use inline script when request is ajax
---
 .../widget/renderer/macro/MacroFormRenderer.java   |   6 +
 .../template/macro/HtmlFormMacroLibrary.ftl        |   7 +-
 .../webapp/common/js/util/OfbizUtil.js             | 233 +++++++++++----------
 3 files changed, 130 insertions(+), 116 deletions(-)

diff --git a/framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroFormRenderer.java b/framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroFormRenderer.java
index 69cdae9..64728d7 100644
--- a/framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroFormRenderer.java
+++ b/framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroFormRenderer.java
@@ -729,6 +729,10 @@ public final class MacroFormRenderer implements FormStringRenderer {
                 formattedMask = "9999-99-99 99:99:99";
             }
         }
+        String isXMLHttpRequest = "false";
+        if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
+            isXMLHttpRequest = "true";
+        }
         String tabindex = modelFormField.getTabindex();
         StringWriter sr = new StringWriter();
         sr.append("<@renderDateTimeField ");
@@ -796,6 +800,8 @@ public final class MacroFormRenderer implements FormStringRenderer {
         sr.append(formattedMask);
         sr.append("\" tabindex=\"");
         sr.append(tabindex);
+        sr.append("\" isXMLHttpRequest=\"");
+        sr.append(isXMLHttpRequest);
         sr.append("\" disabled=");
         sr.append(Boolean.toString(disabled));
         sr.append(" />");
diff --git a/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl b/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl
index 3d3feac..741871e 100644
--- a/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl
+++ b/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl
@@ -90,7 +90,7 @@ under the License.
   </textarea><#lt/>
 </#macro>
 
-<#macro renderDateTimeField name className alert dateType timeDropdownParamName defaultDateTimeString localizedIconTitle timeHourName timeMinutesName minutes isTwelveHour ampmName amSelected pmSelected compositeType timeDropdown="" classString="" hour1="" hour2="" shortDateInput="" title="" value="" size="" maxlength="" id="" formName="" mask="" event="" action="" step="" timeValues="" tabindex="" disabled="">
+<#macro renderDateTimeField name className alert dateType timeDropdownParamName defaultDateTimeString localizedIconTitle timeHourName timeMinutesName minutes isTwelveHour ampmName amSelected pmSelected compositeType timeDropdown="" classString="" hour1="" hour2="" shortDateInput="" title="" value="" size="" maxlength="" id="" formName="" mask="" event="" action="" step="" timeValues="" tabindex="" disabled="" isXMLHttpRequest="">
   <span class="view-calendar">
     <#local cultureInfo = Static["org.apache.ofbiz.common.JsLanguageFilesMappingUtil"].getFile("datejs", .locale)/>
     <#local datePickerLang = Static["org.apache.ofbiz.common.JsLanguageFilesMappingUtil"].getFile("jquery", .locale)/>
@@ -147,6 +147,11 @@ under the License.
       </#if>
     </#if>
     <input type="hidden" name="${compositeType}" value="Timestamp"/>
+    <#if isXMLHttpRequest=="true">
+        <script>
+          initDateTimePicker(document.getElementById("${id}"));
+        </script>
+    </#if>
   </span>
 </#macro>
 
diff --git a/themes/common-theme/webapp/common/js/util/OfbizUtil.js b/themes/common-theme/webapp/common/js/util/OfbizUtil.js
index 09c3573..8585ff8 100644
--- a/themes/common-theme/webapp/common/js/util/OfbizUtil.js
+++ b/themes/common-theme/webapp/common/js/util/OfbizUtil.js
@@ -309,122 +309,8 @@ function bindObservers(bind_element) {
         var element = jQuery(this);
         element.validate();
     });
-
     jQuery(bind_element).find(".date-time-picker").each(function(){
-        var element = jQuery(this);
-        var id = element.attr("id");
-        var element_i18n = jQuery("#" + id + "_i18n");
-        var shortDate = element.data("shortdate");
-        var libCultureInfo = [element.data("cultureinfo")];
-        importLibrary(libCultureInfo, function () {
-            //If language specific lib is found, use date / time converter else just copy the value fields
-            if (Date.CultureInfo != undefined) {
-                var initDate = element.val();
-                if (initDate != "") {
-                    var dateFormat;
-                    var ofbizTime;
-                    if (shortDate) {
-                        dateFormat = Date.CultureInfo.formatPatterns.shortDate;
-                        ofbizTime = "yyyy-MM-dd";
-                    } else {
-                        dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
-                        ofbizTime = "yyyy-MM-dd HH:mm:ss"
-                    }
-                    // The JS date parser doesn't understand the dot before ms in the date/time string. The ms here should be always 000
-                    if (initDate.indexOf('.') != -1) {
-                        initDate = initDate.substring(0, initDate.indexOf('.'));
-                    }
-                    element.val(initDate);
-                    var dateObj = Date.parseExact(initDate, ofbizTime);
-                    var formatedObj = dateObj.toString(dateFormat);
-                    element_i18n.val(formatedObj);
-                }
-
-                element.change(function () {
-                    var value = element.val();
-                    var dateFormat;
-                    var ofbizTime;
-                    if (shortDate) {
-                        dateFormat = Date.CultureInfo.formatPatterns.shortDate;
-                        ofbizTime = "yyyy-MM-dd";
-                    } else {
-                        dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
-                        ofbizTime = "yyyy-MM-dd HH:mm:ss"
-                    }
-                    var newValue = ""
-                    if (value != "") {
-                        var dateObj = Date.parseExact(value, ofbizTime);
-                        newValue = dateObj.toString(dateFormat);
-                    }
-                    element_i18n.val(newValue);
-                });
-
-                element_i18n.change(function () {
-                    var value = element_i18n.val();
-                    var dateFormat;
-                    var ofbizTime;
-                    if (shortDate) {
-                        dateFormat = Date.CultureInfo.formatPatterns.shortDate;
-                        ofbizTime = "yyyy-MM-dd";
-                    } else {
-                        dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
-                        ofbizTime = "yyyy-MM-dd HH:mm:ss"
-                    }
-                    var newValue = "";
-                    var dateObj = Date.parseExact(this.value, dateFormat);
-                    if (value != "" && dateObj !== null) {
-                        newValue = dateObj.toString(ofbizTime);
-                    } else { // invalid input
-                        element_i18n.val("");
-                    }
-                    element.val(newValue);
-                });
-            } else {
-                //fallback if no language specific js date file is found
-                element.change(function () {
-                    element_i18n.val(this.value);
-                });
-                element_i18n.change(function () {
-                    element.val(this.value);
-                });
-            }
-        });
-        var libDatePickerLang = [element.data("datepickerlang")];
-        if (shortDate) {
-            importLibrary(libDatePickerLang, function () {
-                element.datepicker({
-                    showWeek: true,
-                    showOn: 'button',
-                    buttonImage: '',
-                    buttonText: '',
-                    buttonImageOnly: false,
-                    dateFormat: 'yy-mm-dd'
-                })
-            });
-        } else {
-            var libTimePicker = element.data("timepicker");
-            if (libTimePicker) {
-                libTimePicker = libTimePicker.split(",");
-                importLibrary(libTimePicker, function () {
-                    var libDateTimePickerLang = libDatePickerLang.concat([element.data("timepickerlang")]);
-                    importLibrary(libDateTimePickerLang, function () {
-                        element.datetimepicker({
-                            showSecond: true,
-                            // showMillisec: true,
-                            timeFormat: 'HH:mm:ss',
-                            stepHour: 1,
-                            stepMinute: 1,
-                            stepSecond: 1,
-                            showOn: 'button',
-                            buttonImage: '',
-                            buttonText: '',
-                            buttonImageOnly: false,
-                            dateFormat: 'yy-mm-dd'
-                        })
-                    });
-                });
-            }
-        }
+        initDateTimePicker(this);
     });
     jQuery(bind_element).on("click", ".fieldgroup  li.collapsed, .fieldgroup  li.expanded", function(e){
         var element = jQuery(this);
@@ -435,6 +321,123 @@ function bindObservers(bind_element) {
     });
 }
 
+function initDateTimePicker(self) {
+    var element = jQuery(self);
+    var id = element.attr("id");
+    var element_i18n = jQuery("#" + id + "_i18n");
+    var shortDate = element.data("shortdate");
+    var libCultureInfo = [element.data("cultureinfo")];
+    importLibrary(libCultureInfo, function () {
+        //If language specific lib is found, use date / time converter else just copy the value fields
+        if (Date.CultureInfo != undefined) {
+            var initDate = element.val();
+            if (initDate != "") {
+                var dateFormat;
+                var ofbizTime;
+                if (shortDate) {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate;
+                    ofbizTime = "yyyy-MM-dd";
+                } else {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
+                    ofbizTime = "yyyy-MM-dd HH:mm:ss"
+                }
+                // The JS date parser doesn't understand the dot before ms in the date/time string. The ms here should be always 000
+                if (initDate.indexOf('.') != -1) {
+                    initDate = initDate.substring(0, initDate.indexOf('.'));
+                }
+                element.val(initDate);
+                var dateObj = Date.parseExact(initDate, ofbizTime);
+                var formatedObj = dateObj.toString(dateFormat);
+                element_i18n.val(formatedObj);
+            }
+
+            element.change(function () {
+                var value = element.val();
+                var dateFormat;
+                var ofbizTime;
+                if (shortDate) {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate;
+                    ofbizTime = "yyyy-MM-dd";
+                } else {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
+                    ofbizTime = "yyyy-MM-dd HH:mm:ss"
+                }
+                var newValue = ""
+                if (value != "") {
+                    var dateObj = Date.parseExact(value, ofbizTime);
+                    newValue = dateObj.toString(dateFormat);
+                }
+                element_i18n.val(newValue);
+            });
+
+            element_i18n.change(function () {
+                var value = element_i18n.val();
+                var dateFormat;
+                var ofbizTime;
+                if (shortDate) {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate;
+                    ofbizTime = "yyyy-MM-dd";
+                } else {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
+                    ofbizTime = "yyyy-MM-dd HH:mm:ss"
+                }
+                var newValue = "";
+                var dateObj = Date.parseExact(self.value, dateFormat);
+                if (value != "" && dateObj !== null) {
+                    newValue = dateObj.toString(ofbizTime);
+                } else { // invalid input
+                    element_i18n.val("");
+                }
+                element.val(newValue);
+            });
+        } else {
+            //fallback if no language specific js date file is found
+            element.change(function () {
+                element_i18n.val(self.value);
+            });
+            element_i18n.change(function () {
+                element.val(self.value);
+            });
+        }
+    });
+    var libDatePickerLang = [element.data("datepickerlang")];
+    if (shortDate) {
+        importLibrary(libDatePickerLang, function () {
+            element.datepicker({
+                showWeek: true,
+                showOn: 'button',
+                buttonImage: '',
+                buttonText: '',
+                buttonImageOnly: false,
+                dateFormat: 'yy-mm-dd'
+            })
+        });
+    } else {
+        var libTimePicker = element.data("timepicker");
+        if (libTimePicker) {
+            libTimePicker = libTimePicker.split(",");
+            importLibrary(libTimePicker, function () {
+                var libDateTimePickerLang = libDatePickerLang.concat([element.data("timepickerlang")]);
+                importLibrary(libDateTimePickerLang, function () {
+                    element.datetimepicker({
+                        showSecond: true,
+                        // showMillisec: true,
+                        timeFormat: 'HH:mm:ss',
+                        stepHour: 1,
+                        stepMinute: 1,
+                        stepSecond: 1,
+                        showOn: 'button',
+                        buttonImage: '',
+                        buttonText: '',
+                        buttonImageOnly: false,
+                        dateFormat: 'yy-mm-dd'
+                    })
+                });
+            });
+        }
+    }
+}
+
 /* SelectAll: This utility can be used when we need to use parent and child box combination over any page. Here is the list of tasks it will do:
    1. Check/ Uncheck child checkboxes when parent checkbox checked.
    2. Check/ Uncheck parent checkbox when child checkboxes checked.