댓글 입력시 바로 반영되는 기능은 어떻게 추가할 수 있을까요?

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

장고 위주로 jQuery를 통한 Ajax 댓글 쓰기 구현

해결된 질문

작성

여태까지 구현한 것으로는 댓글을 입력하고나서 새로고침을 해야 작성한 댓글이 띄워지는데, 혹시 submit을 하자마자 바로 해당 포스팅에 댓글이 추가되도록 하려면 어떻게 해야하는지 궁금합니다.

docker python django react

답변 2

이진석

지식공유자

안녕하세요.

jQuery의 .submit 를 통해 지정 URL로 Ajax요청을 보내고, 성공응답을 받으면 (응답 상태코드 400 미만) success 콜백이 호출됩니다.

우리가 장고 응답에서 생성된 댓글에 대한 HTML을 응답토록 했기에, 이를 그대로 댓글 목록에 추가를 해주시는 것이구요. 이를 jQuery의 prepend API를 통해 추가를 했습니다. 이 부분에 대한 코드에 오류가 있었고, 이에 대한 논의가 아래의 질답에 있사오니 참고 부탁드리구요.

https://www.inflearn.com/questions/389526

html form 리셋은 jQuery를 통한 js 에서는 success 콜백 함수 끝에서 다음과 같이 해보실 수 있습니다.

$("#" + form_id)[0].reset();

확인해보시고 궁금하신 부분이나 진행상황을 댓글 주세요.

화이팅입니다. :-)

윤해빈

질문자

<script>
        $(function() {
            var form_id = "post-{{ post.pk }}-comment-form";
            $("#" + form_id).submit(function(e) {
                e.preventDefault();

                var options = {
                    success: function(responseText, statusText, xhr, $form) {
                        console.group("ajaxSubmit response");
                        console.log(responseText);
                        console.log(statusText);
                        console.log(xhr);
                        console.log($form);
                        console.groupEnd();
                        
                        $("#post-{{ post.pk }}-comment-list").prepend(responseText);
                        
                    }
                }; 
                $(this).ajaxSubmit(options);
                $("#" + form_id)[0].reset();
                $("#post-{{ post.pk }}-comment-list").load(window.location.href+" #post-{{ post.pk }}-comment-list");

            });
말씀해주신 부분을 힌트로해서 겨우 원하는 기능을 구현했네요 ㅎㅎㅎㅎ
감사합니다!

이진석

지식공유자

@윤해빈 : 잘 하셨습니다.

점차 익숙해지시면, 구현한 기능에 대해서 보다 개선할 부분은 없는 지 여러번 고민해보시길 권해드립니다. 실력이 쌓이다보면 그 전에는 보이지 않던 것들이 하나둘씩 보이기 시작하실 겁니다.

화이팅입니다. :-)

이진석

지식공유자

안녕하세요.

본 에피소드에서는 Ajax로 서버로 댓글생성을 요청하고, 그 응답에서 생성된 댓글내역을 가져와서 JS로 댓글목록에 추가하는 코드가 구현되어있습니다.

본 에피소드의 강의노트에도 써두었지만, 영상의 코드에 오류가 있습니다.

영상 말미에 html 내에서 id를 "post-{{ post.pk }}-comment-list" 로 지정한 부분이 있고, 이를 참고하기 위해 js 내에서 "post-10-comment-list" 라고 쓴 부분이 있습니다. 이는 "post-{{ post.pk }}-comment-list" 로 쓰시는 것이 맞습니다.

이는 https://www.inflearn.com/questions/389526 질문을 통해 이슈가 제기되었고, 제가 드린 답변을 통해 해결된 이슈입니다.

확인 부탁드립니다.

해결되셨다면, 본 질문의 상태를 해결됨으로 변경 부탁드립니다.

화이팅입니다. :-)

윤해빈

질문자

해당 부분은 문제가 없습니당

제가 원하는 것은

이 상태에서 댓글 쓰기를 하면 바로 test_01 44 now 라고 댓글창에 반영되고, message 박스 부분이 비워지는 동작을 구현해보고 싶습니다.

현재는 이상태에서 댓글 쓰기를 클릭하면 새로고침을 해야 반영된 댓글이 화면상에 나타나서 드린 질문입니다 ㅜㅜ

인프런 커뮤니티 질문&답변

댓글 입력시 바로 반영되는 기능은 어떻게 추가할 수 있을까요?