java_spring (2024.05 ~ 2024.10)
24.08.20
qordpsem
2024. 8. 20. 12:31
# 문제상황
1. Jquery import 안해줌
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. id 값 중복
- Book 삭제 시에는 detail 화면 (상품 하나만 떠있는 화면) 에서 function 을 사용했기 때문에 id 중복 문제가 없었음
- 동일한 function을 작성하였는데 Customer 삭제 시에는 오류가 생김
Customer 전체 목록이 떠있는 상태에서 삭제를 하기 위해 전체 목록을 띄우는데 표를 사용한 상태
표에서 값이 반복되는 상태(수정 삭제 버튼도 반복)이라 id 중복 문제가 생김
*반복문 사용 시 id 사용에 주의하자..
# 해결책
- id 대신 class 를 사용함
*id 는 페이지 내에서 유일해야 하므로, 반복적으로 생성되는 요소에는 class를 사용하는 것이 좋음
#사용한 function
<script type="text/javascript">
$(function() {
$("#btnDelete").click(function(e) {
if (!confirm("정말로 삭제할까요?")) {
e.preventDefault();
}
});
});
</script>
#참고한 Book 삭제 화면
<body>
<h2>DetailBook</h2>
<table border="1" width="80%">
<tr>
<th>도서번호</th>
<th>도서명</th>
<th>가격</th>
<th>출판사</th>
</tr>
<tr>
<td th:text="${b.bookid}"></td>
<td th:text="${b.bookname}"></td>
<td th:text="${b.price}"></td>
<td th:text="${b.publisher}"></td>
</tr>
</table>
<a class="btn btn-primary" th:href="@{/book/update(bookid=${b.bookid})}">수정하기</a>
<a class="btn btn-danger" id="btnDelete" th:href="@{/book/delete(bookid=${b.bookid})}">삭제하기</a>
</body>id="btnDelete" 사용해서 위의 function 을 #btnDelete 로 연결
# Customer 삭제 기능 구현 시 id 대신 class 사용
<script type="text/javascript">
$(function() {
$(".btnDelete").click(function(e) {
if (!confirm("정말로 삭제할까요?")) {
e.preventDefault();
}
});
});
</script>
<title>Insert title here</title>
</head>
<body>
<h2>Customer List</h2>
<table border="1" width="80%">
<tr>
<th>고객번호</th>
<th>고객이름</th>
<th>주소</th>
<th>전화번호</th>
<th>Action</th>
</tr>
<tr th:each="c:${list}">
<td th:text="${c.custid}"></td>
<td th:text="${c.name}"></td>
<td th:text="${c.address}"></td>
<td th:text="${c.phone}"></td>
<td>
<a th:href="@{/customer/update(custid=${c.custid})}">수정</a>
<a class="btnDelete" th:href="@{/customer/delete(custid=${c.custid})}">삭제</a>
</td>
</tr>
</table>
</body>