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) {