ajax 저장, 수정 동작 시 클릭 방지&안내 문구 추가.

src/main/resources/static/css/common.css

@@ -31,3 +31,21 @@
   /*왜 안돌까?*/
   /*transform: rotate(90deg);*/
 }
+
+#fadeDiv{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #00000050;
+  z-index: 1090;
+}
+
+#fadeDiv > div{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+}

src/main/resources/static/js/admin/categoryMgt2.js

@@ -96,6 +96,7 @@ $(document).on('click', '#saveCategoryBtn', function (){
   })
   if(saveList.length !== 0) {
     if (confirm(saveList.length + "건을 저장하시겠습니까?")) {
+      contentFade("in");
       $.ajax({
         type : 'POST',
         url : "/admin/insertCategory2",
@@ -109,7 +110,8 @@ $(document).on('click', '#saveCategoryBtn', function (){
           sessionReload();
         },
         error : function(xhr, status) {
-
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
       })
     }

src/main/resources/static/js/admin/codeMgt.js

@@ -44,6 +44,7 @@ $(document).on('click', '#allValueCheckBox', function (event){
 $(document).on('click', '#saveBtn', function (){
   if(valueCheck()){
     if(confirm("저장하시겠습니까?")){
+      contentFade("in");
       const formData = new FormData($("#commonCodeForm")[0]);
       $.ajax({
         type : 'POST',
@@ -55,9 +56,11 @@ $(document).on('click', '#saveBtn', function (){
           alert("저장되었습니다.")
           $("#closeModalBtn").click();
           categoryCheck(data.category);
+          contentFade("out");
         },
         error : function(xhr, status) {
-
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
       })
     }
@@ -76,6 +79,7 @@ $(document).on('click', '#deleteCommonCodeBtn', function (){
   })
   if(codeList.length !== 0){
     if(confirm(codeList.length+"건을 삭제하시겠습니까?")){
+      contentFade("in");
       $.ajax({
         type : 'PUT',
         url : "/admin/deleteCode",
@@ -85,11 +89,12 @@ $(document).on('click', '#deleteCommonCodeBtn', function (){
           xhr.setRequestHeader($("[name='_csrf_header']").val(), $("[name='_csrf']").val());
         },
         success : function(data) {
-          alert("삭제되었습니다.");
+          alert("저장되었습니다.");
           getValues($(".categoryCheckBox:checked").val());
         },
         error : function(xhr, status) {
-
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
       })
     }

src/main/resources/static/js/admin/userMgt.js

@@ -41,6 +41,7 @@ $(document).on('change', '#passwordUpdateFlag', function (){
 $(document).on('click', '#saveBtn', function (){
   if(valueCheck("userInfoInsert")){
     if(confirm("저장하시겠습니까?")){
+      contentFade("in");
       const formData = new FormData($("#userInfoInsert")[0]);
       $.ajax({
         type : 'POST',
@@ -56,9 +57,11 @@ $(document).on('click', '#saveBtn', function (){
             $("#closeModalBtn").click();
             $("#searchBtn").click();
           }
+          contentFade("out");
         },
         error : function(xhr, status) {
-
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
       })
     }
@@ -68,6 +71,7 @@ $(document).on('click', '#saveBtn', function (){
 $(document).on('click', '#updateBtn', function (){
   if(valueCheck("userInfoUpdate")){
     if(confirm("저장하시겠습니까?")){
+      contentFade("in");
       const formData = new FormData($("#userInfoUpdate")[0]);
       $.ajax({
         type : 'POST',
@@ -78,9 +82,11 @@ $(document).on('click', '#updateBtn', function (){
         success : function(data) {
           alert("저장되었습니다.")
           $("#searchBtn").click();
+          contentFade("out");
         },
         error : function(xhr, status) {
-
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
       })
     }
@@ -102,6 +108,7 @@ $(document).on('click', '#saveCategoryRoleBtn', function (){
       categoryRole: 'T'
     });
   })
+  contentFade("in");
   $.ajax({
     type : 'POST',
     url : "/admin/insertCategoryRole",
@@ -112,9 +119,11 @@ $(document).on('click', '#saveCategoryRoleBtn', function (){
     },
     success : function(data) {
       alert("저장되었습니다.");
+      contentFade("out");
     },
     error : function(xhr, status) {
-
+      alert("저장에 실패하였습니다.")
+      contentFade("out");
     }
   })
 })

src/main/resources/static/js/board/contentList.js

@@ -66,6 +66,7 @@ $(document).on('click', '#zipDownBtn', function (){
 
 $(document).on('click', '#deleteBtn', function (){
   if(confirm("이 게시물을 삭제하시겠습니까?\n되돌릴 수 없습니다.")){
+    contentFade("in");
     $.ajax({
       type : 'POST',
       url : "/board/deleteContent",
@@ -78,7 +79,8 @@ $(document).on('click', '#deleteBtn', function (){
         location.reload();
       },
       error : function(xhr, status) {
-
+        alert("저장에 실패하였습니다");
+        contentFade("out")
       }
     })
   }

src/main/resources/static/js/board/contentWrite.js

@@ -86,6 +86,7 @@ $(document).on('click', '#saveBtn', function (){
           formData.append('fileSeq', $(el).attr("data-fileseq"));
         })
       }
+      contentFade("in");
       $.ajax({
         type : 'POST',
         data : formData,
@@ -97,9 +98,11 @@ $(document).on('click', '#saveBtn', function (){
             alert("저장되었습니다.");
             location.href = "/board/contentList?categorySeq="+$("#categorySeq").val();
           }
+          contentFade("out");
         },
         error : function(xhr, status) {
-
+          alert("저장에 실패하였습니다.")
+          contentFade("out");
         }
       })
     }

src/main/resources/static/js/common.js

@@ -9,6 +9,14 @@ $(document).on('click', '#moveLeftBtn', function (){
 $(document).on('click', '.contentWriteBtn', function (){
   location.href="/board/contentWrite"+(categorySeq!==undefined?("?categorySeq="+categorySeq):"");
 })
+function sessionReload(){
+  $.ajax({
+    url: '/refreshSession',
+    type: 'GET',
+    success: function(){location.reload();},
+    error:function(){}
+  });
+}
 function moveCategorySelectBody(direction){
   const categorySelectBody = $("#categorySelectBody");
   const nowX = categorySelectBody.scrollLeft();
@@ -34,3 +42,11 @@ function openMenu(parentSeq){
     openMenu(target.attr("data-parentseq"));
   }
 }
+
+function contentFade(action){
+  if(action === "in"){
+    $("#fadeDiv").show()
+  }else{
+    $("#fadeDiv").hide()
+  }
+}

src/main/resources/static/js/user/info.js

@@ -5,6 +5,7 @@ $(function (){
 $(document).on('click', '#savePasswordBtn', function (){
   if(passwordCheck()){
     const formData = new FormData($("#modifyPasswordForm")[0]);
+    contentFade("in")
     $.ajax({
       type : 'PUT',
       data : formData,
@@ -13,14 +14,16 @@ $(document).on('click', '#savePasswordBtn', function (){
       contentType: false,
       success : function(result) {
         if(result==="OK"){
-          alert("수정되었습니다.");
+          alert("저장되었습니다.");
           $("#passwordModifyModal").find(".btn-close").click();
         }else if(result==="passwordNotMatch"){
           alert("현재 비밀번호가 맞지 않습니다.");
         }
+        contentFade("out");
       },
       error : function(xhr, status) {
-
+        alert("저장에 실패하였습니다.");
+        contentFade("out");
       }
     })
   }

src/main/resources/static/js/user/modifyRequestList.js

@@ -48,6 +48,7 @@ $(document).on('click', '#approvalBtn', function (){
 })
 
 function modifyRequestStatusChange(data){
+  contentFade("in");
   $.ajax({
     type: "PUT",
     url: '/info/modifyRequestStateChange',
@@ -60,7 +61,8 @@ function modifyRequestStatusChange(data){
       location.reload()
     },
     error: function () {
-
+      alert("저장에 실패하였습니다.")
+      contentFade("out");
     }
   });
 }

src/main/resources/static/js/user/modifyRequestWrite.js

@@ -32,6 +32,7 @@ $(document).on('change', '.parentSeq', function (){
 
 function saveModifyRequest(){
   const formData = new FormData($("#requestForm")[0]);
+  contentFade("in");
   $.ajax({
     type : 'POST',
     data : formData,
@@ -45,7 +46,8 @@ function saveModifyRequest(){
       }
     },
     error : function(xhr, status) {
-
+      alert("저장에 실패하였습니다.")
+      contentFade("out");
     }
   })
 }

src/main/resources/templates/layout/layout.html

@@ -3,7 +3,7 @@
     xmlns:th="http://www.thymeleaf.org"
     xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
     xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
-  <head>
+<head>
   <meta charset="UTF-8" />
   <title>해양경찰청 파일관리 시스템</title>
 
@@ -44,18 +44,10 @@
           sessionReload()
         }
       })
-        function sessionReload(){
-          $.ajax({
-            url: '/refreshSession',
-            type: 'GET',
-            success: function(){location.reload();},
-            error:function(){}
-          });
-        }
     </script>
   </th:block>
-  </head>
+</head>
-  <body class="d-flex flex-column h-100">
+<body class="d-flex flex-column h-100">
   <header th:replace="fragments/header :: headerFragment"></header>
   <div class="h-100" sec:authorize="isAnonymous()" layout:fragment="content"></div>
   <div sec:authorize="isAuthenticated()" class="row mx-0">
@@ -67,5 +59,8 @@
     </div>
   </div>
   <footer th:replace="fragments/footer :: footerFragment"></footer>
-  </body>
+  <div id="fadeDiv" style="display: none;">
+    <div class="p-5 rounded"><h1>저장중입니다.</h1></div>
+  </div>
+</body>
 </html>