댓글 누적 현상

댓글 누적 문제

내가 학원에서 팀플 프로젝트할 때 댓글은 모달창에 ajax로 처리했다. 그러나 모두가 같은 방식으로 하는건 아니라서, 다음과 같이 textarea에서 댓글 정보를 받아와 ajax로 처리하는 경우도 있다.

function fn_saveCmmt(){
	
	$.ajax({
		url : "${contextPath}/bbs/insertBbsCmmt.do",
		type : "post",
		data : $("#cmmtFrm").serialize(),
		success : function(data){
			var obj = JSON.parse(data);
			if(obj.resultCode =="S"){
				alert(obj.resultMsg);
				//화면 재조회
				fn_search();
			}else{
				alert(obj.resultMsg);
				//화면 재조회
				fn_search();
			}
		},
		error : function( jqXHR, textStatus, errorThrown ) {
			alert( textStatus );
			alert( errorThrown );
		}
	})
}

위에서 보듯, Form태그 정보를 가져와 ajax로 보내는 함수다. 그럼 Form 태그 안을 살펴보면 이렇다

<form commandName="bbsCmteVO" name="cmmtFrm" id="cmmtFrm" method="post" enctype="multipart/form-data">

    <input type="hidden" name="boardSrno" id="boardno" value="${resultMap.boardno }"/>
    <input type="hidden" name="cmmtno" id="cmmtno" value=""/>
	<!-- 댓글작성 -->

   	 <div>
    	<legend>댓글 입력 영역</legend>
   		<dl class="opinion f_clear"><dt>댓글쓰기 </dt></dl>
   		<dl class="writing">
			<dt>댓글</dt>
			<dd>
				<textarea cols="85" rows="3" name="cmmt" title="댓글 입력"></textarea>
				<a href="#"  class="btn_cmt_write fr search_blue" onclick="javascript:fn_saveCmmt();">등록</a>
			</dd>
		</dl>
   	 </div>
	<br/>
	<!--댓글 목록  -->
	<div class="cmt_list mt20" style="border-top:none;" >
		<p class="t_hide"><strong>일반 댓글</strong></p>
		<div id="cmmtView">
			<dl class="cmt_item" ></dl>
		</div>
	</div>	
	
</form>

이때 발생되는 문제가 첫 댓글 입력을 하고 나서 두 번째 댓글을 입력시, 첫 댓글 내용이 같이 붙여온다. 예를 들어 첫 댓글을 “안녕하세요” 달고나서 두번때 댓글을 “날씨가 좋습니다” 달으면 화면에 두번째 댓글이 “안녕하세요, 날씨가 좋습니다” 출력된다는 말이다.
처음에는 검색해서 textarea에 내용을 ajax로 통신할 경우, textarea에 입력했던 내용이 계속 남아 생긴다는 글을 찾아 이게 원인인줄 알았다. 그래서 함수 안의 ajax에 textarea 아이디 cmmt를 지정해 내용을 비워주는 코드를 넣었는데 그래도 문제는 해결되지 않았다.
해결방법은 간단하게도 댓글 목록 부분을 새로 form태그로 감싸는 방법이었다. 댓글 목록과 댓글 입력이 같은 form태그 안에 있어 이전 댓글목록도 ajax data에 담겨져 계속 텍스트가 누적되어 보내졌던 것이다. 아래와 같이 댓글 입력과 댓글 목록 부분을 각각 다른 form 태그로 감쌌다.

<form commandName="bbsCmteVO" name="cmmtFrm" id="cmmtFrm" method="post" enctype="multipart/form-data">

    <input type="hidden" name="boardSrno" id="boardno" value="${resultMap.boardno }"/>
    <input type="hidden" name="cmmtno" id="cmmtno" value=""/>
	<!-- 댓글작성 -->

   	 <div>
    	<legend>댓글 입력 영역</legend>
   		<dl class="opinion f_clear"><dt>댓글쓰기 </dt></dl>
   		<dl class="writing">
			<dt>댓글</dt>
			<dd>
				<textarea cols="85" rows="3" name="cmmt" title="댓글 입력"></textarea>
				<a href="#"  class="btn_cmt_write fr search_blue" onclick="javascript:fn_saveCmmt();">등록</a>
			</dd>
		</dl>
   	 </div>
	<br/>
</form>
<form commandName="bbsCmteVO" name="cmmtFrmList" id="cmmtFrmList" method="post" enctype="multipart/form-data">

    <input type="hidden" name="boardno" id="boardno" value="${resultMap.boarno }"/>
    <input type="hidden" name="cmmtno" id="cmmtno" value=""/>
	<!--댓글 목록  -->
	<div class="cmt_list mt20" style="border-top:none;" >
		<p class="t_hide"><strong>일반 댓글</strong></p>
		<div id="cmmtView">
			<dl class="cmt_item" ></dl>
		</div>
	</div>	
	
</form>

댓글 누적 문제

Share this post