From 0b4cdf7a69b5fe10c82c696a08ca5dd8ef10db34 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Mon, 17 Jun 2024 17:50:10 -0400 Subject: [PATCH 1/6] Fix delete request bug to ensure event listeners are not duplicated --- src/registrar/assets/js/get-gov.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 86bb1fe6e..371271c8b 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1507,8 +1507,13 @@ document.addEventListener('DOMContentLoaded', function() { modals.forEach(modal => { const submitButton = modal.querySelector('.usa-modal__submit'); const closeButton = modal.querySelector('.usa-modal__close'); - submitButton.addEventListener('click', function() { - pk = submitButton.getAttribute('data-pk'); + + // Clone the submit button to remove all existing event listeners + const newSubmitButton = submitButton.cloneNode(true); + submitButton.parentNode.replaceChild(newSubmitButton, submitButton); + + newSubmitButton.addEventListener('click', function() { + pk = newSubmitButton.getAttribute('data-pk'); // Close the modal to remove the USWDS UI local classes closeButton.click(); // If we're deleting the last item on a page that is not page 1, we'll need to refresh the display to the previous page From ff3d18eeaefc97a4dadd7e5d636b6775f3c6bfeb Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 18 Jun 2024 14:57:48 -0400 Subject: [PATCH 2/6] trace down the modal unload error and fix it in uswds --- src/registrar/assets/js/get-gov.js | 65 ++++++++++++------------- src/registrar/assets/js/uswds-edited.js | 19 +++++--- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 371271c8b..4c4f9a9c6 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 @@ -1469,7 +1469,7 @@ document.addEventListener('DOMContentLoaded', function() { - ` + ` domainRequestsSectionWrapper.appendChild(modal); } @@ -1507,13 +1507,10 @@ document.addEventListener('DOMContentLoaded', function() { modals.forEach(modal => { const submitButton = modal.querySelector('.usa-modal__submit'); const closeButton = modal.querySelector('.usa-modal__close'); - - // Clone the submit button to remove all existing event listeners - const newSubmitButton = submitButton.cloneNode(true); - submitButton.parentNode.replaceChild(newSubmitButton, submitButton); - newSubmitButton.addEventListener('click', function() { - pk = newSubmitButton.getAttribute('data-pk'); + + submitButton.addEventListener('click', function() { + pk = submitButton.getAttribute('data-pk'); // Close the modal to remove the USWDS UI local classes closeButton.click(); // If we're deleting the last item on a page that is not page 1, we'll need to refresh the display to the previous page diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js index e73f3b6c0..f849e944e 100644 --- a/src/registrar/assets/js/uswds-edited.js +++ b/src/registrar/assets/js/uswds-edited.js @@ -5311,14 +5311,17 @@ const cleanUpModal = baseComponent => { const modalID = modalWrapper.getAttribute("id"); const originalLocationPlaceHolder = document.querySelector(`[data-placeholder-for="${modalID}"]`); if (originalLocationPlaceHolder) { - 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); + // 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); originalLocationPlaceHolder.parentElement.removeChild(originalLocationPlaceHolder); } modalWrapper.parentElement.removeChild(modalWrapper); From f608e0b99c3f1279abece406cb6517426902ccab Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 18 Jun 2024 16:56:08 -0400 Subject: [PATCH 3/6] revise solution to override uswds code instead of deleting it --- src/registrar/assets/js/get-gov.js | 13 +++++++++++++ src/registrar/assets/js/uswds-edited.js | 19 ++++++++----------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 4c4f9a9c6..4388395d4 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -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(); diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js index f849e944e..e73f3b6c0 100644 --- a/src/registrar/assets/js/uswds-edited.js +++ b/src/registrar/assets/js/uswds-edited.js @@ -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); From 0d3e38ce70c031ec87be12064087df9fc0b9dc35 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 18 Jun 2024 16:57:27 -0400 Subject: [PATCH 4/6] cleanup --- src/registrar/assets/js/get-gov.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 4388395d4..aa0230043 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1520,8 +1520,6 @@ document.addEventListener('DOMContentLoaded', function() { modals.forEach(modal => { const submitButton = modal.querySelector('.usa-modal__submit'); const closeButton = modal.querySelector('.usa-modal__close'); - - submitButton.addEventListener('click', function() { pk = submitButton.getAttribute('data-pk'); // Close the modal to remove the USWDS UI local classes From 4b1ca63016a0f6bc156122f7a03720c7878f5dc4 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 18 Jun 2024 17:01:06 -0400 Subject: [PATCH 5/6] cleanup --- src/registrar/assets/js/get-gov.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index aa0230043..45f37a082 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1353,7 +1353,7 @@ document.addEventListener('DOMContentLoaded', function() { 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, + // 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 => { From 8d8e2be9596b4f785bcde0d3ba5c020d6b0aede6 Mon Sep 17 00:00:00 2001 From: Rachid Mrad <107004823+rachidatecs@users.noreply.github.com> Date: Thu, 20 Jun 2024 17:00:42 -0400 Subject: [PATCH 6/6] Update src/registrar/assets/js/get-gov.js Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com> --- src/registrar/assets/js/get-gov.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 45f37a082..e6ae0927a 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1357,7 +1357,6 @@ document.addEventListener('DOMContentLoaded', function() { // 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(); });