Day 54. [Html/JavaScript] Modal

Modal

<!-- The Modal -->
<div class="modal" id="replyModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Reply</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="mb-3 mt-3">
            <label for="bno" class="form-label"><i class="fas fa-list-ol"></i> bno</label>
            <input type="text" class="form-control" id="rno" name="rno">
        </div>
        <div class="mb-3">
            <label for="content" class="form-label"><i class="fab fa-battle-net"></i> content</label>
            <input type="text" class="form-control" id="replyContent" name="replyContent">
        </div>
        <div class="mb-3">
            <label for="regDate" class="form-label"><i class="fas fa-calendar"></i> regDate</label>
            <input type="text" class="form-control" id="regDate" name="replyregDate">
         </div>
        <div class="mb-3">
            <label for="writer" class="form-label"><i class="fas fa-feather-alt"></i> writer</label>
            <input type="text" class="form-control" id="replyWriter" name="replyWriter">
        </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger">Register</button>
        <button type="button" class="btn btn-info">Modify</button>
        <button type="button" class="btn btn-warning">Remove</button>
      </div>		
    </div>
  </div>

$(function(){
    // $("#replyModal").modal("show");
    const bno = '${board.bno}';
    showList();

    function showList(){
        replyService.list(201, function(data) {
            console.log(data);
            var str = "";
            for(var reply in data){
                str +='					<li class="list-group-item" data-rno="' + data[reply].rno + '">';
                str +='						<div class="list-group-item list-group-item-success small">';
                str +='							<span>'+ data[reply].writer +'</span>';
                str +='							<span class="small">' + data[reply].regDate + '</span>';
                str +='						</div>';
                str +='						<div class="list-group-item">' + data[reply].content + '</div>';
                str +='					</li>';
            }
            $(".replies").html(str);
        }, cp);
    }

    // 댓글 상세 조회
    // replies 태그 안에 li를 클릭했을때
    // li가 showlist로 만들어지면 동적이라서 이벤트를 위임해줘야한다. event delegate
    $(".replies").on("click", "li", function(){ // click 을 replies 안에 있는 li 들한테 준다.
        replyService.get($(this).data("rno"), function(data) {
            console.log(data);
            $("#rno").val(data.rno);
            $("#replyContent").val(data.content);
            $("#replyRegDate").val(data.regDate);
            $("#replyWriter").val(data.writer);


            // 버튼 숨기기
            $("#replyModal")
            .data("rno", data.rno)
                .find(".modal-footer button").hide()
                    .filter(":gt(0)").show() // gt : grater than 0 보다 더 큰
                .end()
            .end()
                .find("input, textarea").prop("disabled", false)
            .end().modal("show");

        }, cp);
        // console.log()
        $("#replyModal").modal("show");
    })

    // 댓글 등록 창 활성화
    $("#btnReplyReg").click(function(){
        $("#replyModal")
            .find(".modal-footer button").hide()
                // .eq(0).show() 같은 문장 
                .filter(":eq(0)").show()
            .end()
        .end()
            .find("input, textarea").prop("disabled", false).val("")
        .end().modal("show");
    })
    // 댓글 등록 버튼 클릭 이벤트
    $("#replyModal .modal-footer button:eq(0)").click(function(){
        var reply = {bno:bno, content:$("#replyContent").val(), writer:$("#replyWriter").val()}
        replyService.add(reply, function(data){
            showList();
            $("#replyModal").modal("hide")
        }, cp);
    })
    // 댓글 수정 버튼 클릭 이벤트
    $("#replyModal .modal-footer button:eq(1)").click(function(){
        var reply = {rno:$("#replyModal").data("rno"), content:$("#replyContent").val()}
        replyService.modify(reply, function(data){
            alert("댓글 수정완료");
            showList();
            $("#replyModal").modal("hide")
        }, cp);
    })
})

 

reply.js

/** 
 * ReplyService Module
 */
const replyService = (function() {

	function list(bno, callback, cp){
		var reply = {bno:bno};

		$.getJSON(cp + "/replies", reply, function(data){
			if(callback) callback(data)
		});
	}
	function get(rno, callback, cp){
		var reply = {rno:rno};

		$.getJSON(cp + "/reply", reply, function(data){
			if(callback) callback(data)
		});
	}
	function add(reply, callback, cp){
		var reply = JSON.stringify(reply);

		$.post(cp + "/reply", reply, function(data){
			if(callback) callback(data)
		});
	}
	function modify(reply, callback, cp){
		var reply = JSON.stringify(reply);

		$.ajax({
			url : cp + "/reply", 
			success : function(data){
				if(callback) callback(data)
			},
			type : "PUT",
			data : reply
		});
	}
	function remove(reply, callback, cp){
		var reply = JSON.stringify(reply);

		$.ajax({
			url : cp + "/reply", 
			success : function(data){
				if(callback) callback(data)
			},
			type : "DELETE",
			data : reply
		});
	}

	return {get:get, list:list, add:add, modify:modify, remove:remove}
})();