6월 17일 에러 (thehouseProject)

체크박스 값 넘기는거에서 에러 발생.

쪽지를 보내기위해 하나의 쪽지를 선택해서 상대방의 아이디를 쪽지 보내기 폼으로 보내줘야 하는데

그 값이 안넘어 가는 에러.....

 

처음에는 ajax로 하려 했으나 ajax는 페이지 이동에서는 사용하지 않는다 하여 스크립트로 하는 방법을 모색.

그러나 컨트롤러에서 값을 받아주지 못했다. 계속 null이 발생.

 

해결방법은 script에서 추가해주고 해결했다

 

$(function(){
    $("#send").click(function(){
        var count = $(".select_note input:checked").length;
        var chk;
        $("input[name=check]:checked").each(function(){
            chk = ($(this).attr("data-sendId"));


        });
        
        console.log(chk);
        if(count == 0){
            alert("선택된 쪽지가 없습니다.")
        }else {
            if (count > 1) {
                alert("하나만 선택해주세요.")
            } else {
                alert("쪽지보내러 ㄱㄱ");

                $("#sending").submit();

                location.href='noteSending?receiveId='+chk;
                alert("쪽지보내러 ㄱㄱ");
            }
        }
    });
    });

이렇게 보냈었는데

url에 id값도 뜨고 값도 안넘어가고 바로 버림.

 

계속 똑같은 얘기가 나왔었던것이 form으로 해결하면 간단하다.

form으로 보내는게 맞다 라는 답변글을 많이 봐왔기 때문에

최대한 form을 이용해서 해결하려고 찾아봄.

 

그 결과

<div class="container">
    <form action="/noteSending" method="post" id="sending" name="sending">

    <input type="button" id="send" name="send" value="쪽지보내기">
    <input type="button" id="delete" name="delete" value="삭제" >
    <table class="table table-hover" >
        <tr>
            <th><input type="checkbox" name="allcheck" id="allcheck"/></th>
            <th>쪽지내용</th>
            <th>보낸사람</th>
        </tr>

        <th:block th:each="send : ${sendnote}">
        <tr>
            <td class="select_note">
                <input type="checkbox" name="check" id="check" th:data-No="${send.msgNo}"
                th:data-sendId="${send.memberId}"/>
            </td>
            <td th:onclick="'javascript:'" th:text="${send.msgContents}"/><!-- onclick에 ajax 연결 경로-->
            <td th:text="${send.memberId}"/>
        </tr>

        </th:block>

    </table>
        <input type="hidden" id="idval" name="idval" value=""/>
    </form>
</div>
</body>

<script>
    $(function(){
    $("#send").click(function(){
        var count = $(".select_note input:checked").length;
        var chk;
        $("input[name=check]:checked").each(function(){
            chk = ($(this).attr("data-sendId"));


        });
        document.sending.idval.value=chk;
        console.log(chk);
        if(count == 0){
            alert("선택된 쪽지가 없습니다.")
        }else {
            if (count > 1) {
                alert("하나만 선택해주세요.")
            } else {
                alert("쪽지보내러 ㄱㄱ");

                $("#sending").submit();

                /*location.href='noteSending?receiveId='+chk;
                alert("쪽지보내러 ㄱㄱ");*/
            }
        }
    });
    });
</script>

 

form태그 내에 input type="hidden"을 하나 추가해주고 name을 idval로 잡았다.

그리고 value는 비워둠.

스크립트에는 chk에 체크한 체크박스 내의 memberId값을 넣어주었고

그 밑에다가 document.sending.idval.value=chk; 로 idval로 잡은 input의 value에 chk를 넣어주었다.

 

document.폼이름.히든이름.value

 

이러니까 value값이 넘어가고 컨트롤러에서도 idval로 잡아서 그대로 모델에 넣어주고

페이지 이동

 

바로 출력됨!!!!!!!!!!!

 

이거 올려주신분은 php로 작업을 하시는 분이었으나 어차피 html똑같이 쓰고 스크립트 썼으니

그게 그거겠지

다른 방법이 있을것 같긴한데 일단 좀 찾아봐야될듯....

 

구글에는 고정으로 입력해둔 체크박스 값 가져가는거 밖에 안나와서 개고생함 ㅠㅠ

 

아 그리고 주의사항.

이 경우는 하나의 값만 보내는것이기 때문에 input 태그를 th:each밖에 빼야함.

 

처음에는 안에 들어가있었는데 그랬더니 값도 안들어가는데다가 반복으로 다 들어감.

 

생각해보니 여러개 보낼때는 이 방법이 안될듯