[jQuery] Ajax 이용해서 게시글 수정 구현해보기 (feat. event.target)

개인 프로젝트 작업 중 Ajax를 이용해서 게시판 수정 기능을 구현하고 싶었다.

=> 이렇게!!

ajax 구현은 처음이라 많이 복잡하고 어렵게 느껴졌는데, 차근차근 하나씩 코드를 작성해보고 테스트를 해가며 구현했더니 막상 완성된 코드는 그렇게 어렵지 않다는 것을 알게 되었다!

우선, html 코드 부분

/* 생략 */
	<ul class="content-list">
    	<li class="writer"><%= tasks.username %></li>
        <li>
        	<div class="date"><%= date %></div>
        </li>
        <hr>
        <div class="item-edit">
        	<li>
            	<div class="item-content" id="content">
                	<%= tasks.content %>
                </div>
            </li>
            <% if (username == tasks.username) { %>
            <li>
            	<div class="list-btn">
                	<button id="update-btn" value="<%=tasks._id %>" type="button">수정</button>
                    <button id="remove-btn" onclick="location.href='/board/remove/<%= tasks._id %>'" type="button">삭제</button>
                </div>
            </li>
        </div>
        <% } %>
    </ul>
/* 생략 */

html코드에서 jQuery로 게시글의 id 값을 어떻게 가져올까 고민하다가 수정하기 버튼에 value값으로 넣어주었다. (jquery로 가져오기 편하게)

이제 수정하기 버튼을 누르면 div 내용 태그에서 textarea 태그가 나오게 jquery로 구현해보자

<script>
	$(document).on("click", "#update-btn", function(e) {
    	ids = $(this).val();	// 클릭된 수정버튼의 id값 변수에 담기
        
        $.ajax({
        	url: '/board/edit/'+ids,	// /board/edit/:id의 형태
            dataType: 'json',
            type: 'GET',
            data: {
            	id: $("$update-btn").val(),	// 서버로 보낼 데이터값
            },
            success: function(result) {
            	var updatebtn = e.target.parentElement.parentElement.parentElement.parentElement;
                var textcontent = updatebtn.children[3].children[0].textContent.trim();
                
                if (result) {
                	updatebtn.children[3].innerHTML=`
                    	<form action="/board/update/${ids}" method="post">
                        	<textarea name="content" id="edit-box" autocomplete="off">${textcontent}</textarea>
                            <button id="update-complete-btn" value="${ids}" type="submit">완료</button>
                            <button id="cancel-btn" type="button">취소</button>
                        </form>
                    `;
                }
            }
        })
    })
</script>

success에서 updatebtn 버튼을 가져오기위해 처음에 ${this}를 작성했는데, 아무리해도 값을 가져오지 못했다. 열심히 구글링을 한 결과, e.target을 사용해야한다는 것을 알게되었다.
또한, 여기서, this와 event.target의 차이를 알게되었다.

구분	설명
this	핸들러가 실제로 할당된 요소
event.target	이벤트가 실행된 대상

parentElement를 남발한 부분은 맞게한건지 아직도 잘 모르겠지만 일단 내가 찾은 방법으로는 여기까지가 한계라 더 좋은 코드로 수정해보도록 할 것이다!

다음은, 글을 수정하고 완료 버튼을 누르면 서버로 요청을 보내 실제 DB가 수정이 되는 코드이다.

$(document).on("click", "#update-complete-btn", function(e) {
	ids = $(this).val();
    
    $.ajax({
    	url: '/board/update'+ids,
        dataType: 'json',
        type: 'POST',
        data: {
        	content: e.target.parentElement.children[0].textContent.trim(),
        },
        success: function(result) {
        	if (result) {
            	alert("글이 정상적으로 수정되었습니다.");
            }
        }
    })
})

위 코드의 경우, POST 방식이기 때문에 서버로 데이터를 보내주기만하면 실행이 되는 코드라 그다지 복잡한건 없다. 다만, 내가 원하는 것은 완료될 때도 마찬가지로 새로고침 없이 해당 코드만 변경되었으면 하는데, 아직 더 자세히 몰라서 일단은 서버에서 redirect 하는 방식으로 해결했다. 완료가 되면 화면이 깜빡거리면서 새로고침 되는데 일단 지금은 구현된 것으로 만족

마지막으로, 수정하기 버튼을 누른 후 단순히 취소했을 때 코드이다.

$(document).on("click", "#cancel-btn", function(e) {
	$.ajax({
    	url: '/board',
        success: function(result) {
        	var updatebtn = e.target.parentElement;
            var textcontent = updatebtn.children[0].textContent.trim();
            
            if (result) {
            	updatebtn.parentElement.innerHTML=`
                	<li>
                    	<div class="item-content" id="content">
                        	${textcontent}
                        </div>
                    </li>
                    <li>
                    	<div class="list-btn">
                        	<button id="update-btn" value="${result._id}" type="button">수정</button>
                            <button type="button" onclick="location.href='/board/remove/${result._id}'">삭제</button>
                        </div>
                    </li>
                `;
            }
        }
    })
})

취소 버튼이 은근 간단한듯 어려웠다. 단순히 원래 코드로 돌아가야하는게 왜이렇게 어려웠는지...
그냥 아주 처음에 작성한 html 코드를 그대로 가져왔다.

---

참고한 사이트
https://blog.naver.com/psj9102/221061162580
https://devmg.tistory.com/58
https://jmjmjm.tistory.com/134