Disabled the Previous and Next Button as soon as they are clicked, to…

… prevent the user multiple clicking the button.
hlxsites · Jun 5, 2024 · ca26d4f · ca26d4f
1 parent 8ac3b46
commit ca26d4f
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js
@@ -327,6 +327,9 @@ function buildListFooter(rows, rowsPerPage) {
     footerPrev.classList.add('footer-pagination-button', 'prev');
     footerPrev.textContent = 'Prev';
     footerPrev.addEventListener('click', debounce((event) => {
+        // Disable the button
+        footerPrev.classList.remove('active');
+        footerPrev.classList.add('disabled');
         prevPage(event.target);
     }, 500));
 
@@ -338,6 +341,9 @@ function buildListFooter(rows, rowsPerPage) {
     buildCurrentPageDivElement(currentPage, footerPageBtnsWrapper);
 
     footerNext.addEventListener('click', debounce((event) => {
+        // Disable the button
+        footerNext.classList.remove('active');
+        footerNext.classList.add('disabled');
         nextPage(event.target);
     }, 500));
 
@@ -505,4 +511,4 @@ function sortColumn(dir, property) {
 function dateFormat(dateString) {
     const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available';
     return formattedDate;
-}
+}