revise solution to override uswds code instead of deleting it

This commit is contained in:
Rachid Mrad 2024-06-18 16:56:08 -04:00
parent ff3d18eeae
commit f608e0b99c
No known key found for this signature in database
2 changed files with 21 additions and 11 deletions

View file

@ -1294,6 +1294,10 @@ document.addEventListener('DOMContentLoaded', function() {
* @param {*} pageToDisplay - If we're deleting the last item on a page that is not page 1, we'll need to display the previous page
*/
function deleteDomainRequest(domainRequestPk,pageToDisplay) {
// Use to debug uswds modal issues
//console.log('deleteDomainRequest')
// Get csrf token
const csrfToken = getCsrfToken();
// Create FormData object and append the CSRF token
@ -1348,6 +1352,15 @@ document.addEventListener('DOMContentLoaded', function() {
const tbody = document.querySelector('.domain-requests__table tbody');
tbody.innerHTML = '';
// Unload modals will re-inject the DOM with the initial placeholders to allow for .on() in regular use cases
// We do NOT want that as it will cause multiple placeholders and therfore multiple inits on delete,
// which will cause bad delete requests to be sent.
const preExistingModalPlaceholders = document.querySelectorAll('[data-placeholder-for^="toggle-delete-domain-alert"]');
preExistingModalPlaceholders.forEach(element => {
console.log('found one');
element.remove();
});
// remove any existing modal elements from the DOM so they can be properly re-initialized
// after the DOM content changes and there are new delete modal buttons added
unloadModals();

View file

@ -5311,17 +5311,14 @@ const cleanUpModal = baseComponent => {
const modalID = modalWrapper.getAttribute("id");
const originalLocationPlaceHolder = document.querySelector(`[data-placeholder-for="${modalID}"]`);
if (originalLocationPlaceHolder) {
// DOTGOV
// Why is this line here? It seems to be recreating the original placeholder and then adding a
// copy of it after that first placeholder, which is netralizing our call of off()
// for (let attributeIndex = 0; attributeIndex < originalLocationPlaceHolder.attributes.length; attributeIndex += 1) {
// const attribute = originalLocationPlaceHolder.attributes[attributeIndex];
// if (attribute.name.startsWith('data-original-')) {
// // data-original- is 14 long
// modalContent.setAttribute(attribute.name.substr(14), attribute.value);
// }
// }
//originalLocationPlaceHolder.after(modalContent);
for (let attributeIndex = 0; attributeIndex < originalLocationPlaceHolder.attributes.length; attributeIndex += 1) {
const attribute = originalLocationPlaceHolder.attributes[attributeIndex];
if (attribute.name.startsWith('data-original-')) {
// data-original- is 14 long
modalContent.setAttribute(attribute.name.substr(14), attribute.value);
}
}
originalLocationPlaceHolder.after(modalContent);
originalLocationPlaceHolder.parentElement.removeChild(originalLocationPlaceHolder);
}
modalWrapper.parentElement.removeChild(modalWrapper);