diff --git a/static/js/utils/asyncForm.js b/static/js/utils/asyncForm.js index c7fde55c5..4b7b94951 100644 --- a/static/js/utils/asyncForm.js +++ b/static/js/utils/asyncForm.js @@ -21,7 +21,10 @@ var ASYNC_FORM_RESPONSE_CLASS = 'async-form__response'; var ASYNC_FORM_LOADING_CLASS = 'async-form--loading'; var ASYNC_FORM_MIN_DELAY = 600; - var ASYNC_FORM_DEFAULT_FAILURE_MESSAGE = 'The response we received from the server did not match what we expected. Please let us know this happened via the help widget in the top navigation.'; + + var MODAL_SELECTOR = '.modal'; + var MODAL_HEADER_KEY = 'Is-Modal'; + var MODAL_HEADER_VALUE = 'True'; var asyncFormUtil = function(element) { @@ -72,6 +75,10 @@ function submitHandler(event) { event.preventDefault(); + if (!HttpClient) { + throw new Error('HttpClient not found! Can\'t fetch submit form asynchronously!'); + } + element.classList.add(ASYNC_FORM_LOADING_CLASS) lastRequestTimestamp = Date.now(); @@ -79,13 +86,12 @@ var headers = { }; var body = new FormData(element); - if (options && options.headers) { - Object.keys(options.headers).forEach(function(headerKey) { - headers[headerKey] = options.headers[headerKey]; - }); + var isModal = element.closest(MODAL_SELECTOR); + if (!!isModal) { + headers[MODAL_HEADER_KEY] = MODAL_HEADER_VALUE; } - window.utils.httpClient.post(url, headers, body) + HttpClient.post(url, headers, body) .then(function(response) { if (response.headers.get("content-type").indexOf("application/json") !== -1) {// checking response header return response.json(); @@ -95,10 +101,7 @@ }).then(function(response) { processResponse(response[0]); }).catch(function(error) { - var failureMessage = ASYNC_FORM_DEFAULT_FAILURE_MESSAGE; - if (options.i18n && options.i18n.asyncFormFailure) { - failureMessage = options.i18n.asyncFormFailure; - } + var failureMessage = I18n.get('asyncFormFailure'); processResponse({ content: failureMessage }); element.classList.remove(ASYNC_FORM_LOADING_CLASS);