Team Project : 개별id값불러오기/hidden input태그

문제점 :

데이터베이스에있는 강아지목록중에 선택한 강아지의 상세보기가 안되고,

한 팝업창에 3마리의 정보가 한꺼번에 나열되었다.

백엔드 연습중이어서 자바를 수정해야했다.

 

해결 : 

-DB, JSP, JS 모두 수정

 

 

DB :

DB의 목록중 특정 행의 자료를 끌고와야한다.

식별할 수있는 ID컬럼추가 및 ID명 추가

DB의 강아지정보를 잘 불러오고있다 !!

JSP

강아지프로필 불러올 태그에 자바코드 부여

1. jsp 파일에 반복할 for문넣기

2. 선택한것을 식별하기위한 id값넣기 (div)태그추가

3.div태그에 클래스명 부여 "pet-id- [p.getId()]"

<%for(Pet p : list){ %>
<div class="pet-id-<%= p.getId() %> d-none">
<div class="detail-name">
<h2><%=p.getName() %></h2>​

팝업 close버튼에 hidden input 태그넣기

프로필 팝업 3가지중 특정 팝업만 id부여

<div class="profile-popup" id="popup-1">
	<%-- <%for(Pet p : list){ %> --%>
		<div class="popup-content">
			<div class="close-btn" onclick="togglePopup()">×</div>
				<input type="hidden" id="petId" name="petId" value="">

Javascript

js 팝업함수 재정의

1. hidden input태그 선택

2. if조건문 : id가 있다면 input태그의 value에 id값을 넣기

3. 클래스명이 pet-id-숫자 인것을 선택

4. 해당 클래스의 d-none을 지운다.

//상세보기
function togglePopup(id) {
	console.log("profile");
	console.log(id);
	document.getElementById("popup-1").classList.toggle("active");
	//var detail = document.querySelector('.dog-info .detail');
	//var petId = '.pet-id-' + id
	//console.log(petId);
	var petId = document.querySelector('#petId');//hidden input태그 선택
	var pet;
	if (id) petId.value = `${id}`;	
	
	pet = document.querySelector(`.pet-id-${petId.value}`);
	//console.log(petId);
	//console.log(pet)
	//if(petId.value) pet = document.querySelector(`.pet-id-${petId.value}`);
	pet.classList.toggle('d-none');	
}

 

오늘 수업에 배운 input hidden을 적용했는데, 신기하다..

가려진 input태그로 id가 전달이 되서 그 id관련 정보만 출력된다. 

사진업로드 및 프로필수정적용,삭제 배우면 CRUD작업은 거의 마무리 되가는것같다. 빨리 완성하고싶다.