You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by nm...@apache.org on 2021/07/02 15:28:21 UTC
[ofbiz-framework] 01/02: Improved: Improve js function
OfbizUtil.ajaxSubmitFormUpdateAreas (OFBIZ-12268)
This is an automated email from the ASF dual-hosted git repository.
nmalin pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ofbiz-framework.git
commit 2a509be3a9353aed580c21ab3fe84460ac7a7d9f
Author: Nicolas Malin <ni...@nereide.fr>
AuthorDate: Fri Jul 2 17:14:37 2021 +0200
Improved: Improve js function OfbizUtil.ajaxSubmitFormUpdateAreas (OFBIZ-12268)
At this time the function ajaxSubmitFormUpdateAreas present on themes/common-theme/webapp/common/js/util/OfbizUtil.js take a form, submit it thought ajax and wait a success to analyse a json result for update an area with the cvsAreaString given on parameter.
I realized different improvements :
* refactoring some js code to centralize the analyze of json result for check if the call is a success or error
* Analyze the content-type of the response if is a json continue as before, else take the return and update first area (useful for submit search or filtering form)
* Manage the case who the ajax call failed and we inform the user
* Add a trigger to force the modal close on submit success
Thanks to Leila Mekika, Marie-Aline Pantais and Gil Portenseigne for looking on that.
---
.../webapp/common/js/util/OfbizUtil.js | 159 ++++++++++++++++-----
1 file changed, 121 insertions(+), 38 deletions(-)
diff --git a/themes/common-theme/webapp/common/js/util/OfbizUtil.js b/themes/common-theme/webapp/common/js/util/OfbizUtil.js
index 7412474..b1dcb8b 100644
--- a/themes/common-theme/webapp/common/js/util/OfbizUtil.js
+++ b/themes/common-theme/webapp/common/js/util/OfbizUtil.js
@@ -197,6 +197,9 @@ function bindObservers(bind_element) {
}
});
dialogContainer.dialog("open");
+ dialogContainer.on("closeCurrentModalAfterAjaxSubmitFormUpdateAreasInSuccess", function() {
+ dialogContainer.dialog("destroy");
+ });
});
jQuery(bind_element).on("click", "[data-confirm-message]", function(e){
var element = jQuery(this);
@@ -605,21 +608,30 @@ function ajaxUpdateArea(areaId, target, targetParams) {
window.location.assign(targetUrl);
return;
}
- waitSpinnerShow();
+ waitSpinnerShow(areaId);
setTimeout(function() {
jQuery.ajax({
url: target,
type: "POST",
data: targetParams,
success: function(data) {
- jQuery("#" + areaId).html(data);
- waitSpinnerHide();
+ updateArea(areaId, data)
+ waitSpinnerHide(areaId);
},
- error: function(data) {waitSpinnerHide()}
+ error: function(data) { waitSpinnerHide(areaId) }
});
}, 0);
}
+function updateArea(areaId, data) {
+ // If the area is indicate as embedded why replace the area instead inject into
+ if (/^embedded/.test(areaId)) {
+ jQuery("#" + areaId).replaceWith(data);
+ } else {
+ jQuery("#" + areaId).html(data);
+ }
+}
+
/** Update multiple areas (HTML container elements).
* @param areaCsvString The area CSV string. The CSV string is a flat array in the
* form of: areaId, target, target parameters [, areaId, target, target parameters...].
@@ -707,6 +719,67 @@ function submitFormInBackground(form, areaId, submitUrl) {
});
}
+function containsErrorMessages(data) {
+ return data.ERROR_MESSAGE_LIST_ != undefined || data._ERROR_MESSAGE_ != undefined
+}
+function displayErrorMessages(data) {
+ if (!jQuery('#content-messages').length) {
+ //add this div just after app-navigation
+ if(jQuery('#content-main-section')){
+ jQuery('#content-main-section' ).before('<div id="content-messages" onclick="hideErrorContainer()"></div>');
+ }
+ }
+ jQuery('#content-messages').addClass('errorMessage');
+ if (data._ERROR_MESSAGE_LIST_ != undefined && data._ERROR_MESSAGE_ != undefined) {
+ jQuery('#content-messages' ).html(data._ERROR_MESSAGE_LIST_ + " " + data._ERROR_MESSAGE_);
+ } else if (data._ERROR_MESSAGE_LIST_ != undefined) {
+ jQuery('#content-messages' ).html(data._ERROR_MESSAGE_LIST_);
+ } else {
+ jQuery('#content-messages' ).html(data._ERROR_MESSAGE_);
+ }
+ showjGrowl();
+}
+
+function containsEventMessage(data) {
+ return data.EVENT_MESSAGE_LIST_ != undefined || data._EVENT_MESSAGE_ != undefined
+}
+function displayEventMessage(data) {
+ if (!jQuery('#content-messages').length) {
+ //add this div just after app-navigation
+ if(jQuery('#content-main-section')){
+ jQuery('#content-main-section' ).before('<div id="content-messages" onclick="hideErrorContainer()"></div>');
+ }
+ }
+ jQuery('#content-messages').addClass('eventMessage');
+ if (data._EVENT_MESSAGE_LIST_ != undefined && data._EVENT_MESSAGE_ != undefined) {
+ jQuery('#content-messages' ).html(data._EVENT_MESSAGE_LIST_ + " " + data._EVENT_MESSAGE_);
+ } else if (data._EVENT_MESSAGE_LIST_ != undefined) {
+ jQuery('#content-messages' ).html(data._EVENT_MESSAGE_LIST_);
+ } else {
+ jQuery('#content-messages' ).html(data._EVENT_MESSAGE_);
+ }
+ showjGrowl();
+}
+function clearErrorMessages() {
+ if (jQuery('#content-messages').length) {
+ jQuery('#content-messages').html('');
+ jQuery('#content-messages').removeClass('errorMessage').fadeIn('fast');
+ }
+ if (jQuery('#jGrowl').length) {
+ jQuery('[class$=errorMessageJGrowl]').hide();
+ }
+}
+
+function errorRetrievingResponseFromServer(xhr, status, exception) {
+ if(exception != 'abort') {
+ var errorMessage = '<p> No response from Apache OFBiz</p>';
+ if (status !== undefined) {
+ errorMessage += '<p> (state: ' + status + ')</p>';
+ }
+ displayErrorMessages({_ERROR_MESSAGE_: errorMessage});
+ }
+}
+
/** Submit form, update multiple areas (HTML container elements).
* @param formName The form name
* @param areaCsvString The area CSV string. The CSV string is a flat array in the
@@ -714,43 +787,35 @@ function submitFormInBackground(form, areaId, submitUrl) {
*/
function ajaxSubmitFormUpdateAreas(formName, areaCsvString) {
waitSpinnerShow();
+
+ var $form = jQuery("form[name='" + formName + "']");
hideErrorContainer = function() {
- jQuery('#content-messages').html('');
- jQuery('#content-messages').removeClass('errorMessage').fadeIn('fast');
+ clearErrorMessages()
}
- updateFunction = function(data) {
- if (data._ERROR_MESSAGE_LIST_ != undefined || data._ERROR_MESSAGE_ != undefined) {
- if (!jQuery('#content-messages').length) {
- //add this div just after app-navigation
- if(jQuery('#content-main-section')){
- jQuery('#content-main-section' ).before('<div id="content-messages" onclick="hideErrorContainer()"></div>');
- }
+ updateFunction = function(data, status, response) {
+ if (response.getResponseHeader("content-type").indexOf("application/json") === -1) {
+ var areaId = areaCsvString.substring(0, areaCsvString.indexOf(','));
+ if (areaId === "") {
+ areaId = $form[0].target
}
- jQuery('#content-messages').addClass('errorMessage');
- if (data._ERROR_MESSAGE_LIST_ != undefined && data._ERROR_MESSAGE_ != undefined) {
- jQuery('#content-messages' ).html(data._ERROR_MESSAGE_LIST_ + " " + data._ERROR_MESSAGE_);
- } else if (data._ERROR_MESSAGE_LIST_ != undefined) {
- jQuery('#content-messages' ).html(data._ERROR_MESSAGE_LIST_);
- } else {
- jQuery('#content-messages' ).html(data._ERROR_MESSAGE_);
- }
- showjGrowl();
+ updateArea(areaId, data)
} else {
- if (jQuery('#content-messages').length) {
- jQuery('#content-messages').html('');
- jQuery('#content-messages').removeClass('errorMessage').fadeIn("fast");
+ if (containsErrorMessages(data)) {
+ displayErrorMessages(data)
+ } else {
+ clearErrorMessages()
+ if (containsEventMessage(data)) {
+ displayEventMessage(data)
+ }
+ ajaxUpdateAreas(areaCsvString);
+ $form.trigger("closeCurrentModalAfterAjaxSubmitFormUpdateAreasInSuccess");
}
- ajaxUpdateAreas(areaCsvString);
}
- waitSpinnerHide();
}
-
- var $form = jQuery("form[name='" + formName + "']"),
- data = null,
+ var data = null,
processData = true,
enctype = $form.attr("enctype"),
contentType = "application/x-www-form-urlencoded; charset=UTF-8";
-
if (enctype && enctype.indexOf("multipart") !== -1) {
data = new FormData($form[0]);
contentType = false;
@@ -765,8 +830,13 @@ function ajaxSubmitFormUpdateAreas(formName, areaCsvString) {
url: $form.attr("action"),
data: data,
processData: processData,
- success: function(data) {
- updateFunction(data);
+ success: function(data, status, response) {
+ updateFunction(data, status, response);
+ waitSpinnerHide();
+ },
+ error: function(xhr, status, exception) {
+ errorRetrievingResponseFromServer(xhr, status, exception)
+ waitSpinnerHide();
}
});
}
@@ -1240,8 +1310,21 @@ function setUserLayoutPreferences(userPrefGroupTypeId, userPrefTypeId, userPrefV
});
}
-function waitSpinnerShow() {
- jSpinner = jQuery("#wait-spinner");
+/**
+ * if an id is present, return the area attendee the wait-spinner
+ * else use generic wait-spinner area
+ * @param id
+ * @returns {string}
+ */
+function resolveWaitSpinnerId(id) {
+ if (id === undefined) {
+ return 'wait-spinner';
+ }
+ return id + '-wait-spinner';
+}
+
+function waitSpinnerShow(id) {
+ jSpinner = jQuery("#" + resolveWaitSpinnerId(id));
if (!jSpinner.length) return
bdy = document.body;
@@ -1257,8 +1340,8 @@ function waitSpinnerShow() {
jSpinner.show();
}
-function waitSpinnerHide() {
- jQuery("#wait-spinner").hide()
+function waitSpinnerHide(id) {
+ jQuery("#" + resolveWaitSpinnerId(id)).hide()
}
/**
@@ -1515,7 +1598,7 @@ var importLibrary = function() {
}
})
).then(onSuccessFn).catch(onErrorFn || function (err) {
- alert('Error:\n'+err+'\n\nFile(s): \n' + urls.join('\n'))
+ console.error('Error:\n'+err+'\n\nFile(s): \n' + urls.join('\n'))
});
}
}();