Spring 게시판 만들기(21)

세부정리

modify, get 버튼 변경

<!-- get.jsp -->

<button type="button" id="btn-modify" class="btn btn-primary">Modify</button>
<button type="button" id="btn-list" class="btn btn-primary">List</button>

<!-- modify.jsp -->

<button type="submit" class="btn btn-primary">Modify</button>
<button type="button" id="btn-remove" class="btn btn-danger">Remove</button>
<button type="button" id="btn-list" class="btn btn-primary">List</button>

---

modify 자바스크립트 수정

jquery 가져오고

자바스크립트 수정

<script>
    $(document).ready(function(){

        //전역변수
        let formObj = $('#modifyForm');

        $("#btn-remove").on("click", function(){

            // console.log("click");

            if(!confirm("게시물을 삭제하겠습니까?")) return;

            formObj.attr("action", "/board/remove");
            formObj.submit();
        });
    });
    
</script>

---

컨트롤러 변경

/remove를 PostMapping로 변경하고 파라미터 Criteria cri를 추가한다

@PostMapping("/remove")
public String remove(@RequestParam("bno") Long bno, Criteria cri) {

    log.info("삭제할 글번호 : " + bno);

    service.remove(bno);

    return "redirect:/board/list" + cri.getListLink();
}

---

리스트 버튼 동작작업

get.jsp파일에서 list버튼을 누르면 list 목록으로 다시 이동하도록 하기

get.jsp에 있는 글번호 bno 빼고 다른정보를 가져와서 넣는다

form의 id를 가져와서 필요 없는 정보를 제거하고 주소를 변경해서 submit();를 해준다

<script>

    $(document).ready(function(){

        let operForm = $("#operForm")

        // 수정버튼 클릭시 동작구문 <button type="button" id="btn_modify" class="btn btn-primary">Modify</button>
        $("#btn-modify").on("click", function(){
            // console.log("수정버튼 클릭"); // 나오는지 console에서 확인
            // 수정폼 주소
            // let bno = $("#bno").val(); // 입력망식 태그의 값을 
            // location.href = "modify?bno=" + bno;

            operForm.submit();

        });

        // 제거버튼 클릭시 동작구문
        $("#btn-remove").on("click", function(){
            // console.log("제거버튼 클릭");
            // 제거주소
            let bno = $("#bno").val();
            if(!confirm(bno + "번 글을 삭제하겠습니까?")) return;

            location.href = "remove?bno=" + bno;
        });

        // 목록버튼 클릭시 동작구문
        $("#btn-list").on("click", function(){
            // console.log("click");

            operForm.find("input[name='bno']").remove();
            operForm.attr("action", "/board/list");

            operForm.submit();

        });

    });

</script>

---

modify에 있는 list 버튼도 작업

<script>
    $(document).ready(function(){

        //전역변수
        let formObj = $('#modifyForm');

        $("#btn-remove").on("click", function(){

            // console.log("click");

            if(!confirm("게시물을 삭제하겠습니까?")) return;

            formObj.attr("action", "/board/remove");
            formObj.submit();

        });

        // 목록작업 변경
        $("#btn-list").on("click", function(){
            // console.log("click");

            // 페이징, 검색 필드정보
            let pageNumTag = $("input[name='pageNum']").clone();
            let amountTag = $("input[name='amount']").clone();
            let typeTag = $("input[name='type']").clone();
            let keywordTag = $("input[name='keyword']").clone();

            formObj.empty();

            formObj.append("pageNum");
            formObj.append("amount");
            formObj.append("type");
            formObj.append("keyword");

            formObj.attr("action", "/board/list");
            formObj.attr("method", "get");
            formObj.submit();
        });

    });
</script>

---

검색 버튼 활성화 시 1페이지로 넘어가서 검색하도록 작업

list 자바스크립트 추가

하지만, UI에서 다른 버튼이 활성화가 안되는 문제가 생겼다

<script>
    $("#searchForm").on("submit", function(){
    // console.log("click");

    actionForm.find("input[value='${pageMaker.cri.pageNum }]'").attr("value", "${pageMaker.cri.pageNum = 1}");

    // actionForm.submit();
    });
</script>