Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

4/20 test.jsp 본문

TIS_2017/응용sw_1기

4/20 test.jsp

moozi 2017. 4. 20. 09:53

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

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<!-- Bootstrap 3.3.4 -->

<link href="/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!-- Handlebars  -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>


<script src="/resources/plugins/jQuery/jQuery-2.1.4.min.js"></script>


<script id="template" type="text/x-handlebars-template">

<h1>

<p>{{name}}</p>

<p>{{userid}}</p>

<p>{{addr}}</p>

</h1>

</script>


<script>

function fn1(content){

alert(content);

}



$(document).ready(function(){

var bno=7;

//getAllList();//댓글목록

getPageList(1);// 1page출력

var replyPage=1;

$(".pagination").on("click","li a",function(event){

event.preventDefault();//a태그 기본이벤트 취소.

//클릭한 링크의 href속성값.page번호

replyPage=$(this).attr("href");

getPageList(replyPage);//해당 페이지 출력

});

function getAllList(){

$.getJSON("/replies/all/"+bno,function(data){

var str="";

$(data).each(function(){

str+="<li data-rno='"+this.rno+"' class='replyLi'>"

+this.rno+":"+this.replytext

+"<button>MOD</button></li>";

/* +"<input type='button' onclick=fn1('"+this.rno+":"+this.replytext+"') value='MOD'>"; */

});

//ul태그에 출력

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

});

}

//댓글등록

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

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

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

$.ajax({

type:'post',

url:'/replies',

headers:{

"Content-Type":"application/json",

"X-HTTP-Method-Override":"POST"

},

dataType:'text',

data: JSON.stringify({bno:bno,

replyer:replyer,

replytext:replytext}) ,

success:function(result){

if(result=='SUCCESS'){

//alert("등록되었습니다.");

getAllList();//댓글목록

}

}

});

});

// 생성되기 전 상태인 li태그의 버튼에 이벤트 처리

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

//클릭한 버튼의 부모 li태그 구하기

var reply=$(this).parent();

//댓글번호

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

//댓글내용

var replytext=reply.text();

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

//댓글번호

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

//댓글내용

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

//모달창 보이게하기

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

}); 

//모달창 종료하기

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

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

});

//삭제처리

$("#replyDelBtn").click(function(){

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

$.ajax({

type:'delete',

url:'/replies/'+rno,

headers:{

"Content-Type":"application/json",

"X-HTTP-Method-Override":"DELETE"

},

dataType:'text',

success:function(result){

if(result=='SUCCESS'){

alert("삭제되었습니다.");

$("#modDiv").hide();//모달창종료

getAllList();//댓글목록

}

}

});

});

//수정처리

$("#replyModBtn").click(function(){

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

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

$.ajax({

type:'put',

url:'/replies/'+rno,

headers:{

"Content-Type":"application/json",

"X-HTTP-Method-Override":"PUT"

},

dataType:'text',

data:JSON.stringify({replytext:replytext}),

success:function(result){

if(result=='SUCCESS'){

alert("수정되었습니다.");

$("#modDiv").hide();//모달창종료

getAllList();//댓글목록

}

}

});

});

//페이징

function getPageList(page){

$.getJSON("/replies/"+bno+"/"+page,function(data){

var str="";

$(data.list).each(function(){

str+="<li data-rno='"+this.rno+"' class='replyLi'>"

+this.rno+":"+this.replytext

+"<button>MOD</button></li>";

/* +"<input type='button' onclick=fn1('"+this.rno+":"+this.replytext+"') value='MOD'>"; */

});

//ul태그에 출력

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

//페이징

printPaging(data.pageMaker);

});

}

function printPaging(pageMaker){

var str="";

//prev

if(pageMaker.prev){

str+="<li><a href='"+(pageMaker.startPage-1)+"'> << </a></li>";

}

//paging number

for(var i=pageMaker.startPage, len=pageMaker.endPage;i<=len;i++){

var strClass=pageMaker.cri.page==i?'class=active':'';

str+="<li "+strClass+"><a href='"+i+"'>"+i+"</a></li>";

}

//next

if(pageMaker.next){

str+="<li><a href='"+(pageMaker.endPage+1)+"'> >> </a></li>";

}

//ul태그에 출력

$(".pagination").html(str);

}

/* handlebars 테스트 */

//var source="<h1><p>{{name}}</p><p>{{userid}}</p><p>{{addr}}</p></h1>";

var source=$("#template").html();

var template=Handlebars.compile(source);

var data={name:"홍길동",userid:"hkd",addr:"조선"};

$("#displayDiv").html(template(data));

});

</script>

<style type="text/css">

#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>


</head>

<body>


<!--  댓글 모달창  -------------------------- -->

<div id="modDiv" style="display:none">

<div class="modal-title"></div>

<div>

<input type="text" id="replytext">

</div>

<div>

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

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

<button type="button" id="closeBtn">종료</button>

</div>

</div>

<!-- 댓글 모달창.끝. ------------------------ -->

<h1>댓글등록</h1>

<div>

<div>

이름 <input type="text" name="replyer" id="newReplyWriter">

</div>

<div>

내용 <input type="text" name="replytext" id="newReplyText">

</div>

<button id="replyAddBtn">등록</button>

</div>

<ul id="replies">

</ul>

<ul class="pagination">

</ul>

<div id="displayDiv">

</div>

</body>

</html>

'TIS_2017 > 응용sw_1기' 카테고리의 다른 글

프로젝트 주제  (3) 2017.04.20
4/20 BoardExample01  (0) 2017.04.20
4/18 BoardExample01  (0) 2017.04.18
4/18 BoardExample01  (0) 2017.04.18
4/14 BoardExamp01 Final  (0) 2017.04.14
'TIS_2017/응용sw_1기' Related Articles more
Comments