#509 - prevent page reload on requesting an account delete

src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java

@@ -76,8 +76,8 @@ public class AccountController extends BaseController
 	public String requestDeleteAccount(Model model, @PathVariable("ID") Integer ID)
 	{
 		model.addAttribute("accounts", accountService.getAllEntitiesAsc());
-		model.addAttribute("currentAccount", accountService.getRepository().getOne(ID));
-		return "accounts/accounts";
+		model.addAttribute("accountToDelete", accountService.getRepository().getOne(ID));
+		return "accounts/deleteAccountModal";
 	}
 
 	@GetMapping("/{ID}/delete")

src/main/resources/static/js/accounts.js

 $(document).ready(function()
 {
-    if($('#modalConfirmDelete').length)
-    {
-        $('#modalConfirmDelete').modal('open');
-    }
-
     if($('#modalAccountNotDeletable').length)
     {
         $('#modalAccountNotDeletable').modal('open');
@@ -14,4 +9,9 @@ $(document).ready(function()
     {
         document.getElementById('account-name').focus();
     }
+
+    $('.button-request-delete-account').click(function()
+    {
+        fetchAndShowModalContent(this.dataset.url, '#deleteModalContainerOnDemand', '#modalConfirmDelete', function(){});
+    });
 });

src/main/resources/templates/accounts/accounts.ftl

@@ -44,7 +44,7 @@
                                     <td>${account.getName()}</td>
                                     <td>
                                         <a href="<@s.url '/accounts/${account.getID()?c}/edit'/>" class="btn-flat no-padding text-default"><i class="material-icons left">edit</i></a>
-                                        <a href="<@s.url '/accounts/${account.getID()?c}/requestDelete'/>" class="btn-flat no-padding text-default"><i class="material-icons left no-margin">delete</i></a>
+                                        <@header.buttonFlat url='/accounts/' + account.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-account" isDataUrl=true/>
                                     </td>
                                 </tr>
                             </#if>
@@ -56,13 +56,10 @@
                 </div>
                 </@header.content>
             </div>
+
+            <div id="deleteModalContainerOnDemand"></div>
         </main>
 
-        <#if currentAccount??>
-            <@header.modalConfirmDelete title=locale.getString("info.title.account.delete") confirmUrl='/accounts' cancelUrlBase="/accounts" itemId=currentAccount.getID() confirmButtonTextKey="info.button.account.delete">
-                <p>${locale.getString("info.text.account.delete", currentAccount.getName(), currentAccount.getReferringTransactions()?size)}</p>
-            </@header.modalConfirmDelete>
-        </#if>
 
         <#if accountNotDeletable??>
             <!-- warning account not deletable -->

src/main/resources/templates/accounts/deleteAccountModal.ftl

+<#global locale = static["de.thecodelabs.utils.util.Localization"]>
+<#import "/spring.ftl" as s>
+<#import "../helpers/header.ftl" as header>
+
+<@header.modalConfirmDelete title=locale.getString("info.title.account.delete") confirmUrl='/accounts' itemId=accountToDelete.getID() confirmButtonTextKey="info.button.account.delete">
+    <p>${locale.getString("info.text.account.delete", accountToDelete.getName(), accountToDelete.getReferringTransactions()?size)}</p>
+</@header.modalConfirmDelete>
\ No newline at end of file