bootstrap 팝업창 만들기 단원에서 질문있습니다.

Question

게시판에서 삭제 버튼이 눌리지 않아 data-toggle , data-target은 data-bs-toggle, data-bs-target 으로 수정하여 버튼 눌러서 모달창 팝업까지는 해결하였습니다. 하지만 모달창에 body-text는 todo내용이 아닌 body-text 문자 그대로 보여주고 delete 버튼을 눌러도 내용이 삭제 되지않습니다. 버젼이 틀려서 스크립트에서 id,name,todo를 받아오지 못하는거 같은대 아무리 찾아봐도 해결법을 모르겠습니다.

김석훈 · Answer

독자님. 아래처럼 해 보세요. element.setAttribute(속성명, 속성값) modalFooter.setAttribute('href', '/todo/' + id + '/delete2/')

김석훈 · Answer

안녕하세요. 독자님. bootstrap v5.2 에서는 data-bs-whatever 라는 키워드로 바뀌어서, data-xxx 가 아니라 data-bs-xxx 로 해줘야 합니다. 그래서 HTML 부분과 Javascript 부분을 아래와 같이 변경해 보세요. data-bs-id="{{todo.id}}" data-bs-name="{{todo.name}}" data-bs-todo="{{todo.todo}}" const id = button.getAttribute('data-bs-id') const name = button.getAttribute('data-bs-name') const todo = button.getAttribute('data-bs-todo')

김석훈 · Answer

안녕하세요. 독자님. 부트스트랩 버전이 현재는 5.2 이군요. 독자님도 5.2 버전을 사용하고 계신가요 ? 예전 부트스트랩에서는 jQuery 를 사용했으나 현재는 jQuery 를 사용하지 않아서 발생하는 에러로 보입니다. 아래 사이트가 강의에서 사용한 모달의 v5.2 버전 소스 입니다. 소스가 비슷하니 (javascript 부분은 많이 바뀜), 강의를 참고해서 시도해 보기 바랍니다. https://getbootstrap.com/docs/5.2/components/modal/#varying-modal-content 그래도 안되면 html 파일을 올려 주세요. 제가 실행해 보겠습니다. 감사합니다.