정보 수정시에 아이디 중복확인
이전에 회원가입할때 중복확인을 해줘서 가입하게 변경해줬지만 정보 수정할때 또한 적용을 시켜줘야하기때문에 이를 변경해준다
user/modifyForm.html 수정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
<div class="container">
</br>
</br>
<h2>정보수정</h2>
</br>
</br>
<form action="/user/modify" method="post">
<div class="form-group">
<label for="loginId"> 아이디 : </label>
<input type="text" class="form-control" id="loginId" th:value="${loginUser.loginId}" name="loginId">
<br>
<button type="button" class="btn btn-secondary" id="btn-doubleCheck">중복 확인</button>
<div id="resultTrue" class="text-primary"></div>
<div id="resultFalse" class="text-danger"></div>
</div>
<div class="form-group">
<label for="password"> 비밀번호 : </label>
<input type="password" class="form-control" id="password" th:value="${loginUser.password}" name="password">
</div>
<div class="form-group">
<label for="name"> 이름 : </label>
<input type="text" class="form-control" id="name" th:value="${loginUser.name}" name="name">
</div>
<div class="form-group">
<label for="phoneNumber"> 휴대폰 번호 : </label>
<input type="text" class="form-control" id="phoneNumber" th:value="${loginUser.phoneNumber}" name="phoneNumber">
</div>
<div class="form-group">
<label for="username"> 닉네임 : </label>
<input type="text" class="form-control" id="username" th:value="${loginUser.username}" name="username">
</div>
</br></br>
<button id="submitBtn" type="submit" class="btn btn-primary">정보 수정</button>
<p id="notSubmit" class="text-danger"></p>
</form>
</div>
<script>
$(document).ready(function () {
let isIdChecked = false;
$("#loginId").change(function () {
isIdChecked = false;
});
$("#btn-doubleCheck").click(function () { //중복확인 버튼을 눌렀을때
let data = {
loginId: $("#loginId").val(), //변수설정
}
$.ajax({
type: "POST",
url: "/auth/loginIdCheck",
data: JSON.stringify(data), //data변수를 JSON형태로 변환
contentType: "application/json; charset=utf-8",
//dataType: "json", 받을 데이터 타입, 받는 데이터 타입이 달라서 error가 계속 발생
success: function (data) {
if (data == "사용가능") {
isIdChecked = true;
$("#resultFalse").text(""); //id 값을 이용해서 ajax에서 값을 넣어주는것도 가능
$("#resultTrue").text("사용 가능한 아이디입니다!");
} else {
isIdChecked = false;
$("#resultFalse").text("중복된 아이디입니다!");
$("#resultTrue").text("");
}
},
error: function (req, status, err) {
alert("에러발생");
console.log(req);
}
});
});
$("#submitBtn").click(function (event) {
event.preventDefault(); //버튼 클릭시submit되는것을 방지
if (isIdChecked == true) {
$("form").submit(); //폼태그를 submit한다
} else {
$("#notSubmit").text("중복확인을 해주세요!")
}
});
});
</script>
</div>joinForm.html 의 코드를 옮겨서 수정
댓글 수정, 삭제
댓글 수정과 삭제를 등록때와 같이 ajax를 사용해서 비동기통신으로 작성해보자
삭제
각각의 댓글에 수정버튼과 삭제버튼을 추가
1번 코드
function takeReplyList(replyList) {
let replyHtml = "";
for (let i = 0; i < replyList.length; i++) {
replyHtml += "<input id='replyId' type='hidden' value='" + replyList[i].id + "'></input>";
replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
replyHtml += "<h4> 댓글 내용 : " + replyList[i].content + "</h4>";
replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
replyHtml += "<button style='float: right' class='btn btn-danger' onclick='deleteReply()'>삭제</button>";
replyHtml += "<button style='float: right' class='btn btn-warning' onclick='modifyReply()'>수정</button>";
$("#locReplyList").html(replyHtml);
}
}2번 코드
<script th:inline="javascript">
/*<![CDATA[*/
let replyList = /*[[ ${replyList} ]]*/;
/*]]*/
let replyHtml = "";
for (let i = 0; i < replyList.length; i++) {
replyHtml += "<input id='replyId' type='hidden' value='" + replyList[i].id + "'></input>";
replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
replyHtml += "<h4> 댓글 내용 : " + replyList[i].content + "</h4>";
replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
replyHtml += "<button style='float: right' class='btn btn-danger' onclick='deleteReply()'>삭제</button>";
replyHtml += "<button style='float: right' class='btn btn-warning' onclick='modifyReply()'>수정</button>";
$("#locReplyList").html(replyHtml);
}
</script>댓글을 등록할때가 아닌 페이지를 눌렀을때에 댓글창이 보이게하기위해서 타임리프를 이용해서 사용하는 함수를 하나 만들어줬고 수정버튼과 삭제버튼을 추가하고 각각 버튼에 id 값을 정해준다음에 클릭을 했을때에 각각해당의 함수가 실행되게 작성하였지만
$("#deleteReply").click(function(){});replyHtml += "<button id="deleteReply" style='float: right' class='btn btn-danger' onclick='deleteReply()'>삭제</button>";위에코드 처럼 모든 버튼에 id 값을 정해주었다. 하지만
이 구문을 2번 함수에서만 인식하고 실행되고 내가 새로 댓글을 추가하고 삭제버튼(1번 코드가 실행)을 누르면 제대로 인식하지 못했다. id 값도 두개의 코드에서 같게 작성해줬지만 오류가 계속발생해서 차라리 button에 onlcik 속성을 넣어주기로 했다.
제대로 deleteReply함수가 실행되고
@PostMapping("/reply/delete")
@ResponseBody
public List<Reply> delete(@RequestBody ReplyDeleteDto replyDeleteDto) {
replyService.deleteById(replyDeleteDto.getReplyId());
List<Reply> byBoardId = replyService.findByBoardId(replyDeleteDto.getBoardId());
return byBoardId;
}지워야할 댓글의 정보를 replyDeleteDto에 저장해서 받아왔구 해당 댓글을 삭제후에 다시 ReplyList를 받아와서 리턴시켜준다.
에러발생
function deleteReply() {
let data = {
boardId: $("#boardId").val(),
replyId: $("#replyId").val()
}
$.ajax({
url: "/reply/delete",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
//dataType : "json", //디폴트 값으로 알아서 맞춰서 해준다
success: function (replyList) {
console.log(replyList);
alert("댓글 삭제 완료");
takeReplyList(replyList);
},
error: function (req, status, error) {
alert("에러가 발생했습니다");
console.log(req);
},
});
}for (let i = 0; i < replyList.length; i++) {
replyHtml += "<input id='replyId' type='hidden' value='" + replyList[i].id + "'></input>";
replyHtml += "<input id='PreviewContent' type='hidden' value='" + replyList[i].content + "'></input>";
replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
replyHtml += "<h4> 댓글 내용 : " + replyList[i].content + "</h4>";
replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
replyHtml += "<button style='float: right' class='btn btn-danger' onclick='deleteReply()'>삭제</button>";
replyHtml += "<button style='float: right' class='btn btn-warning' onclick='modifyReply()'>수정</button>";
$("#locReplyList").html(replyHtml);
}replyId 즉 id 값을 사용해서 해당 댓글의 id 값을 이용해서 댓글을 삭제하려고 했으나 정상적으로 삭제되는 것이 아닌 어떤것을 눌러도 제일 위에있는 댓글이 삭제되는 상황 발생
이유는 위에 for문으로 보여지는 모든 댓글의 id 값이 똑같기때문에 오류 발생
내가 클릭한 부분의 정확한 댓글의 id 값을 가져올수 있는 방법이 필요하다
멋있는 사람 - 일단 하자