diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 86bb1fe6e..e6ae0927a 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -33,6 +33,33 @@ const showElement = (element) => { element.classList.remove('display-none'); }; +/** + * Helper function that scrolls to an element + * @param {string} attributeName - The string "class" or "id" + * @param {string} attributeValue - The class or id name + */ +function ScrollToElement(attributeName, attributeValue) { + let targetEl = null; + + if (attributeName === 'class') { + targetEl = document.getElementsByClassName(attributeValue)[0]; + } else if (attributeName === 'id') { + targetEl = document.getElementById(attributeValue); + } else { + console.log('Error: unknown attribute name provided.'); + return; // Exit the function if an invalid attributeName is provided + } + + if (targetEl) { + const rect = targetEl.getBoundingClientRect(); + const scrollTop = window.scrollY || document.documentElement.scrollTop; + window.scrollTo({ + top: rect.top + scrollTop, + behavior: 'smooth' // Optional: for smooth scrolling + }); + } +} + /** Makes an element invisible. */ function makeHidden(el) { el.style.position = "absolute"; @@ -895,33 +922,6 @@ function unloadModals() { window.modal.off(); } -/** - * Helper function that scrolls to an element - * @param {string} attributeName - The string "class" or "id" - * @param {string} attributeValue - The class or id name - */ -function ScrollToElement(attributeName, attributeValue) { - let targetEl = null; - - if (attributeName === 'class') { - targetEl = document.getElementsByClassName(attributeValue)[0]; - } else if (attributeName === 'id') { - targetEl = document.getElementById(attributeValue); - } else { - console.log('Error: unknown attribute name provided.'); - return; // Exit the function if an invalid attributeName is provided - } - - if (targetEl) { - const rect = targetEl.getBoundingClientRect(); - const scrollTop = window.scrollY || document.documentElement.scrollTop; - window.scrollTo({ - top: rect.top + scrollTop, - behavior: 'smooth' // Optional: for smooth scrolling - }); - } -} - /** * Generalized function to update pagination for a list. * @param {string} itemName - The name displayed in the counter @@ -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,14 @@ 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 therefore 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 => { + 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(); @@ -1469,7 +1481,7 @@ document.addEventListener('DOMContentLoaded', function() { - ` + ` domainRequestsSectionWrapper.appendChild(modal); }