[ MVC02 / JS ] Board.js

/*
	function goDelete() {
	// 삭제 시켜 줄 컨트롤러로 이동
	location.href = '${cpath}/boardDelete.do?idx=${vo.idx}'
	}
*/
	function goUpdate(cpath, idx) {
		location.href = cpath + '/boardUpdate.do?idx=' + idx
	}
	function goDelete(cpath, idx) {
		// "" 로 감싸주지않으면 cpath에는 그냥 /contextpath 변수로 인지해버림
		// '${cpath}'   또는 \"${cpath}\" 로 해주어야 문자열로 인식을 하여 사용할 수 있다.
		// blog에 뒤에 있는 id부분이 pathVariable 이라고 해서 저게 데이터라고 생각하면 된다.
		// 쿼리 스트링은 다수를 검색했을때 전체중에 일부 이런식으로 쿼리스트링을 보여준다
		// pathVariable 주소에 정보를 담는 경우는 특정 하나만 보여줄 때 사용을 한다.
		// url/value1/value2/value3............ 이런식으로 계속 이어 나갈 수 있음
		location.href = cpath + '/boardDelete.do/' + idx
	}
	function goList(cpath) {
		location.href  = cpath +  "/boardList.do";
	}
	
			function loadBoard() {
		// ajax를 이용해서 게시물 목록 가져오기
		// 필요한 데이터만 보내고 필요한 데이터만 받아올 수 있음
		$.ajax( {
			url : 'boardList.do', // 요청할 주소
			type : 'post', // get? post?
			data : {
				// 'name' : value 
			},
			//datatype : 'json', // 응답받는 데이터가 어떤 형식인지
			success : makeTable , // 요청이 성공 했을 때, 실행되는 함수  = callback func
			error : function() { alert('error')} // 요청이 실패했을 때, 실행되는 콜백함수
		}) 
	}
	function makeTable(res) {
		// res --> server로 부터 받는 응답
		console.log(res);
		// 받아온 데이터 이용, 테이블 생성
		
		//tbody 초기화
		$('#tbody').html("");
		
		for(let i = 0; i<res.length;i++) {
			board = res[i]
			// 백틱 : 개행을 해도 인식을 하는 문자열
			// 백틱 내에서 $ {} 를 통해서 문자열 사이에 변수값을 집어 넣을 수 있다.
			// 단 jsp에서는 사용불가하다. 
			// 
			tr = `
				<tr>
					<td>${board.idx}</td>  
					<td onclick="viewBoard(${board.idx})">${board.title}</td>
					<td>${board.writer}</td>
					<td>${board.indate}</td>
					<td>${board.count}</td>
				</tr>
				<tr id="tr${board.idx}" style="display : none;">
					<td>내용</td>
					<td colspan="4">
					<textarea id = "teacon${board.idx}" rows = "5" class="form-control">${board.content}
					</textarea>
					<br>
					<button onclick="update(${board.idx})" class="btn btn-sm btn-info">수정</button>
					</td>
					
				</tr>
			`;
			// $('선택자').html('코드') : 안에 있는 코드 덮어쓰기
			// $('선택자').after('코드') : 닫는 태그 바로뒤에 추가
			// $('선택자').before('코드') : 여는태그 바로앞에 추가
			// $('선택자').append('코드') : 안에 추가
			$('#tbody').append(tr)
			
		}
	}
	
function viewBoard(idx) {
	// $(`tr${idx}`)
	// .css('속성명') : 해당하는 css 옵션의값을 리턴
	// .css('속성명', '속성값') : 해당하는 css 옵션의 값을 변경 
	// table-row  table의 행으로 써 보여주겠다 block을 쓸때는 table이 아닌 다른것들을 쓸때 사용
	
	if($('#tr'+idx).css('display') == "none") {
		$('#tr'+idx).css('display', 'table-row')	
	}
	else {
		$('#tr'+idx).css('display', 'none')
	
	}
}

function update(idx) {
	// textarea 글자 가져오기
	// $('선택자').val()
	// $('선택자').html()
	// $('선택자').text()
	
	var content = $('#teacon'+idx).val()
	// ajax 요청을 통해서 글 내용 업데이트
	$.ajax( {
			url : 'boardUpdate2.do', // 요청할 주소
			type : 'post', // get? post?
			data : {
				'content' : content, 
				'idx' : idx
			},
			//datatype : 'json', // 응답받는 데이터가 어떤 형식인지
			success : loadBoard, // 요청이 성공 했을 때, 실행되는 함수  = callback func
			error : function() { alert('error')} // 요청이 실패했을 때, 실행되는 콜백함수
		}) 
}