#509 - prevent page reload on requesting a category delete

src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java

@@ -60,8 +60,8 @@ public class CategoryController extends BaseController
 		model.addAttribute("availableCategories", availableCategories);
 		model.addAttribute("preselectedCategory", categoryService.findByType(CategoryType.NONE));
 
-		model.addAttribute("currentCategory", categoryService.findById(ID).orElseThrow());
-		return "categories/categories";
+		model.addAttribute("categoryToDelete", categoryService.findById(ID).orElseThrow());
+		return "categories/deleteCategoryModal";
 	}
 
 	@PostMapping(value = "/{ID}/delete")

src/main/resources/static/js/categories.js

@@ -35,11 +35,18 @@ $(document).ready(function()
         });
     }
 
+    $('.button-request-delete-category').click(function()
+    {
+        fetchAndShowModalContent(this.dataset.url, '#deleteModalContainerOnDemand', '#modalConfirmDelete', function(){
+            initCustomSelects();
+
             $('#buttonDeleteCategory').click(function()
             {
                 document.getElementById("formDestinationCategory").submit();
             });
          });
+    });
+});
 
 function removeActive()
 {

src/main/resources/static/js/customSelect.js

 $(document).ready(function()
+{
+    initCustomSelects();
+});
+
+function initCustomSelects()
 {
     let allCustomSelects = [];
 
@@ -75,7 +80,7 @@ $(document).ready(function()
             }
         }
     });
-});
+}
 
 class CustomSelect
 {

src/main/resources/static/js/fetchModalContent.js

+function fetchAndShowModalContent(url, containerID, modalID, callback)
+{
+    let modal = $(modalID).modal();
+    if(modal.isOpen)
+    {
+        return;
+    }
+
+    $.ajax({
+        type: 'GET',
+        url: url,
+        data: {},
+        success: function(data)
+        {
+            $(containerID).html(data);
+            $(modalID).modal();
+            $(modalID).modal('open');
+            callback();
+        }
+    });
+}
\ No newline at end of file

src/main/resources/templates/categories/categories.ftl

@@ -49,7 +49,7 @@
                                     <@header.buttonFlat url='/categories/' + category.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
                                     <@header.buttonFlat url='/search?searchCategory=true&searchText=' + categoryName icon='search' localizationKey='' classes="no-padding text-default"/>
                                     <#if (category.getType().name() == "CUSTOM")>
-                                        <@header.buttonFlat url='/categories/' + category.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default"/>
+                                        <@header.buttonFlat url='/categories/' + category.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-category" isDataUrl=true/>
                                     </#if>
                                 </td>
                             </tr>
@@ -62,27 +62,7 @@
                 </@header.content>
             </div>
 
-            <#if currentCategory??>
-                <!-- confirm delete modal -->
-                <div id="modalConfirmDelete" class="modal categoryDeleteModal background-color">
-                    <div class="modal-content">
-                        <h4>${locale.getString("info.title.category.delete")}</h4>
-                        <p>${locale.getString("info.text.category.delete", currentCategory.name)}</p>
-                        <p>${locale.getString("info.text.category.delete.move")}</p>
-
-                        <form name="DestinationCategory" id="formDestinationCategory" action="<@s.url '/categories/${currentCategory.ID?c}/delete'/>" method="post">
-                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-                            <#import "../helpers/validation.ftl" as validation>
-                            <@customSelectMacros.customCategorySelect availableCategories preselectedCategory "col s12 m12 l8 offset-l2" locale.getString("info.title.category.delete.move")/>
-                        </form>
-                    </div>
-
-                    <div class="modal-footer background-color">
-                        <@header.buttonLink url='/categories' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white'/>
-                        <@header.buttonLink url='' icon='delete' localizationKey='delete' color='green' id='buttonDeleteCategory' classes='modal-action modal-close text-white' noUrl=true/>
-                    </div>
-                </div>
-            </#if>
+            <div id="deleteModalContainerOnDemand"></div>
         </main>
 
         <!--  Scripts-->

src/main/resources/templates/categories/deleteCategoryModal.ftl

+<#global locale = static["de.thecodelabs.utils.util.Localization"]>
+<#import "/spring.ftl" as s>
+<#import "../helpers/header.ftl" as header>
+<#import "../helpers/customSelectMacros.ftl" as customSelectMacros>
+
+<div id="modalConfirmDelete" class="modal categoryDeleteModal background-color">
+    <div class="modal-content">
+        <h4>${locale.getString("info.title.category.delete")}</h4>
+        <p>${locale.getString("info.text.category.delete", categoryToDelete.name)}</p>
+        <p>${locale.getString("info.text.category.delete.move")}</p>
+
+        <form name="DestinationCategory" id="formDestinationCategory" action="<@s.url '/categories/${categoryToDelete.ID?c}/delete'/>" method="post">
+            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+            <#import "../helpers/validation.ftl" as validation>
+            <@customSelectMacros.customCategorySelect availableCategories preselectedCategory "col s12 m12 l8 offset-l2" locale.getString("info.title.category.delete.move")/>
+        </form>
+    </div>
+
+    <div class="modal-footer background-color">
+        <@header.buttonLink url='/categories' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white'/>
+        <@header.buttonLink url='' icon='delete' localizationKey='delete' color='green' id='buttonDeleteCategory' classes='modal-action modal-close text-white' noUrl=true/>
+    </div>
+</div>
\ No newline at end of file

src/main/resources/templates/helpers/scripts.ftl

@@ -9,6 +9,8 @@
     <script src="<@s.url '/js/hotkeys.js'/>"></script>
     <script src="<@s.url '/js/main.js'/>"></script>
     <script src="<@s.url '/js/customSelect.js'/>"></script>
+    <script src="<@s.url '/js/fetchModalContent.js'/>"></script>
+
     <script>
         accountPlaceholderName = "${locale.getString("account.all")}";
     </script>