diff --git a/static/js/utils/asyncTable.js b/static/js/utils/asyncTable.js index 174af2f94..8877c7991 100644 --- a/static/js/utils/asyncTable.js +++ b/static/js/utils/asyncTable.js @@ -58,7 +58,9 @@ asyncTableHeader = element.dataset.asyncTableDbHeader; } - asyncTableId = element.querySelector('table').id; + var rawTableId = element.querySelector('table').id; + cssIdPrefix = findCssIdPrefix(rawTableId); + asyncTableId = rawTableId.replace(cssIdPrefix, ''); // find scrolltable wrapper scrollTable = element.querySelector(ASYNC_TABLE_SCROLLTABLE_SELECTOR); @@ -209,10 +211,11 @@ var selectionStart = focusedInput.selectionStart; // remove the following part of the id to get rid of the random // (yet somewhat structured) prefix we got from nudging. - var matcher = /r\d*?__/; - var focusId = focusedInput.id.replace(matcher, ''); + var prefix = findCssIdPrefix(focusedInput.id); + var focusId = focusedInput.id.replace(prefix, ''); callback = function(wrapper) { - var toBeFocused = wrapper.querySelector('#' + cssIdPrefix + focusId); + var idPrefix = getLocalStorageParameter('cssIdPrefix'); + var toBeFocused = wrapper.querySelector('#' + idPrefix + focusId); if (toBeFocused) { toBeFocused.focus(); toBeFocused.selectionStart = selectionStart; @@ -341,14 +344,18 @@ // update table with new updateWrapperContents(response); - if (callback && typeof callback === 'function') { - callback(element); + if (UtilRegistry) { + UtilRegistry.setupAll(element); } - element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS); - element.classList.remove(ASYNC_TABLE_LOADING_CLASS); + if (callback && typeof callback === 'function') { + setLocalStorageParameter('cssIdPrefix', response.idPrefix); + callback(element); + setLocalStorageParameter('cssIdPrefix', ''); + } }).catch(function(err) { console.error(err); + }).finally(function() { element.classList.remove(ASYNC_TABLE_LOADING_CLASS); }); } @@ -356,18 +363,23 @@ function updateWrapperContents(response) { var newPage = document.createElement('div'); newPage.appendChild(response.element); - cssIdPrefix = response.idPrefix; - var newWrapperContents = newPage.querySelector('#' + cssIdPrefix + element.id); + var newWrapperContents = newPage.querySelector('#' + response.idPrefix + element.id); element.innerHTML = newWrapperContents.innerHTML; - - if (UtilRegistry) { - UtilRegistry.setupAll(element); - } } return init(); }; + // returns any random nudged prefix found in the given id + function findCssIdPrefix(id) { + var matcher = /r\d*?__/; + var maybePrefix = id.match(matcher); + if (maybePrefix && maybePrefix[0]) { + return maybePrefix[0] + } + return ''; + } + function setLocalStorageParameter(key, value) { var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {}; if (value !== null) {