Day 78. [Spring] 게시판 댓글 등록, 수정, 삭제, 페이징

> 결과 화면 !! <

요렇게 떠요 ~

수정 눌렀을때

더보기로 페이징

---

> 코드 부분 < 

Script로 작성한 부분입니당

댓글 등록, 삭제, 수정

 

/* event */
// 댓글 등록
$(".reply-register-area button").click(function(){
    var replyContent = $(".reply-register-area textarea").val();
    if(replyContent.trim().length == 0){
        alert("댓글 내용을 작성하세요")
        $(".reply-register-area textarea").focus();
        return;
    }
    var reply = {bno:bno, reply:$(".reply-register-area textarea").val(), replyer:"작성자"};

    replyService.add(reply, function(result){
        alert("댓글 등록 성공")
        console.log(result)

        replyService.get(result, function(result){
            console.log(result);
            $(".chat").prepend(getReplyStr(result))
        })
    })
})

// 댓글 삭제
$(".chat").on("click", ".btn-reply-remove", function(){
    event.preventDefault(); // 기본 이벤트 제거
    var $dom = $(this).closest(".bg-dark");
    //console.log($dom.next().html());
    var rno = $(this).closest(".bg-dark").data("rno")
    replyService.remove(rno, function(result){
        alert("댓글 삭제 성공")
        console.log(result)
        $dom.next().remove();
        $dom.remove();

    })
})

// 댓글 수정
$(".chat").on("click", ".btn-reply-modify", function(){
    event.preventDefault(); // 기본 이벤트 제거
    var $dom = $(this).closest(".bg-dark")
    var rno = $dom.data("rno");
    console.log(rno);

    $(".reply-content > p").show();
    $(".reply-content > div").addClass("d-none");

    var $p = $dom.next().find("p")
    $p.hide();
    $dom.next().find("div").find("textarea").val($p.text()).end().removeClass("d-none");
})

// 댓글 수정 반영
$(".chat").on("click", ".reply-content button", function(){
    var $replyContent = $(this).closest(".reply-content")
    var rno = $replyContent.prev().data("rno")
    var content = $replyContent.find("textarea").val();
    var reply = {rno:rno, reply:content};

    replyService.update(reply, function(result){
        // 성공
        $replyContent.find("p").text(content).show();
        $replyContent.find("div").addClass("d-none");
    })
})

 

수정 및 삭제

 

더보기 버튼

// 더보기 버튼 이벤트
$(".btn-more").click(function() {
    var lastRno = $(".chat > .bg-dark").last().data("rno");
    console.log(lastRno);
    var param = {bno:bno, lastRno:lastRno};

    $btnMore = $(this);
    replyService.getList(param, function(result) {
        console.log(result);
        var str = '';
        for(var i in result) {
            str += getReplyStr(result[i]);
        }
        $(".chat").append(str);
    }, null, function() {
        $btnMore.prop("disabled", true);
    }, function(result) {
        if(result.length == 0) $btnMore.remove();
        setTimeout(function() {
            $btnMore.prop("disabled", false);
        }, 1000);
    })
})

---

최종프로젝트 가즈아 ~~

 

테이블 만들고 아웃풋에 내 시간을 갈아 넣는다 !!!!!!!!!!!!!!