sboard/reply.jsp ( mode 버튼 ) > SPRING1

• 목록

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

<%@ include file="/WEB-INF/views/include/header.jsp" %>

<center>

<h3>AJAX TEST</h3>

Total : <span id="total_conunt"></span>

<style>

#modDiv {

width: 300px;

height: 100px;

background-color: gray;

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -150px;

padding: 10px;

z-index: 1000;

}

</style>

<!-- MOD 버튼 -->

<table id='modDiv' style="display:none;">

<tr>

<td class='modal-title'></td>

</tr>

<tr>

<td><input type='text' id='replytext'></td>

</tr>

<tr>

<td>

<button type="button" id="replyModBtn">수정</button>

<button type="button" id="replyDelBtn">삭제</button>

<button type="button" id='closeBtn'>닫기</button>

</td>

</tr>

</table>

<!-- 글 작성 -->

<table border=1>

<tr>

<td>글쓴이</td>

<td><input type='text' name='replyer' id='newReplyWriter'></td>

<td>댓글 내용</td>

<td><input type='text' name='replytext' id='newReplyText'></td>

<td></td>

<td><button id="replyAddBtn">댓글 작성</button></td>

</tr>

</table>

<br>

<!-- 댓글 목록 출력 영역 -->

<table id="replies" border=1>

</table>

<script>

var bno = 15; // tbl_board에서 존재하는 bno값 입력

getAllList();

// 글 목록

function getAllList() { // 리스트 출력 확인후 목록 갱신시 함수 호출로 처리 

$.getJSON("/replies/all/"+bno,

function(data){

$("#total_conunt").text(data.length);//리스트 갯수

var str="";

$(data).each(

function(){

str += "<tr>"

+ "<td>"+this.rno+"</td>"

+ "<td>"+this.bno+"</td>"

+ "<td>"+this.replyer+"</td>"

+ "<td>"+this.replytext+"</td>"

+ "<td data-rno='"+this.rno+"' data-str='"+this.replytext+"' class='replyLi'><button>mode</button></td>"

+ "</tr>"

}

);

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

}

);

}

// 글 등록

$("#replyAddBtn").on("click",function(){

var replyer = $("#newReplyWriter").val();

var replytext = $("#newReplyText").val();

$.ajax({

type: 'post',

url: '/replies/',

headers: {

"Content-Type" : "application/json"

},

dataType: 'text',

data:JSON.stringify({

bno : bno,

replyer : replyer,

replytext : replytext

}),

success: function(result){

if(result == 'success'){

alert("글 등록됨");

getAllList(); //목록 출력

//글 작성후 null처리

$("#newReplyWriter").val("");

$("#newReplyText").val("");

}

}

});

});

//mode 열기

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

var reply = $(this).parent(); //자기 자신의 부모 요소를 선택한다. <tr>

var rno = reply.attr("data-rno");

var replytext = reply.attr("data-str");

//alert(rno + " : " + replytext);

$(".modal-title").html(rno);

$("#replytext").val(replytext);

$("#modDiv").show("slow");

});

// mode닫기

$("#closeBtn").on("click", function() {

$("#modDiv").hide("slow");

getAllList();

});

</script>

<%@ include file="/WEB-INF/views/include/footer.jsp" %>