diff --git a/static/js/services/htmlHelpers.js b/static/js/services/htmlHelpers.js index bf7d1b163..ec025dc4b 100644 --- a/static/js/services/htmlHelpers.js +++ b/static/js/services/htmlHelpers.js @@ -3,27 +3,44 @@ window.HtmlHelpers = (function() { - function _prefixIds(element) { - var idPrefix = Math.floor(Math.random() * 100000); + // `parseResponse` takes a raw HttpClient response and an options object. + // Returns an object with `element` being an contextual fragment of the + // HTML in the response and `ifPrefix` being the prefix that was used to + // "unique-ify" the ids of the received HTML. + // Original Response IDs can optionally be kept by adding `originalIds: true` + // to the `options` object. + function parseResponse(response, options) { + options = options || {}; + + return response.text().then(function (responseText) { + var docFrag = document.createRange().createContextualFragment(responseText); + var idPrefix; + if (!options.originalIds) { + idPrefix = _getIdPrefix(); + _prefixIds(docFrag, idPrefix); + } + return Promise.resolve({ idPrefix: idPrefix, element: docFrag }); + }, + function (error) { + return Promise.reject(error); + }).catch(function (error) { console.error(error); }); + } + + function _prefixIds(element, idPrefix) { var idAttrs = ['id', 'for', 'data-conditional-input', 'data-modal-trigger']; idAttrs.forEach(function(attr) { Array.from(element.querySelectorAll('[' + attr + ']')).forEach(function(input) { - var value = idPrefix + '__' + input.getAttribute(attr); + var value = idPrefix + input.getAttribute(attr); input.setAttribute(attr, value); }); }); } - function parseResponse(response) { - return response.text().then(function (responseText) { - var docFrag = document.createRange().createContextualFragment(responseText); - _prefixIds(docFrag); - return Promise.resolve(docFrag); - }, - function (error) { - return Promise.reject(error); - }).catch(function (error) { console.error(error); }); + function _getIdPrefix() { + // leading 'r'(andom) to overcome the fact that IDs + // starting with a numeric value are not valid in CSS + return 'r' + Math.floor(Math.random() * 100000) + '__'; } return { diff --git a/static/js/utils/asyncTable.js b/static/js/utils/asyncTable.js index 32a7bf844..6e8ee66e7 100644 --- a/static/js/utils/asyncTable.js +++ b/static/js/utils/asyncTable.js @@ -324,14 +324,14 @@ headers: headers, accept: HttpClient.ACCEPT.TEXT_HTML, }).then(function(response) { - return HtmlHelpers.parseResponse(response); - }).then(function(responseElement) { + return HtmlHelpers.parseResponse(response, { originalIds: true }); + }).then(function(response) { setLocalStorageParameter('currentTableUrl', url.href); // reset table removeListeners(); element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS); // update table with new - updateWrapperContents(responseElement); + updateWrapperContents(response); if (callback && typeof callback === 'function') { callback(element); @@ -344,10 +344,10 @@ }); } - function updateWrapperContents(newHtmlElement) { + function updateWrapperContents(response) { var newPage = document.createElement('div'); - newPage.appendChild(newHtmlElement); - var newWrapperContents = newPage.querySelector('#' + element.id + '__' + element.id); + newPage.appendChild(response.element); + var newWrapperContents = newPage.querySelector('#' + element.id); element.innerHTML = newWrapperContents.innerHTML; if (UtilRegistry) { diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js index e0d1578e6..00f873ced 100644 --- a/static/js/utils/massInput.js +++ b/static/js/utils/massInput.js @@ -128,8 +128,8 @@ accept: HttpClient.ACCEPT.TEXT_HTML, }).then(function(response) { return HtmlHelpers.parseResponse(response); - }).then(function(responseElement) { - processResponse(responseElement); + }).then(function(response) { + processResponse(response.element); if (isAddCell) { reFocusAddCell(); } diff --git a/static/js/utils/modal.js b/static/js/utils/modal.js index b994b79c8..84efe8a1a 100644 --- a/static/js/utils/modal.js +++ b/static/js/utils/modal.js @@ -173,8 +173,10 @@ headers: MODAL_HEADERS, accept: HttpClient.ACCEPT.TEXT_HTML, }).then(function(response) { - return HtmlHelpers.parseResponse(response, element.id); - }).then(processResponse); + return HtmlHelpers.parseResponse(response); + }).then(function(response) { + processResponse(response.element); + }); } function processResponse(responseElement) {