Team Project : 오타 /getParameter 파싱오류 / id값 전달/ 동일한 클래스선택

문제점 : 

• #petId : documet is not defined 
• 강아지 상세보기 ->수정하기 ->다시 상세보기를 누르면 프로필이 안뜸. d-none이 계속 적용되어 프로필이 안뜨는상태
• 수정, 추가메뉴에 동일한 사진업로드기능이 수정에만 적용되고 동물추가에는 적용안됨
• 같은 데이터를 2번불러오고 있음.
• PetList.java에서 id 파싱오류

해결:

수정버튼을 누르면 선택한 강아지의 정보출력 & 수정팝업 후 상세내역이 사라지는 오류해결

documet는 오타였는데, 왜 안보였을까......

 

HTML :

기존 html코드가 분산되어있어서 for문을 두번 적용했다. (목록에서 1번, 상세내역에서 1번)

동일한 강아지에 대해 같은 정보를 두번씩 불러오는 상황.

불필요한 반복을 줄이기 위해 강아지 한마리 div안에 목록,상세,수정,삭제를 넣어 for문 한번만 반복하도록했다.

 

 

CSS :

입력사항 *표시 추가

 

JSP :

• for문으로 list, profile,update,delete를 감싸서 한마리의 수정,삭제,상세내역 연결
• 페이지를 로딩하면 선택한값이 없기때문에 null이다. 이 부분에 대해 조건처리가 되지않아서 오류발생 +petlist에서 id의 초기값설정도 없었고, null을 파싱하게되어 오류발생한것.
• id =1 초기화 및 null이 아닐경우 파싱하는 조건추가

int id_ = 1;
if (req.getParameter("id") != null) {
Integer.parseInt(req.getParameter("id"));				
}

• 사용자가 선택한 강아지의 상세정보,수정,삭제가 이루어져야한다.
• 강아지 id가 필요한 태그에 <%=p.getId() %>추가

<div class="profile-popup" id="popup-1-<%=p.getId()%>">
<div class="popup-content">
<div class="close-btn" onclick="togglePopup(<%=p.getId()%>)">×</div>

 

 

Javascript

• 프로필이 d-none(invisible)적용할 이유가없다. 모달태그이므로 클릭해야뜬다.
• 기존 코드는 하나의 div안에서 프로필이 바뀌어야했다.
• for문으로 이미 프로필div가 각각 만들어져있기 때문에 d-none을 삭제.
• id를 파라미터로 넘겨주고 기존의 id형식을 지키되, 전달된 id를 사용할 수있게했다(`popup-2-${id}`)

  function confirmPopup(id){
    console.log("confirmPopup");
	console.log(id);
    document.getElementById(`popup-4-${id}`).classList.toggle("active");
    //if(e.target.contains("cancel"))
    //document.getElementById(`popup-4-${id}`).classList.remove("active");
  }

• 수정과 추가에 같은 사진upload 기능이 있는데, querySelector를 해서 상대적으로 위에있는 수정 upload만 적용되었다.
• querySelectorAll로 선택후 for문으로 반복문을 돌려 같은 클래스명인것은 모두 적용되게했다.

	var fileTriggetButtons = document.querySelectorAll(".file-trigger-button");//가 클릭되지만
console.log(fileTriggetButtons);
	for(let i = 0; i < fileTriggetButtons.length; i++) {
		fileTriggetButtons[i].onclick = function() {
			var event = new MouseEvent("click", {
				'view': window,
				'bubbles': true,
				'cancelable': true
			});

 

다음 할일..

1. onclick을 이벤트리스너로 바꾸기

2. 히든인풋 벨류이용해서 함수 재정의

3. c,u,d DB연동