(웹개발) 댓글 수정/삭제

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

공부하는 블로그

(웹개발) 댓글 수정/삭제 본문

Develop/웹개발

(웹개발) 댓글 수정/삭제

모아&모지리 2017. 10. 13. 12:24

deleteFlag 칼럼을 만들어서 y면 삭제된 것처럼 보여주고 n이면 보여주는 것이 실무 방식이다.

JSP파일

추가

수정삭제 버튼

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<jsp:include page="/WEB-INF/view/common/header.jsp" />

var replyId = 0;

$().ready(

function() {

<c:if test="${sessionScope._USER_.id == boardVO.id}">

$("#deleteBtn")

.click(

function() {

if (confirm("이 글을 정말 삭제하시겠습니까?")) {

location.href = "<c:url value='/board/delete/${boardVO.boardId}' />";

}

});

</c:if>

<c:if test="${not empty sessionScope._USER_}">

tinymce.activeEditor.on("keyup", function(e) {

var keyCode = e.keyCode;

var ctrlKey = e.ctrlKey;

var altKey = e.altKey;

if ( ctrlKey && altKey && keyCode == 83 ) {

// URL : /Board/reply/write

// Parameter : 1. BoardId 2. Reply내용 3. 상위 댓글 아이디

// 1. boardId 2. content 3. parentReply;

// ajax를 이용함

// $.post("URL", {/*Paremeter*/} function(response) {/*응답처리 */});

var url = '<c:url value="/reply/write" />';

var params = {

boardId: "${boardVO.boardId}",

content : tinymce.activeEditor.getContent({format : 'raw'}),

parentReplyId: replyId

}

if( modifyMode ) {

url = '<c:url value="/reply/update"/>';

params.replyId = replyId;

}

$.post(url, params, function(response) {

modifyMode = false;

tinymce.activeEditor.setContent("");

tinymce.activeEditor.focus();

$("#replyStatus").remove();

replyId = 0;

reloadReplies()

});

}

});

$("#replies").on("click", ".reply_write", function() {

tinymce.activeEditor.setContent("");

tinymce.activeEditor.focus();

var replyStatus = $("<div>답글작성중</div>");

replyStatus.click(function() {

replyId = 0;

replyStatus.remove();

});

if( replyId == 0 ) {

$(".replyContent").before(replyStatus);

}

replyId = $(this).closest(".reply-wrapper").data("replyid");

$(window).scrollTop($(".replyContent").offset().top - 30);

});

</c:if>

//댓글 수정

var modifyMode = false;

$("#replies").on("click", ".modify", function() {

modifyMode = true;

replyId = $(this).closest(".reply-wrapper").data("replyid");

var content = $(this).next().next().next().next().html();

tinymce.activeEditor.setContent(content);

tinymce.activeEditor.focus();

$(window).scrollTop($(".replyContent").offset().top - 30);

});

//댓글 삭제

$("#replies").on("click", ".delete", function() {//.delete가 쉐도우 돔이기 때문에

var replyId = $(this).closest(".reply-wrapper").data("replyid")//

$.post('<c:url value= "/reply/delete/"/>' + replyId, {}, function(response) {});

reloadReplies();

});

reloadReplies();

function reloadReplies() {

$("#replies").html("");

// URL : /Board/reply/list/{boardId}

$.post('<c:url value="/reply/list/${boardVO.boardId}" />', {}, function(response) {

for( var i in response ) {

var imgsrc = response[i].memberVO.profilePhoto;

if( !imgsrc ) {

imgsrc = '<c:url value="/img/unknown.png"/>'

}

var depth = (response[i].level - 1) * 30;

var replyWrapper = $("<div style='padding-left: "+depth+"px;' class='reply-wrapper' data-replyid='"+response[i].replyId+"'></div>");

var img = $("<div class='img'><img src='"+imgsrc+"' /></div>");

var reply = $("<div class='reply'></div>");

var writerDate = $("<div class='writer-date'></div>");

var writer = $("<span class='writer' data-id='"+response[i].memberVO.id+"'>"+response[i].memberVO.nickName+"</span>");

var date = $("<span class='date'>"+response[i].writeDate+"</span>");

var replyContent = $("<div class='reply-content'> <span class='reply_write'>댓글</span><br/><div>"+response[i].content+"</div></div>");

// 댓글 수정 삭제

var modifyAndDelete = $("<span class='modify'>수정</span> <span class='delete'>삭제</span>");

replyWrapper.append(img);

img.after(reply);

reply.append(writerDate);

writerDate.append(writer);

writerDate.append(date);

reply.append(replyContent);

//댓글 수정 삭제 버튼 추가

var userId = '${sessionScope._USER_.id}';

if ( userId == response[i].id

&& response[i].content.indexOf("삭제된 댓글입니다. (") != 0 ) {

replyContent.prepend(modifyAndDelete); // 버튼추가

}

$("#replies").append(replyWrapper);

}

});

}

});

</script>

<div>

<a href="#"><b>${boardVO.subject}</b></a>

</div>

<div class="right">${boardVO.writeDate}</div>

</div>

<a href="#">${boardVO.memberVO.nickName}</a>

</div>

<div>

조회수 : <b>${boardVO.viewCount}</b>

</div>

<div>

추천수 : <b>${boardVO.likeCount}</b>

</div>

<div

class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders">

${boardVO.content}</div>

</div>

<div>

<c:if test="${sessionScope._USER_.id eq boardVO.memberVO.id }">

</c:if>

</div>

<c:if test="${not empty sessionScope._USER_}">

tinymce

.init({

selector : "#content",

theme : "modern",

menubar : false,

plugins : "autolink autosave code link media image table textcolor autoresize",

});

</script>

</div>

</c:if>

</div>

<c:import url="/board/list" />

<jsp:include page="/WEB-INF/view/common/footer.jsp" />

Colored by Color Scripter

ReplyDao
ReplyDaoImpl 구현
ReplyDao.xml 파일 쿼리문 작성
updateReply일 때, content의 내용을 바꾸고
deleteReply일 때, content의 내용을 ‘삭제된 댓글입니다.와 바꾼 날짜로 바꾼다.

ReplyService 추가
ReplyServiceImpl 구현
ReplyController에 추가

저작자표시

'Develop > 웹개발' 카테고리의 다른 글

톰캣: 웹 애플리케이션(WAR) 배포 (0)	2018.04.23
날짜와 시간 입력을 도와주는 데이트 피커 15가지 (0)	2018.04.23
(웹개발) 댓글만들기/ 댓글에 댓글까지 (0)	2017.10.12
(웹개발) Paging (0)	2017.10.10
(웹개발) Search 기능 추가하기 (0)	2017.09.29

'Develop/웹개발' Related Articles

공부하는 블로그

(웹개발) 댓글 수정/삭제 본문

(웹개발) 댓글 수정/삭제

'Develop > 웹개발' 카테고리의 다른 글

티스토리툴바