[spring] 모달창 안 뜨는 오류해결하기

1. 문제

스프링 웹 프로젝트를 배우면서 게시판에 글을 작성하고 등록할 때 뜨는 모달창을 만들다가 오류가 발생하였다.

등록 버튼을 누르면 이렇게 정상적으로 떠야 하는데 내 코드에선 등록은 되지만 모달창이 뜨지를 않았다.

            <script type="text/javascript">
            $(document).ready(function(){
            	
            	var result='<c:out value="${result}"/>';
            	
            	checkModal(result);
            	
            	function checkModal(result){
            		if(result===''){
            			return;
            		}
            		if(parseInt(result)>0){
            			$(".modal-body").html("게시글 "+parseInt(result)+" 번이 등록되었습니다.");
            		}
            		
            		$("#myModal").modal("show");
            	}
            	
            	$("#regBtn").on("click", function(){
            		self.location="/board/register";
            	});
            });
           </script>
            

jsp파일에서 jQuery를 이용한 모달창 코드이다.
정상적이라면 result값이 jsp파일로 넘어와야하는데 h1태그로 result를 불러와도 값이 입력되지 않아서 원인이 뭔지 찾아보고 있었다.

(이건 브라우저창에서 본 내 코드... result값이 ""으로 나와서 바로 return이 되어버린다.)

2. 원인분석

1) jquery와 bootstrap 위치 제대로 정하기

스프링에서 jquery를 사용하기 위해서는 스크립트 링크를 잘 넣어줘야 한다.
오류가 나는 원인 중 하나는 jquery가 bootstrap보다 밑에 있다면 제대로 작동을 안하기 때문에 위쪽으로 옮겨주면 해결이 될 수 있다.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="/resources/vendor/bootstrap/js/bootstrap.min.js"></script>

하지만 난 header에 jquery를 넣었고, footer에 bootstrap이 있었기 때문에 이것도 안 먹혔다.

2) SelectKey 이용하기

두번째로 생각한 원인은 SelectKey이다. 인덱스(bno)는 쿼리에서 자동으로 입력이 될 수 있게 해놨다. 자동으로 생성된 인덱스를 바로 사용해야 할 경우 SelectKey 메서드를 이용한다.

<insert id="insertSelectKey">
<selectKey keyProperty="bno" order="BEFORE" resultType="long">
select seq_board.nextval from dual
</selectKey>
insert into tbl_board(bno, title, content, writer)
values (#{bno},#{title},#{content},#{writer})
</insert>

(Mapper.xml에서 입력된 SelectKey 쿼리.
before를 사용해서 인덱스값을 지정하고, 테이블에 넣어준다.)

	@Override
	public void register(BoardVO board) {
		
		log.info("register......."+ board);
		mapper.insertSelectKey(board);
	}

(ServiceImpl.java에서 사용된 SelectKey)

찾아본 결과 SelectKey값은 제대로 입력했고, 오류도 나지 않았다.

3. 문제해결

모든 코드가 오류가 나지 않고 정상 작동한다면 어딘가에서 내가 오타를 낸 것이고, 이름값에서 문제가 생긴 것일 것이다.

그리고 정말 사소한 곳에서 원인을 발견했다.

	@PostMapping("/register")
	public String register(BoardVO board, RedirectAttributes rttr) {
		log.info("register: "+board);
		service.register(board);
		rttr.addFlashAttribute("register",board.Bno());
		return "redirect:/board/list";
	}

addFlashAttribute에서 이름을 "register"로 적어놓고서,

$(document).ready(function(){
            	
var result='<c:out value="${result}"/>';
            	
checkModal(result);

jquery에선 result로 부르고 있었으니, 나올 일이 없었다... 둘 이름을 통일하니 바로 정상 작동이 되고 브라우저에서도 인덱스값이 정확하게 입력된다.

아직도 어디부분에서 정보가 가져와지는데 정확하게 알지 못해서 생기는 오류라고 생각한다.
좀 더 제대로 자세하게 공부해야지...