| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 하루한마디영어
- 안드로이드
- 안드로이드 개발 강좌
- 영어
- sky 시리우스폰
- 안드로이드 개발 2.0
- MapView
- 안드로이드개발
- Form Stuff
- 스카이 안드로이드폰 시리우스
- 아이폰 배경화면
- 인기있는 블로그 만들기
- 안드로이드 2.0 개발
- 안드로이드 배경화면
- 구글 안드로이드
- 안드로이드 바탕화면
- 스마트폰 배경화면
- objective-c
- 스카이 안드로이드폰 시리우스 K양 동영상
- 아이폰 바탕화면
- 하루 한마디 영어
- 안드로이드 개발 2.0 강좌
- 안드로이드폰
- android
- 안드로이드 개발
- 안드로이드2.0
- SKY 시리우스
- 구글안드로이드
- 안드로이드2.0개발
- 구글 안드로이드 개발
- Today
- Total
moozi
4/20 test.jsp 본문
<%@ 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 |