[B -2-43] Ajax 댓글 처리 16 : [이벤트 및 HTML 처리]
2019. 10. 9. 12:18ㆍProject B (SPMS)/Project B 파트5
반응형
이벤트 처리
[B -2-42] Ajax 댓글 처리 15 까지는 Ajax 처리까지 완료됐음을 알 수 있다.
나머지 작업은 화면에서 버튼 등에서 발생하는 이벤트를 감지하고, Ajax 호출의 결과를 화면에 반영하는 것이다.
댓글 목록 처리
views/board
get.jsp
댓글 목록 표시 영역 태그
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 조회</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 조회 페이지</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>제목</label>
<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>내용</label>
<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
</div>
<button data-oper='modify' class="btn btn-default">수정</button>
<button data-oper='list' class="btn btn-info">목록</button>
<!-- operForm 시작 -->
<form id='operForm' action="/board/modify" method="get">
<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
</form>
<!-- operForm 종료 -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- 댓글 목록 표시 영역 시작 -->
<div class='row'>
<div class="col-lg-12">
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-comments fa-fw"></i> 댓글 목록
<button id='addReplyBtn' class='btn btn-primary btn-xs pull-right'>댓글 작성</button>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<ul class="chat">
</ul>
<!-- ./ end ul -->
</div>
<!-- /.panel .chat-panel -->
<div class="panel-footer"></div>
</div>
</div>
<!-- ./ end row -->
</div>
<!-- 댓글 목록 표시 영역 끝 -->
</div>
<script type="text/javascript">
$(document).ready(function() {
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e){
operForm.attr("action","/board/modify").submit();
});
$("button[data-oper='list']").on("click", function(e){
operForm.find("#bno").remove();
operForm.attr("action","/board/list")
operForm.submit();
});
});
</script>
<script type="text/javascript" src="/resources/js/reply.js"></script>
<script>
console.log("===============");
console.log("JS TEST");
var bnoValue = '<c:out value="${board.bno}"/>';
/* 댓글 등록 처리 시작 */
/*
// for replyService add test
replyService.add(
{
reply:"JS Test",
replyer:"tester",
bno:bnoValue
},
function(result){
alert("RESULT : " + result);
}
);
*/
/* 댓글 등록 처리 끝 */
/* 댓글 목록 처리 시작 */
/*
replyService.getList({bno:bnoValue, page:1}, function(list){
for(var i = 0, len = list.length||0; i < len; i++ ){
console.log(list[i]);
}
});
*/
/* 댓글 목록 처리 끝 */
/* 댓글 15 번 삭제 처리 시작 */
/*
replyService.remove(15, function(count) {
console.log(count);
if (count === "success") {
alert("REMOVED");
}
}, function(err) {
alert('ERROR...');
});
*/
/* 댓글 삭제 처리 끝 */
/* 14번 댓글 수정 처리 시작 */
/*
replyService.update({
rno : 14,
bno : bnoValue,
reply : "댓글 수정 테스트 완료!"
}, function(result) {
alert("수정 완료...");
});
*/
/* 댓글 수정 처리 끝 */
/* 16번 댓글 조회 처리 시작 */
replyService.get(16, function(data){
console.log('16번 댓글 조회 : ' + data);
});
/* 댓글 조회 처리 끝 */
</script>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>댓글의 목록을 위해서 별도의 <div> 태그를 생성해서 처리한다.
게시글 관련 화면 아래쪽에 <div> 태그를 추가한다. (댓글 표시 영역 코멘트)
댓글의 목록은 <ul> 태그 내에 <li> 태그를 이용해서 처리하게 된다.
각 <li> 태그는 하나의 댓글을 의미하므로 수정이나 삭제 시 이를 클릭하게 한다.
수정이나 삭제 시에는 반드시 댓글 번호가 필요하다.
코드 추가 후 브라우저상에서 댓글의 표시 영역 부분을 확인 할 수 있다.
이벤트 처리
views/board
get.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 조회</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 조회 페이지</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>제목</label>
<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>내용</label>
<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
</div>
<button data-oper='modify' class="btn btn-default">수정</button>
<button data-oper='list' class="btn btn-info">목록</button>
<!-- operForm 시작 -->
<form id='operForm' action="/board/modify" method="get">
<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
</form>
<!-- operForm 종료 -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- 댓글 목록 표시 영역 시작 -->
<div class='row'>
<div class="col-lg-12">
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-comments fa-fw"></i> 댓글 목록
<button id='addReplyBtn' class='btn btn-primary btn-xs pull-right'>댓글 작성</button>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<ul class="chat">
</ul>
<!-- ./ end ul -->
</div>
<!-- /.panel .chat-panel -->
<div class="panel-footer"></div>
</div>
</div>
<!-- ./ end row -->
</div>
<!-- 댓글 목록 표시 영역 끝 -->
</div>
<script type="text/javascript">
$(document).ready(function() {
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e){
operForm.attr("action","/board/modify").submit();
});
$("button[data-oper='list']").on("click", function(e){
operForm.find("#bno").remove();
operForm.attr("action","/board/list")
operForm.submit();
});
});
</script>
<script type="text/javascript" src="/resources/js/reply.js"></script>
<!-- 이벤트 처리 시작 -->
<script>
$(document).ready(function () {
var bnoValue = '<c:out value="${board.bno}"/>';
var replyUL = $(".chat");
showList(1);
function showList(page){
console.log("show list " + page);
replyService.getList({bno:bnoValue,page: page|| 1 }, function(list) {
console.log("list: " + list);
var str="";
if(list == null || list.length == 0){
replyUL.html("");
return;
}
for (var i = 0, len = list.length || 0; i < len; i++) {
str += "<li class='left clearfix' data-rno='" + list[i].rno + "'>";
str += " <div>";
str += " <div class='header'>";
str += " <strong class='primary-font'>[" + list[i].rno + "] " + list[i].replyer + "</strong>";
str += " <small class='pull-right text-muted'>" + list[i].replyDate + "</small>";
str += " </div>";
str += " <p>" + list[i].reply + "</p>";
str += " </div>";
str += "</li>";
}
replyUL.html(str);
});//end function
}//end showList
});
</script>
<!-- 이벤트 처리 끝 -->
<script>
console.log("===============");
console.log("JS TEST");
var bnoValue = '<c:out value="${board.bno}"/>';
/* 댓글 등록 처리 시작 */
/*
// for replyService add test
replyService.add(
{
reply:"JS Test",
replyer:"tester",
bno:bnoValue
},
function(result){
alert("RESULT : " + result);
}
);
*/
/* 댓글 등록 처리 끝 */
/* 댓글 목록 처리 시작 */
/*
replyService.getList({bno:bnoValue, page:1}, function(list){
for(var i = 0, len = list.length||0; i < len; i++ ){
console.log(list[i]);
}
});
*/
/* 댓글 목록 처리 끝 */
/* 댓글 15 번 삭제 처리 시작 */
/*
replyService.remove(15, function(count) {
console.log(count);
if (count === "success") {
alert("REMOVED");
}
}, function(err) {
alert('ERROR...');
});
*/
/* 댓글 삭제 처리 끝 */
/* 14번 댓글 수정 처리 시작 */
/*
replyService.update({
rno : 14,
bno : bnoValue,
reply : "댓글 수정 테스트 완료!"
}, function(result) {
alert("수정 완료...");
});
*/
/* 댓글 수정 처리 끝 */
/* 16번 댓글 조회 처리 시작 */
replyService.get(16, function(data){
console.log('16번 댓글 조회 : ' + data);
});
/* 댓글 조회 처리 끝 */
</script>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
게시글의 조회 페이지가 열리면 자동으로 댓글 목록을 갖고와서 <li> 태그를 구성해야 한다.
이에 대한 처리는 $(document).ready() 내에서 이뤄지도록 한다.
showList()는 페이지 번호를 파라미터로 받게끔 설계하고, 만약 파라미터가 없는 경우에는 자동으로 1페이지가 되도록 설정한다.
브라우저에서 DOM 처리가 끝나면 자동으로 showList() 가 호출되면서 <ul> 태그 내에 내용으로 처리된다.
만약 1페이지가 아닌 경우이면 기존 <ul> 에 <li> 들이 추가되는 형태이다.
HTML 및 이벤트 처리 후 결과 화면
반응형
'Project B (SPMS) > Project B 파트5' 카테고리의 다른 글
| [B -2-45] Ajax 댓글 처리 18 : [댓글 작성 다이얼로그] (0) | 2019.10.09 |
|---|---|
| [B -2-44] Ajax 댓글 처리 17 : [시간 처리] (0) | 2019.10.09 |
| [B -2-42] Ajax 댓글 처리 15 (0) | 2019.10.09 |
| [B -2-41] Ajax 댓글 처리 14 (0) | 2019.10.09 |
| [B -2-40] Ajax 댓글 처리 13 (0) | 2019.10.09 |