어제까지 진행된 내용은 MySQL에 저장된 데이터들을 불러와 list의 content들을 출력하는 것이었다.
이제 checkbox에 done 값을 적용시키는 단계였다.
사실 에러 기록을 하면서 진행했어야 되는데 열이 받아서(..ㅎ) 차마 기록을 못했다. 에러 재현을 하려고 코드를 수정해봤지만 이상하게 재현이 잘 안됐다. 일단 기억에 의존해 기록해 보겠다.
첫번째 에러, for문을 이용해서 아래 내용을 반복해서 적는 식으로 진행했기 때문에 같은 id값을 가지는 필드가 많다는 에러가 발생했다.
<% for(var i=0; i < rows.length; i++) { %>
<ul class="lists">
<% let isDone=false %>
<% if(rows[i].DONE===1) { isDone=true } %>
<input type="checkbox" checked = <%= isDone %> value="<%=isDone %>" name="done_check" >
<label for="done_check"></label>
<div class="content">
<%= rows[i].CONTENT %>
</div>
<img class="edit" src="images/pencil.png" alt="edit button">
</ul>
<% } %>원래 id값은 unique해야하기 때문에 id 부분을 name으로 바꾸어서 진행해주었다.
두번째 에러, checkbox의 checked 값을 받아온 rows 데이터의 done 컬럼을 바로 적용시키려고 했지만 전혀 적용되지 않았다.
<input type="checkbox" checked="<%= rows[i].DONE %>" name="done_check" >모든 값이 다 true로 저장됐다.
확인을 위해 값을 출력을 시켜봤는데 1과 0으로 나왔다.
원래 데이터베이스에 DONE 컬럼의 형식은 int형이었지만 이 코드에 적용시키려고 boolean 값으로 변형까지 시켰는데 생각해보니까 boolean도 데이터베이스에서 numberic value였다...ㅎ
https://suyeoniii.tistory.com/70
그래서 저 링크처럼 value에 rows[i].DONE을 저장한 뒤 script 부분에서 적용시키기로 했다.
script 부분에서 페이지 로드될 때 리스트를 불러올 수 있도록 $(document).ready(function() {});을 이용했다.
$(document).ready(function() {
var doneCheck = $("input[name=done_check]");
for(var i = 0; i < doneCheck.length; i++){
if(doneCheck[i].value === 1){
doneCheck[i].checked = true;
}
else{
doneCheck[i].checked = false;
}
jquery를 사용해 checkbox 객체들을 변수에 저장해 for문으로 저장된 value 값에 접근을 해 참이면 checked 값을 true로 거짓이면 false로 바꿔주는 코드를 작성했다.
전혀 작동되지 않았다.
맨 처음에는 doncheck[i].checked = true; 이 부분이 문제인 줄 알고 prop이나 attr 함수를 이용해 바꿔보려고도 했지만 두 함수 다 존재하지 않는 함수라는 에러가 발생했다.
그렇다면 if문에 걸리지도 않는다는건데...
데이터베이스에 boolean 값으로 변형까지 시켰는데... 다시 돌릴까?
라는 생각을 하는 순간 rows[i].done 값이 int 값으로 인식이 안되고 문자열로 인식된걸까? 라는 생각이 불현듯 스쳐지나 갔다.
$(document).ready(function() {
var doneCheck = $("input[name=done_check]");
for(var i = 0; i < doneCheck.length; i++){
if(doneCheck[i].value === 1){
console.log("is true");
doneCheck[i].checked = true;
}
else{
doneCheck[i].checked = false;
}
}});
성공... 이렇게 허무할수가..
이번엔 label에서 문제가 발생했다.
앞서 for문을 이용해서 리스트를 출력하면서 id를 name으로 바꿔서 사용했더니 label은 짝이 되는 input의 id와 label for의 값이 같아야하는데 그렇지 못해 다음고 같은 에러가 발생하였다.
구글링 해보니 name은 적용될 수 없는 것 같아서 checkbox를 Span으로 바꿔서 사용하려고 했는데 span으로는 뭐 할 수 있는 게 없었다..
그래서 혹시나 id값에 for문 돌릴때 사용했던 i값을포함 시킬수 있을까 해서 해봤더니 성공!
<% for(var i=0; i < rows.length; i++) { %>
<ul class="lists">
<input type="checkbox" value="<%= rows[i].DONE %>" name="done_check" id="done_check<%= i %>">
<label for="done_check<%= i %>"></label>
<div class="content">
<%= rows[i].CONTENT %>
</div>
<img class="edit" src="images/pencil.png" alt="edit button">
</ul>
<% } %>이때 css 부분과 script부분은 다음과 같이 변경했다.
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label{
width: 50px;
height: 50px;
border-radius: 12px;
border: solid 6px rgb(0, 142, 250);
display: inline-block;
}
input[type=checkbox]:checked + label {
background-color: rgb(0, 142, 250);
}$(document).ready(function () {
var doneCheck = $("input[type=checkbox]");
for (var i = 0; i < doneCheck.length; i++) {
if (doneCheck[i].value === "1") {
console.log("is true");
doneCheck[i].checked = true;
}
else {
doneCheck[i].checked = false;
}
}
});eventlistener 등록
const doneCheckboxs = $("input[type=checkbox]");
for(var i = 0; i < doneCheckboxs.length; i++){
doneCheckboxs[i].addEventListener("change", e =>{
console.log(e.target.id);
});
}jquery 이용해서 input tag 중 checkbox들을 배열로 받는다.
for문을 이용해 배열에 접근해 이벤트 리스너를 등록한다.
이제 내일 CRUD에서 남은 Create, Update, Delete를 구현해 볼 것이다!
